Search completed in 1.16 seconds.
<div>: The Content Division element - HTML: Hypertext Markup Language
the html content
division element (<
div>) is the generic container for flow content.
... as a "pure" container, the <
div> element does not inherently represent anything.
... implicit aria role no corresponding role permitted aria roles any dom interface html
divelement attributes this element includes the global attributes.
...And 8 more matches
HTMLDivElement - Web APIs
the html
divelement interface provides special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating <
div> elements.
... <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
divelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
divelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits pro...
...And 5 more matches
divisor - SVG: Scalable Vector Graphics
the
divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is
divided to yield the destination color value.
... a
divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the result.
... only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1"
divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1"
divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); transform:translatex(220px);...
...And 4 more matches
ANGLE_instanced_arrays.vertexAttribDivisorANGLE() - Web APIs
the angle_instanced_arrays.vertexattrib
divisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
... note: when using webgl2, this method is available as gl.vertexattrib
divisor() by default.
... syntax void ext.vertexattrib
divisorangle(index,
divisor); parameters index a gluint specifying the index of the generic vertex attributes.
...And 2 more matches
WebGL2RenderingContext.vertexAttribDivisor() - Web APIs
the webgl2renderingcontext.vertexattrib
divisor() method of the webgl 2 api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawarraysinstanced() and gl.drawelementsinstanced().
... syntax void gl.vertexattrib
divisor(index,
divisor); parameters index a gluint specifying the index of the generic vertex attributes.
...
divisor a gluint specifying the number of instances that will pass between updates of the generic attribute.
...And 2 more matches
CSSNumericValue.div() - Web APIs
the
div() method of the cssnumericvalue interface
divides the cssnumericvalue by the supplied value.
... syntax var cssnumericvalue = cssnumericvalue.
div(number); parameters number either a number or a cssnumericvalue.
... 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.
Division (/) - JavaScript
the
division operator (/) produces the quotient of its operands where the left operand is the
dividend and the right operand is the
divisor.
... syntax operator: x / y examples basic
division 1 / 2 // 0.5 math.floor(3 / 2) // 1 1.0 / 2.0 // 0.5
division by zero 2.0 / 0 // infinity 2.0 / 0.0 // infinity, because 0.0 === 0 2.0 / -0.0 // -infinity specifications specification ecmascript (ecma-262)the definition of '
division operator' in that specification.
Division assignment (/=) - JavaScript
the
division assignment operator (/=)
divides a variable by the value of the right operand and assigns the result to the variable.
... syntax operator: x /= y meaning: x = x / y examples using
division assignment // assuming the following variable // bar = 5 bar /= 2 // 2.5 bar /= 'foo' // nan bar /= 0 // infinity specifications specification ecmascript (ecma-262)the definition of 'assignment operators' in that specification.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; values standard keywords value demo browser description none
div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; } <
div>lorem</
div> firefox chrome safari edge no special styling is applied.
... auto
div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; } <
div>lorem</
div> none the user agent selects the appropriate special styling based on the element.
... menulist-button
div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } <
div>lorem</
div> firefox chrome safari edge the element is styled as a button that would indicate a menulist can be opened.
...And 26 more matches
Multiple-column layout - Learn web development
the <
div> with a class of container will become our multicol container.
... column-count example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } <
div class="container"> <h1>simple multicol example</h1> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </
div> .container { column-count: 3; } change your css to use column-width as follows: .container { column-width: 200px; } the browser will now give you as many columns as it can of the size that you specify; any remaining space is then shared between the existing columns.
...And 23 more matches
Index - Web APIs
5 angle_instanced_arrays.vertexattrib
divisorangle() angle_instanced_arrays, api, method, reference, webgl, webgl extension the angle_instanced_arrays.vertexattrib
divisorangle() method of the webgl api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
...it is especially important in games and musical applications where large numbers of in
dividual sounds are played simultaneously, where you want to control the overall signal level and help avoid clipping (distorting) of the audio output.
... 422 cssnumericvalue.
div() api, css typed object model api, cssnumericvalue, experimental, houdini, method, reference,
div() the
div() method of the cssnumericvalue interface
divides the cssnumericvalue by the supplied value.
...And 22 more matches
Using CSS gradients - CSS: Cascading Style Sheets
<
div class="simple-linear"></
div>
div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom.
... <
div class="horizontal-gradient"></
div>
div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner.
... <
div class="diagonal-gradient"></
div>
div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle.
...And 22 more matches
Legacy layout methods - Learn web development
replace whatever is inside the body currently with the following: <h1>2 column layout example</h1> <
div> <h2>first column</h2> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...ut id ornare felis, eget fermentum sapien.</p> </
div> <
div> <h2>second column</h2> <p>nam vulputate diam nec tempor bibendum.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </
div> each one of the columns needs an outer element to contain its content and let us manipulate all of it at once.
...And 19 more matches
mix-blend-mode - CSS: Cascading Style Sheets
valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix-blend-mode values <
div class="grid"> <
div class="col"> <
div class="note">blending in isolation (no blending with the background)</
div> <
div class="row isolate"> <
div class="cell"> normal <
div class="container normal"> <
div class="group"> <
div class="item firefox"></
div> <svg viewbox="0 0 150 150"> <defs> <lineargradient id="red"> ...
... <stop offset="100%" stop-color="hsl(240,0%,100%)" /> </lineargradient> </defs> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </
div> </
div> </
div> <
div class="cell"> multiply <
div class="container multiply"> <
div class="group"> <
div class="item firefox"></
div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ell...
...ipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </
div> </
div> </
div> <
div class="cell"> darken <
div class="container darken"> <
div class="group"> <
div class="item firefox"></
div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </
div> </
div> </
div> <
div class="cell"> screen <
div class="container screen"> <
div class="group"> <
div class="item firefox"></
div> <svg viewbox="0 0 150 150...
...And 19 more matches
Introduction to CSS layout - Learn web development
the elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the in
dividual words in a paragraph.
... the html markup below gives us a containing element, with a class of wrapper, inside which are three <
div> elements.
... flexbox example 1 * {box-sizing: border-box;} .wrapper >
div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: flex; } <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> </
div> in addition to the above properties that can be applied to the flex container, there are properties that can be applied to the flex items.
...And 18 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
while document.getelementbyid lets you retrieve one element, you can also use document.layers and document.all to obtain a list of all document elements with a certain tag name, such as all <
div> elements.
...in mozilla, you can position any element using the <
div> tag, which internet explorer uses as well and which you'll find in the html specification.
...the best way to only process element nodes is to iterate over all child nodes and only process those with a nodetype of 1: html: <
div id="foo"> <span>test</span> </
div> javascript: var my
div = document.getelementbyid("foo"); var mychildren = my
div.childnodes; for (var i = 0; i < mychildren.length; i++) { if (mychildren[i].nodetype == 1){ // element node }; }; generate and manipulate content mozilla supports the legacy methods for adding content into the dom dynamically, such as document.write, d...
...And 17 more matches
Box-shadow generator - CSS: Cascading Style Sheets
box-shadow generator html content <
div id="container"> <
div class="group section"> <
div id="layer_manager"> <
div class="group section"> <
div class="button" data-type="add"> </
div> <
div class="button" data-type="move-up"> </
div> <
div class="button" data-type="move-down"> </
div> </
div> <
div id="stack_container"></
div> </
div> <
div id="preview_zone"> <
div id="layer_menu" class="col span_12"> <
div class="button" id="element" data-type="subject" data-title="element"> element </
div> <
div class="button" id="before" data-type="subject" d...
...ata-title=":before"> :before <span class="delete" data-type="disable"></span> </
div> <
div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </
div> <
div class="ui-checkbox" data-topic='before' data-label=":before"></
div> <
div class="ui-checkbox" data-topic='after' data-label=":after"></
div> </
div> <
div id="preview"> <
div id="obj-element"> <
div class="content"> </
div> <
div id="obj-before"> </
div> <
div id="obj-after"> </
div> </
div> </
div> ...
... </
div> </
div> <
div id="controls" class="group section"> <
div class="wrap-left"> <
div class="colorpicker category"> <
div class="title"> </
div> <
div id="colorpicker" class="group"> <
div id="gradient" class="gradient"> <
div id="gradient_picker"> </
div> </
div> <
div id="hue" data-topic="hue" class="hue"> <
div id="hue_selector"> </
div> </
div> <
div class="info"> <
div class="input" data-topic="hue" data-title='h:' data-action="hsv"></
div> <
div class="input" data-topic="saturation" data-title='s:' data-action="hsv"></
div> ...
...And 17 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
layout methods will conform to the specification where possible and implement in
dividual behavior based on their differences (features and constraints).
...i can use the align-items property on the grid container, to align the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area...
...: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <
div class="wrapper"> <
div class="item1">item 1</
div> <
div class="item2">item 2</
div> <
div class="item3">item 3</
div> <
div class="item4">item 4</
div> </
div> keep in mind that once you set align-items: start, the height of each child <
div> will be determined by the contents of the <
div>.
...And 17 more matches
<blend-mode> - CSS: Cascading Style Sheets
<
div id="
div"></
div> #
div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <
div id="
div"></
div> #
div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <
div id="
div"></
div> #
div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 17 more matches
filter - CSS: Cascading Style Sheets
</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <
div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height=...
..."161px"/> </svg> </
div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; backgroun...
...vg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td> <td><
div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="srgb"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="2"/> <fefuncg type="linear" slope="2"/> <fefuncb type="linear" slope="2"/> </fecomponenttransfer> </filter> <image xlink:href="/files/3708/test_form.jpg" f...
...And 17 more matches
Using CSS transitions - CSS: Cascading Style Sheets
you can control the in
dividual components of the transition with the following sub-properties: (note that these transitions loop infinitely only for the purpose of our examples; css transitions only visualize a property change from start to finish.
... transition-duration: 0.5s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; ...
...nt-size left top transform -webkit-transform color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration: 0.5s; 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); transition-duration: 1s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; ...
...And 16 more matches
Border-image generator - CSS: Cascading Style Sheets
border image generator html content <
div id="container"> <
div id="gallery"> <
div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border...
...5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </
div> </
div> <
div id="load-actions" class="group section"> <
div id="toggle-gallery" data-action="hide"> </
div> <
div id="load-image" class="button"> upload image </
div> <input id="remote-url" type="text" placeholder="load an image from url"/> <
div id="load-remote" class="button"> </
div> </
div> <
div id="general-controls" class="group section"> <
div class="name"> control box </
div> <
div class="separator"></
div> <
div class="property"> <
div class="name">scale</
div> <
div class="ui-input-slider" data-topic="scale" ...
... data-unit="%" data-max="300" data-sensivity="10"> </
div> </
div> <
div class="separator"></
div> <
div class="property"> <
div class="name">draggable</
div> <
div class="ui-checkbox" data-topic='drag-subject'></
div> </
div> <
div class="property right"> <
div class="name">section height</
div> <
div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </
div> </
div> </
div> <
div id="preview_section" class="group section"> <
div id="subject"> <
div class="guideline" data-axis="y" data-topic="slice-top"></
div> ...
...And 15 more matches
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool html <
div id="container"> <
div id="palette" class="block"> <
div id="color-palette"></
div> <
div id="color-info"> <
div class="title"> css color </
div> </
div> </
div> <
div id="picker" class="block"> <
div class="ui-color-picker" data-topic="picker" data-mode="hsl"></
div> <
div id="picker-samples" sample-id="master"></
div> <
div id="controls"> <
div id="delete"> <
div id="trash-can"></
div> </
div> <
div id="void-sample" class="icon"></
div> </
div> </
div> <
div id="canvas" data-tutorial="drop"> <
div id="zindex" class="ui-input-slider" data-topic="z-index" da...
...ta-info="z-index" data-max="20" data-sensivity="10"></
div> </
div> </
div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, r...
...putchangehexa.bind(this)); this.setcolor(this.color); pickers[topic] = this; } /*************************************************************************/ // function for generating the color-picker /*************************************************************************/ colorpicker.prototype.createpickingarea = function createpickingarea() { var area = document.createelement('
div'); var picker = document.createelement('
div'); area.classname = 'picking-area'; picker.classname = 'picker'; this.picking_area = area; this.color_picker = picker; setmousetracking(area, this.updatecolor.bind(this)); area.appendchild(picker); this.node.appendchild(area); }; colorpicker.prototype.createhuearea = function createhuearea() { var area = document.createelement('d...
...And 15 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <
div id="container"> <
div id="gradient-container" data-alpha="true"> </
div> <
div id="controls"> <
div class="section"> <
div class="title"> active point </
div> <
div class="property"> <
div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></
div> <
div id="delete-point" class="button"> delete point </
div> </
div> <
div class="ui-color-picker" data-topic="picker"></
div> </
div> <
div class="section"> <
div class="title"> active axis </
div> ...
... <
div class="property"> <
div class="name"> axis unit </
div> <
div class="ui-dropdown" data-topic="axis-unit" data-selected="1"> <
div data-value='px'> pixels (px) </
div> <
div data-value='%'> percentage (%) </
div> </
div> <
div id="delete-axis" class="button"> delete line </
div> </
div> <
div class="property"> <
div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-180" data-value="0" data-max="180"></
div> </
div> </
div> <
div id="tool-section" class="section"> <
div class="title"> tool settings </
div> ...
...<
div class="property"> <
div class="name"> alpha background </
div> <
div id="canvas-bg"></
div> <
div id="add-axis" class="button"> add line </
div> </
div> <
div id="order"> <
div id="gradient-axes"></
div> <
div id="gradient-order"></
div> </
div> </
div> </
div> <
div id="output"> <
div class="css-property"> <span class="property">background:</span> <span class="value"></span> </
div> </
div> </
div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-se...
...And 15 more matches
Floats - Learn web development
first, we'll start off with some simple html — add the following to your html body, removing anything that was inside there before: <h1>simple float example</h1> <
div class="box">float</
div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15px; width: 150px; height: 100px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } now if you save and refresh you'll see something like the following: float example 1 <h1>simple float example</h1> <
div class="box">float</
div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...ient montes, nascetur ridiculus mus.</p> body { width: 90%; max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { float: left; margin-right: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } so let's think about how the float works — the element with the float set on it (the <
div> element in this case) is taken out of the normal layout flow of the document and stuck to the left-hand side of its parent container (<body>, in this case).
...And 14 more matches
WebGL model view projection - Web APIs
the model, view, and projection matrices in
dividual transformations of points and polygons in space in webgl are handled by the basic transformation matrices like translation, scale, and rotation.
...these matrices are core to moving data around on the screen, and are concepts that transcend in
dividual frameworks and engines.
... first take a look at the vertex shader that will move the vertices on the screen: // the in
dividual position vertex attribute vec3 position; void main() { // the gl_position is the final position in clip space after the vertex shader modifies it gl_position = vec4(position, 1.0); } next, to actually rasterize the data into pixels, the fragment shader evaluates everything on a per pixel basis, setting a single color.
...And 13 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> default rules for auto-placement as you can see with ...
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .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; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 100px; } you can use minmax(...
... * {box-sizing: border-box;} .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; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four <br>this cell <br>has extra <br>content.
...And 12 more matches
Componentizing our Svelte app - Learn web development
todo.svelte: an in
dividual todo item.
...add the following content into the file: <script> export let filter = 'all' </script> <
div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter...
...visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </
div> back in our todos.svelte component, we want to make use of our filterbutton component.
...And 11 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
in this example, i have a containing
div with a class of wrapper and, inside are five child elements.
... <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> i make the .wrapper a grid container.
... .wrapper { display: grid; } * {box-sizing: border-box;} .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; } all the direct children are now grid items.
...And 11 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .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; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper >
div { flex: 1 1 150px; } in the image, you can see that two items have wrap...
... * {box-sizing: border-box;} .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; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when deciding between grid or flexbox is: do ...
...you let the size of the content decide how much in
dividual space each item takes up.
...And 10 more matches
WAI-ARIA basics - Learn web development
for example, html5 introduced a number of semantic elements to define common page features (<nav>, <footer>, etc.) before these were available, developers would simply use <
div>s with ids or classes, e.g.
... <
div class="nav">, but these were problematic, as there was no easy way to easily find a specific page feature such as the main navigation programmatically.
...as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <
div>s or table elements with classnames, which are then styled using css and controlled using javascript.
...And 9 more matches
CSS FAQ - Learn web development
<style type="text/css"> .news { background: black; color: white; } .today { font-weight: bold; } </style> <
div class="news today"> ...
...</
div> if the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the css declarations.
... .news { color: black; } .corpname { font-weight: bold; color: red; } <!-- news item text is black, but corporate name is red and in bold --> <
div class="news"> (reuters) <span class="corpname">general electric</span> (ge.nys) announced on thursday...
...And 9 more matches
Video and Audio APIs - Learn web development
you'll see a number of features; the html is dominated by the video player and its controls: <
div class="player"> <video controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <
div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <
div class="timer"> ...
... <
div></
div> <span aria-label="timer">00:00</span> </
div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </
div> </
div> the whole player is wrapped in a <
div> element, so it can all be styled as one unit if needed.
... there is also a timer <
div>, which will report the elapsed time when the video is playing.
...And 9 more matches
Timing element visibility with the Intersection Observer API - Web APIs
without the intersection observer api, this winds up being done using intervals and timeouts for each in
dividual ad, or other techniques that tend to slow the page down.
...we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <
div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </
div> this is the framework for the entire site.
...let's look at the style for each component of the page in
dividually.
...And 9 more matches
Using multi-column layouts - CSS: Cascading Style Sheets
e.g., example 1 html <
div id="col"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </p> </
div> css #col { column-count: 2; } result will display the content in two columns (if you're using a multi-column compliant browser): the column-width property sets the minimum desired column width.
... example 2 html <
div id="wid"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...And 9 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
in the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container: .container { position: relative; } .item { position: absolute; top: 20px; left: 30px; } <
div class="container"> <
div class="item">item</
div> </
div> another place you might see physical keywords in use, is when using text-align: right to align text to the right.
... .wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d9480f; max-width: 300px; } <
div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </
div> writing modes in grid layouts if we now take a look at a grid layout example, we can see how changing the writing mode means changing our idea of where the block ...
...it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <
div class="wrapper"> <
div class="item1">item 1</
div> <
div class="item2">item 2</
div> <
div class="item3">item 3</
div> <
div clas...
...And 9 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .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; } when defining the grid, i name my lines inside square brackets.
... .box1 { grid-column-start: main-start; grid-row-start: main-start; grid-row-end: main-end; } .box2 { grid-column-start: content-end; grid-row-start: main-start; grid-row-end: content-end; } .box3 { grid-column-start: content-start; grid-row-start: main-start; } .box4 { grid-column-start: content-start; grid-column-end: main-end; grid-row-start: content-end; } <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> </
div> everything else about line-based placement still works in the same way and you can mix named lines and line numbers.
... * {box-sizing: border-box;} .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; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
...And 9 more matches
clip-path - CSS: Cascading Style Sheets
& [ [ top | bottom ] <length-percentage> ] ]<fill-rule> = nonzero | evenodd<box> = border-box | padding-box | content-box examples comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <
div class="grid"> <
div class="col"> <
div class="note">clip-path: none</
div> <
div class="row"> <
div class="cell"> <span>html</span> <
div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </
div> </
div> <
div class="cell"> <span>svg</span> <
div class="container viewbox"> <svg viewbox="0 0 192 ...
...192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </
div> </
div> </
div> <
div class="note">clip-path: url(#mypath)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /> </clippath> </svg></pre> </
div> <
div class="row"> <
div class="cell"> <span>html</span> <
div class="container"> <p class="svg"> ...
... i love<br><em>clipping</em> </p> </
div> </
div> <
div class="cell"> <span>svg</span> <
div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </
div> </
div> </
div> <
div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </
div> <
div class="row"> <
div class="cell"> <span>html</span> <
div class="container"> <p class="svg2"> i love<br><em>clipping</em> </p> </
div> </
div> ...
...And 9 more matches
itemprop - HTML: Hypertext Markup Language
html <
div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </
div> structured data item itemprop name itemprop v...
... three properties with values that are strings <
div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </
div> one property, "image", whose value is a url <
div itemscope> <img itemprop="image" src="google-logo.png" alt="google"> </
div> when a string value can't be easily read and understood...
... a meter element <
div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <
div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="reviewcount">11<...
...And 9 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
it's like a scuba enthusiast getting to join jacques cousteau on a
dive, even down to the required time travel.
...at the end of it, there were a series of
div elements that contained a picture of the fish, the name of the fish, and one or more paragraphs of text about the fish.
... <
div class="card"> <img src="thumb_clown_trigger.jpg" alt="clown trigger" border="0" width="150" height="115"> <h3>clown trigger</h3> <p> our clown trigger is a bold little fish, though for a few weeks he slept a lot and didn't look well in general.
...And 8 more matches
Grids - Learn web development
simple grid example body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container >
div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <
div class="container"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> <
div>six</
div> <
div>seven</
div> </
div> .container { display: grid; grid-template-columns: 200px 200px 200px; } flexible grids with the fr unit in a...
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; } .container >
div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <
div class="container"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> <
div>six</
div> <
div>seven</
div> </
div> note: the fr unit distributes available space, not all space.
... simple grid example with fr units body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 arial, helvetica, sans-serif; } .container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; } .container >
div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } <
div class="container"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> <
div>six</
div> <
div>seven</
div> </
div> note: the *gap properties used to be prefixed by grid-, but this has been changed in the spec, as th...
...And 8 more matches
Getting started with React - Learn web development
this file contains our first component, app, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <
div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
... </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </
div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom.
... function app() { return ( <
div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload.
...And 8 more matches
Index
nss doesn't require the programmer to manage in
dividual files containing in
dividual certificates or keys.
...performing an operation often involves allocating many in
dividual data items, and the code might be required to abort a task at many positions in the logic.
...the implementation of arenas makes sure that all in
dividual memory blocks are tracked.
...And 8 more matches
Pointer events - Web APIs
= enter_handler; el.onpointerdown = down_handler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcapture_handler; el.lostpointercapture = lostcapture_handler; } </script> <body onload="init();"> <
div id="target"> touch me ...
... </
div> </body> </html> event properties this example illustrates accessing all of a touch event's properties.
...ty); // call the pressure handler process_pressure(ev.pressure); // if this event is not primary, call the non primary handler if (!ev.isprimary) process_non_primary(ev); } function init() { var el=document.getelementbyid("target"); // register pointerdown handler el.onpointerdown = down_handler; } </script> <body onload="init();"> <
div id="target"> touch me ...
...And 8 more matches
Grid template areas - CSS: Cascading Style Sheets
9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <
div class="wrapper"> <
div class="header">header</
div> <
div class="sidebar">sidebar</
div> <
div class="content">content</
div> <
div class="footer">footer</
div> </
div> using this method we do not need to specify anything at all on the in
dividual gri...
... .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ".
... ft ft ft ft ft ft"; } <
div class="wrapper"> <
div class="header">header</
div> <
div class="sidebar">sidebar</
div> <
div class="content">content</
div> <
div class="footer">footer</
div> </
div> in order to make the layout neater i can use multiple .
...And 8 more matches
Stacking context example 1 - CSS: Cascading Style Sheets
in the root stacking context we have two
divs (
div #1 and
div #3), both relatively positioned, but without z-index properties.
... inside
div #1 there is an absolutely positioned
div #2, while in
div #3 there is an absolutely positioned
div #4, both without z-index properties.
... if
div #2 is assigned a positive (non-zero and non-auto) z-index value, it is rendered above all the other
divs.
...And 8 more matches
Using CSS transforms - CSS: Cascading Style Sheets
<table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <
div class="container"> <
div class="cube pers250"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> <td> <
div class="contain...
...er"> <
div class="cube pers350"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective: 650px;</code> </th> </tr> <tr> <td> <
div class="container"> <
div class="cube pers500"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> ...
...<
div class="face bottom">6</
div> </
div> </
div> </td> <td> <
div class="container"> <
div class="cube pers650"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> </tr> </tbody> </table> css the css establishes classes that can be used to set the perspective to different distances.
...And 8 more matches
create fancy boxes - Learn web development
we are about to see many examples, but we will always work on the most simple piece of html possible, a simple element: <
div class="fancy">hi!
... i want to be fancy.</
div> ok, that's a very small bit of html, what can we tweak on that element?
... making circles <
div class="fancy">hi!
...And 7 more matches
HTML text fundamentals - Learn web development
playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish.
... my legs are made of cardboard and i am married to a fish.</textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = co...
... playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">milk eggs bread hummus</textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="butt...
...And 7 more matches
Introduction to events - Learn web development
in the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 <
div> elements using javascript.
... we then select all of them using document.queryselectorall(), then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when selected: const
divs = document.queryselectorall('
div'); for (let i = 0; i <
divs.length; i++) {
divs[i].onclick = function(e) { e.target.style.backgroundcolor = bgchange(); } } the output is as follows (try clicking around on it — have fun): most event handlers you'll encounter have a standard set of properties and functions (methods) available on the event object; see the event object reference for a full list.
... first, a simple html form that requires you to enter your first and last name: <form> <
div> <label for="fname">first name: </label> <input id="fname" type="text"> </
div> <
div> <label for="lname">last name: </label> <input id="lname" type="text"> </
div> <
div> <input id="submit" type="submit"> </
div> </form> <p></p>
div { margin-bottom: 10px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit ...
...And 7 more matches
Component; nsIPrefBranch
getboolpref() called to get the state of an in
dividual boolean preference.
... getcharpref() called to get the state of an in
dividual string preference.
... getstringpref() requires gecko 58 (firefox 58 / thunderbird 58 / seamonkey 2.55) called to get the state of an in
dividual utf-8 string preference.
...And 7 more matches
Example and tutorial: Simple synth keyboard - Web APIs
we draw this in a pair of nested <
div> elements so that we can make the keyboard horizontally scrollable if all the keys don't fit on the screen, without having them wrap around.
... <
div class="container"> <
div class="keyboard"></
div> </
div> the <
div> named "container" is the scrollable box that lets the keyboard be scrolled horiontally if it's too wide for the available space.
... the volume control first we create the <
div> to contain the settings bar, so it can be styled as needed.
...And 7 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> </d...
... addressing each item in
dividually we can place all four items spanning row and column tracks.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> </
div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { ...
...And 7 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 1024px; margin: 0 auto; font: 1.2em helvetica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } <
div class="wrapper"> <header class="main-head">the header</header> <nav class="main-nav"> <ul> <li><a href="">nav 1</a></li> <li><a href="">nav 2</a></li> <li><a href="">nav 3</a></li> </ul> </nav> <article class="content"> <h1>main article area</h1> <p>in this layout, we di...
...we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> </article> <aside class="side">sidebar</aside> <
div class="ad">advertising</
div> <footer class="main-footer">the footer</footer> </
div> as we are using grid-template-areas to create the layout.
... <
div class="wrapper"> <
div class="item1">start column line 1, span 3 column tracks.</
div> <
div class="item2">start column line 6, span 4 column tracks.
...And 7 more matches
The stacking context - CSS: Cascading Style Sheets
the hierarchy of stacking contexts is organized as follows: root
div #1
div #2
div #3
div #4
div #5
div #6 it is important to note that
div #4,
div #5 and
div #6 are children of
div #3, so stacking of those elements is completely resolved within
div#3.
... once stacking and rendering within
div #3 is completed, the whole
div #3 element is passed for stacking in the root element with respect to its sibling's
div.
... notes:
div #4 is rendered under
div #1 because
div #1's z-index (5) is valid within the stacking context of the root element, while
div #4's z-index (6) is valid within the stacking context of
div #3.
...And 7 more matches
font - CSS: Cascading Style Sheets
as with any shorthand property, any in
dividual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).
...</p> <form action="createshorthand()"> <
div class="cf"> <
div class="setpropcont"> font-style<br/> <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/> <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal">normal</label><br/> ...
... <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setcss()"> <label for="font-style-italic">italic</label><br/> <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label> </
div> <
div class="setpropcont"> font-variant<br> <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/> <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <input type="radio" id="font-variant-small-caps" name="font_variant...
...And 7 more matches
scroll-snap-type - CSS: Cascading Style Sheets
examples snapping in different axes html <
div class="holster"> <
div class="container x mandatory-scroll-snapping" dir="ltr"> <
div>x mand.
... ltr</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> <
div>5</
div> </
div> <
div class="container x proximity-scroll-snapping" dir="ltr"> <
div>x prox.
... ltr</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> <
div>5</
div> </
div> <
div class="container y mandatory-scroll-snapping" dir="ltr"> <
div>y mand.
...And 7 more matches
Block formatting context - Developer guides
in the following example, we have a floated element inside a <
div> with a border applied.
... the content of that <
div> has floated alongside the floated element.
... as the content of the float is taller than the content alongside it, the border of the <
div> now runs through the float.
...And 7 more matches
Making content editable - Developer guides
here's a simple example which creates a <
div> element whose contents the user can edit.
... <
div contenteditable="true"> this text can be edited by the user.
... </
div> here's the above html in action: executing commands when an html element has contenteditable set to true, the document.execcommand() method is made available.
...And 7 more matches
<input type="radio"> - HTML: Hypertext Markup Language
note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn in
dividual values on and off.
... the resulting html looks like this: <form> <p>please select your preferred contact method:</p> <
div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </
div> <
div> <b...
...utton type="submit">submit</button> </
div> </form> here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that in
dividual radio button within the group.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <
div>play video</
div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection ...
...than keywords included in non-semantic <
div>s, etc., so your documents will be more findable by customers.
... another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <
div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc.
...And 6 more matches
HTML: A good basis for accessibility - Learn web development
for example, a control button to play a video on your site could be marked up like this: <
div>play video</
div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection ...
...than keywords included in non-semantic <
div>s, etc., so your documents will be more findable by customers.
... another consideration when creating layouts is using html5 semantic elements as seen in the above example (see content sectioning) — you can create a layout using only nested <
div> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<nav>), footer (<footer>), repeating content units (<article>), etc.
...And 6 more matches
Flexbox - Learn web development
this can be specified in
dividually using the flex-grow longhand property.
...this can be specified in
dividually using the flex-basis longhand value.
... now, add the following to the bottom of the example's css:
div { display: flex; align-items: center; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically.
...And 6 more matches
UI pseudo-classes - Learn web development
for example: <form> <fieldset> <legend>feedback form</legend> <
div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> </
div> <
div> <label for="lname">last name: </label> <input id="lname" name="lname" type="text" required> </
div> <
div> <label for="email">email address (include if you want a response): </label> <input id="email" name="email" type="email"> </
div> ...
... <
div><button>submit</button></
div> </fieldset> </form> here, the first name and last name are required, but the email address is optional.
... since form inputs don't directly support having generated content put on them (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty <span> to hang the generated content on: <
div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> <span></span> </
div> the immediate problem with this was that the span was dropping onto a new line below the input because the input and label are both set with width: 100%.
...And 6 more matches
Document and website structure - Learn web development
previous overview: introduction to html next in addition to defining in
dividual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
...many web designers consider the navigation bar to be part of the header rather than an in
dividual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.
... main content: <main>, with various content subsections represented by <article>, <section>, and <
div> elements.
...And 6 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
the number of minutes will be the amount of seconds left over when all of the hours have been removed,
divided by 60.
... put an empty <
div> element inside the <body>, then add a ↻ character inside it.
...this sets a red background on the page, sets the <body> height to 100% of the <html> height, and centers the <
div> inside the <body>, horizontally and vertically.
...And 6 more matches
Creating our first Vue component - Learn web development
previous overview: client-side javascript frameworks next now it's time to
dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
...we'll use a <
div> for that root element.
... add an empty <
div> inside your component template now.
...And 6 more matches
Basics
</p> <
div style="text-align:center"> fill the gaps in this matrix with resizable input fields.
... </
div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <
div style="text-align:center"> left size: <a class="control" href="javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" titl...
...e="decrease input">-</a> <br/> (click these control buttons to see their effects.) </
div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>.
...And 6 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
der-radius: 5px; background-color: #fff4e6; max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <
div class="media"> <
div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></
div> <
div class="text">this is a media object example.
... i am using floats for older browsers and grid for new ones.</
div> </
div> the image below shows the media object in a non-supporting browser on the left, and a supporting one on the right: using feature queries the above example is very simple, and we can get away without needing to write code that would be a problem to browsers that do not support grid, and legacy code is not an issue to our grid supporting browsers.
...lor: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <
div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>three</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li cl...
...And 6 more matches
font-family - CSS: Cascading Style Sheets
families .serif { font-family: times, times new roman, georgia, serif; } .sansserif { font-family: verdana, arial, helvetica, sans-serif; } .monospace { font-family: lucida console, courier, monospace; } .cursive { font-family: cursive; } .fantasy { font-family: fantasy; } .emoji { font-family: emoji; } .math { font-family: math; } .fangsong { font-family: fangsong; } <
div class="serif"> this is an example of a serif font.
... </
div> <
div class="sansserif"> this is an example of a sans-serif font.
... </
div> <
div class="monospace"> this is an example of a monospace font.
...And 6 more matches
<input type="file"> - HTML: Hypertext Markup Language
for example, a file picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <
div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <
div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; } this produces a similar-looking output to the previous example: note: you can find this example on github too — see the source code, and al...
... first of all, let's look at the html: <form method="post" enctype="multipart/form-data"> <
div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </
div> <
div class="preview"> <p>no files currently selected for upload</p> </
div> <
div> <button>submit</button> </
div> </form> html { font-family: sans-serif; } form { width: 580px; background: #cc...
...And 6 more matches
Index - Archive of obsolete content
mozilla's ui is
divided into three layers: the structure, the style, and the behavior.
... 749 <statusbarpanel> deprecated, xul, xul elements, xul reference an in
dividual element of a statusbar.
...assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of
div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview).
...And 5 more matches
Notes on HTML Reflow - Archive of obsolete content
for example, a <
div> with a constrained width (e.g., set via the css width property) would note this in the reflow state object before flowing its children.
... dirty, when a container frame has consolidated several in
dividual incremental reflows that have been targeted at its child frames.
...for example, the dimensions of each child frame of an unconstrained <
div> would be passed back to the <
div>'s frame via the nshtmlreflowmetrics object.
...And 5 more matches
Trees - Archive of obsolete content
a tree also allows the user to rearrange, resize and hide in
dividual columns.
...this contrasts with the listbox, where in
dividual listitem and listcell tags are used to specify the rows in the listbox.
... since the entire body of the tree is a single widget, you can't change the style of in
dividual rows or cells in the normal way.
...And 5 more matches
Using Spacers - Archive of obsolete content
we'll talk more about this in the next section but it essentially allows you to
divide a window into a series of boxes that hold elements.
...if you look closely enough, you should notice that the change in size has been
divided up equally between the spacer and the button.
...instead, it specifies how empty space it
divided among the children of a container box.
...And 5 more matches
Getting started with HTML - Learn web development
playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text.
... </textarea> <
div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </
div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea...
... playable code2 <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> <p>a link to my favorite website.</p> </textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <...
...And 5 more matches
Image gallery - Learn web development
the html body looks like this: <h1>image gallery example</h1> <
div class="full-img"> <img class="displayed-img" src="images/pic1.jpg"> <
div class="overlay"></
div> <button class="dark">darken</button> </
div> <
div class="thumb-bar"> </
div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <
div> — the <img> in which the full-sized image is displayed, ...
...an empty <
div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
... it sets the width of any images inside the thumb-bar <
div> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.
...And 5 more matches
Basic math in JavaScript — numbers and operators - Learn web development
some of us like math, some of us have hated math ever since we had to learn multiplication tables and long
division in school, and some of us sit somewhere in between the two.
... 3 * 7 /
division
divides the left number by the right.
... 10 / 5 % remainder (sometimes called modulo) returns the remainder left over after you've
divided the left number into a number of integer portions equal to the right number.
...And 5 more matches
Componentizing our React app - Learn web development
go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <
div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </
div> <
div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__dang...
...er"> delete <span classname="visually-hidden">eat</span> </button> </
div> </li> ); } note: components must always return something.
... putting all that together, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <
div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </
div> <
div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classn...
...And 5 more matches
Creating localizable web applications
"</a> »", $locale_conf->url('/demo_create_4'));?> <
div class="tut_left"><?printf("<b>« <a href=\"%s\">" .
..."</a></b>", $locale_conf->url('/demo_create'));?></
div> <
div class="tut_right"><?printf("<b><a href=\"%s\">" .
..."</a> »</b>", $locale_conf->url('/demo_create_3'));?></
div> using « and » should be ok here for rtl languages (they are flipped correctly if there are no latin characters next to them, which there aren't any), so let's leave it as it is.
...And 5 more matches
Element.getClientRects() - Web APIs
html example 1: this html creates three paragraphs with a <span> inside, each embedded in a <
div> block.
...note that the p has onlyone border box, while the span has multiple border boxes.</p> <
div> <strong>original</strong> <p> <span>paragraph that spans multiple lines</span> </p> </
div> <
div> <strong>p's rect</strong> <p class="withclientrectsoverlay"> <span>paragraph that spans multiple lines</span> </p> </
div> <
div> <strong>span's rect</strong> <p> <span class="withclientrectsoverlay">paragraph that spans multiple lines</span> </p> </
div> example 2: this html creates three ordered lists.
... <h3>a list</h3> <p>note that the border box doesn't include the number, so neither do the client rects.</p> <
div> <strong>original</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </
div> <
div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </
div> <
div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </
div> example 3: this html creates two tables with captions.
...And 5 more matches
ARIA annotations - Accessibility
for example: <p id="description-id">an extended text description of some kind...</p> <
div aria-describedby="description-id"> <!-- some kind of ui feature that needs an accessible description --> </
div> aria-details is appropriate when linking to descriptions or annotations that are a bit more complex — rather than a simple text string, it might contain multiple bits of semantic information: <
div id="detail-id"> <h2>a heading</h2> <p>an extended text description of some kind...
...…</p> <p><time datetime="...">a timestamp</time></p> </
div> <
div aria-details="detail-id"> <!-- some kind of ui feature that needs an accessible description --> </
div> this difference really becomes apparent when you get to how the content is actually interpreted in the accessibility layer, and read out by screenreaders.
...</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 some more interesting styling of your own, for example: ins, [role="insertion"] { color: #0c0; text-decoration: underline; } del, [role="delet...
...And 5 more matches
ARIA: gridcell role - Accessibility
<
div role="gridcell">potato</
div> <
div role="gridcell">cabbage</
div> <
div role="gridcell">onion</
div> elements that have role="gridcell" applied to them must be the child of an element with a role of row.
... <
div role="row"> <
div role="gridcell">jane</
div> <
div role="gridcell">smith</
div> <
div role="gridcell">496-619-5098</
div> … </
div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <
div role="grid" aria-colcount="6"> <
div role="rowgroup"> <
div role="row"> <
div role="columnheader" aria-colindex="1">first name</
div> <
div role="columnheader" aria-colindex="2">last name</
div> <
div role="columnheader" aria-colindex="5">city</
div> <
div role="columnheader" aria-colindex="6">zip</
div> </
div> </
div> <
div role="rowgroup"> <
div role="row"> <d...
...And 5 more matches
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <
div id="container"> <
div class="group section"> <
div id="preview" class="col span_12"> <
div id="subject"> <
div id="top-left" class="radius-container" data-x="left" data-y="top"> </
div> <
div id="top-right" class="radius-container" data-x="right" data-y="top"> </
div> <
div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </
div> <
div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </
div> <
div id="radiu...
...s-ui-sliders"> <
div id="tlr" class="ui-input-slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></
div> <
div id="tlw" class="ui-input-slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></
div> <
div id="tlh" class="ui-input-slider" data-topic="top-left-h" data-unit=" px" data-sensivity="2"></
div> <
div id="trr" class="ui-input-slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></
div> <
div id="trw" class="ui-input-slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></
div> <
div id="trh" class="...
...ui-input-slider" data-topic="top-right-h" data-unit=" px" data-sensivity="2"></
div> <
div id="brr" class="ui-input-slider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></
div> <
div id="brw" class="ui-input-slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></
div> <
div id="brh" class="ui-input-slider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></
div> <
div id="blr" class="ui-input-slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></
div> <
div id="blw" class="ui-input-slider" data-topic="bottom-left-w"...
...And 5 more matches
Specificity - CSS: Cascading Style Sheets
by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <
div id="test"> <span>text</span> </
div>
div#test span { color: green; }
div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific.
... #myid#myid span { color: yellow; } .myclass.myclass span { color: orange; } how !important can be used: a) overriding inline styles your global css file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on in
dividual elements.
... <
div class="foo" style="color: red;">what color am i?</
div> .foo[style*="color: red"] { color: firebrick !important; } many javascript frameworks and libraries add inline styles.
...And 5 more matches
perspective-origin - CSS: Cascading Style Sheets
html <section> <figure> <figcaption><code>perspective-origin: top left;</code></figcaption> <
div class="container"> <
div class="cube potl"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </figure> <figure> <figcaption><code>perspective-origin: top;</code></figcaption> <
div class="con...
...tainer"> <
div class="cube potm"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </figure> <figure> <figcaption><code>perspective-origin: top right;</code></figcaption> <
div class="container"> <
div class="cube potr"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </figure> <figure> <figcaption><code>perspective-origin: left;</code></figcaption> <
div class="container"> <
div class="cub...
...e poml"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </figure> <figure> <figcaption><code>perspective-origin: 50% 50%;</code></figcaption> <
div class="container"> <
div class="cube pomm"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </figure> <figure> <figcaption><code>perspective-origin: right;</code></figcaption> <
div class="container"> <
div class="cube pomr"> <
div class="fa...
...And 5 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
let's look at an example; here we've set minimum and maximum date/time values, and also made the field required: <form> <
div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th 4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30" required> <span class="validity"></span> </
div> <
div> <input type="submit" value="book party!"> </
div> </form> if you try to submit ...
...
div { margin-bottom: 10px; display: flex; align-items: center; } label { display: inline-block; width: 300px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format.
...for example, try viewing the following demo in a non-supporting browser: <form> <
div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th 4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}t[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </
div> <
div> <input type="submit" value...
...And 5 more matches
<input type="month"> - HTML: Hypertext Markup Language
let's look at an example; here we've set minimum and maximum dates, and also made the field required: <form> <
div> <label for="month">what month would you like to visit us (summer months only, please)?</label> <input id="month" type="month" name="month" min="2017-06" max="2017-09" required> <span class="validity"></span> </
div> <
div> <input type="submit" value="submit form"> </
div> </form> if you try to submit the form without both the month and year specified (or with a d...
...
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; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the ...
...for example, try viewing the following demo in a browser that doesn't support month inputs: <form> <
div> <label for="month">what month would you like to visit us?
...And 5 more matches
Microformats - HTML: Hypertext Markup Language
-email email address u-photo a photo of the person or organization u-url home page or other url representing the person or organization u-uid universally unique identifier, preferably canonical url p-street-address street number + name p-locality city/town/village p-country-name country name nested h-card example <
div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" >mitchell baker</a> (<a class="p-org h-card" href="http://mozilla.org/" >mozilla foundation</a>) </
div> parsed json: { "items": [{ "type": ["h-card"], "properties": { "name": ["mitchell baker"], "url": ["http://blog.lizardwrangler.com/"], "org": [{ "value": "mozilla foundation"...
...developer</a> on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> june 2013</time></p> <p class="p-summary">in which i extoll the virtues of using microformats.</p> <
div class="e-content"> <p>blah blah blah</p> </
div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embedded h-card dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <di...
...e-content">hey thanks for making this microformats resource</p> <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a> published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published" datetime="2019-05-31t14:19:09+0000">31 may 2019</time></a></p> </
div> { "items": [ { "type": [ "h-entry" ], "properties": { "in-reply-to": [ "/docs/web/html/microformats" ], "name": [ "hey thanks for making this microformats resource" ], "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], "published": [ "2019-05-31t14:19:09+0000" ], "content"...
...And 5 more matches
Building accessible custom components in XUL - Archive of obsolete content
assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of
div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview).
...note: the row and column headers are denoted by description elements, and in
dividual cells are denoted by label elements.
...the final product looks like this: <caption>xul spreadsheet with 7 rows and 5 columns</caption> although this has the visual layout of a spreadsheet, assistive technologies will only see it as a collection of in
dividual, unrelated text labels.
...And 4 more matches
Practical positioning examples - Learn web development
let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <
div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...and now an ordered list: how exciting!</p> <ol> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> <li>aliquam ut porttitor urna.</li> <li>nulla facilisi</li> </ol> </article> </
div> </section> so here we've got a <section> element with a class of info-box, which contains a <ul> and a <
div>.
...the
div contains three <article> elements, which will make up the content panels that correspond to each tab.
...And 4 more matches
Making decisions in your code — conditionals - Learn web development
when used in conditions, the first two do the following: && — and; allows you to chain together two or more expressions so that all of them have to in
dividually evaluate to true for the whole expression to return true.
... || — or; allows you to chain together two or more expressions so that one or more of them have to in
dividually evaluate to true for the whole expression to return true.
... playable code <h2>live output</h2> <
div class="output" style="height: 500px;overflow: auto;"> <label for="month">select month: </label> <select id="month"> <option value="january">january</option> <option value="february">february</option> <option value="march">march</option> <option value="april">april</option> <option value="may">may</option> <option value="june">june</option> <option value="july">july...
...And 4 more matches
Client-side storage - Learn web development
note: there are limits to the amount of data you can store using client-side storage apis (possibly both per in
dividual api and cumulatively); the exact limit varies depending on the browser and possibly based on user settings.
...add the following lines to your javascript file: // create needed constants const remember
div = document.queryselector('.remember'); const forget
div = document.queryselector('.forget'); const form = document.queryselector('form'); const nameinput = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.
...we hope you have fun while you are here.'; // hide the 'remember' part of the form and show the 'forget' part forget
div.style.display = 'block'; remember
div.style.display = 'none'; } else { // if not, display generic greeting h1.textcontent = 'welcome to our website '; personalgreeting.textcontent = 'welcome to our website.
...And 4 more matches
Manipulating documents - Learn web development
open it and have a look — you'll see that we've got a <
div> element covering a small part of the screen, which has got a background tile applied to it.
... first of all, let's grab a reference to the
div, and then grab the width and height of the viewport (the inner window, where your document is displayed) and store them in variables — these two values are handily contained in the window.innerwidth and window.innerheight properties.
... add the following lines inside the existing <script> element: const
div = document.queryselector('
div'); let winwidth = window.innerwidth; let winheight = window.innerheight; next, we'll dynamically alter the width and height of the
div to equal that of the viewport.
...And 4 more matches
Working with Svelte stores - Learn web development
give it the following content: <script> import { alert } from '../stores.js' import { ondestroy } from 'svelte' let alertcontent = '' const unsubscribe = alert.subscribe(value => alertcontent = value) ondestroy(unsubscribe) </script> {#if alertcontent} <
div on:click={() => alertcontent = ''}> <p>{ alertcontent }</p> </
div> {/if} <style>
div { position: fixed; cursor: pointer; margin-right: 1.5rem; margin-left: 1.5rem; margin-top: 1rem; right: 0; display: flex; align-items: center; border-radius: 0.2rem; background-color: #565656; color: #fff; font-size: 0.875rem; font-weight: 700; padding: 0.5rem 1.4rem; font-size: 1...
....5rem; z-index: 100; opacity: 95%; }
div p { color: #fff; }
div svg { height: 1.6rem; fill: currentcolor; width: 1.4rem; margin-right: 0.5rem; } </style> let's walk through this piece of code in detail.
...update the <script> and markup sections of alert.svelte as follows: <script> import { alert } from '../stores.js' </script> {#if $alert} <
div on:click={() => $alert = ''}> <p>{ $alert }</p> </
div> {/if} check your app again and you'll see that this works just like before.
...And 4 more matches
Handling common accessibility problems - Learn web development
you might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible cms that generates buttons made with <
div>s), or you are using a complex control that does not have keyboard accessibility built in, like the html5 <video> element (amazingly, opera is the only browser that allows you to tab through the <video> element's default browser controls).
...take for example our fake-
div-buttons.html example (see source code).
... here we've given our fake <
div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0" (see webaim's tabindex article for more really useful details).
...And 4 more matches
Scroll-linked effects
below are a couple of examples of effects that would not work well with asynchronous scrolling, along with equivalent versions that would work well: example 1: sticky positioning here is an implementation of a sticky-positioning effect, where the "toolbar"
div will stick to the top of the screen as you scroll down.
... <body style="height: 5000px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + 'px'"> <
div id="toolbar" style="position: absolute; top: 100px; width: 100px; height: 20px; background-color: green"></
div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar"
div.
...therefore, with asynchronous scrolling, the event handler will be delayed relative to the user-visible scroll, and so the
div will not stay visually fixed as intended.
...And 4 more matches
sslfnc.html
ssl_cipherpolicyset sets policy flags for in
dividual cipher suites, one at a time.
... description the cipherprefsetdefault function enables or disables in
dividual cipher suites globally.
...to enable or disable cipher suites for an in
dividual socket, use ssl_cipherprefset.
...And 4 more matches
Using dynamic styling information - Web APIs
however, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or in
dividual elements), and that is described in further detail below.
... note also that, as with in
dividual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but merely the internal representation of the document.
...those interfaces contain members like insertrule, selectortext, and parentstylesheet for accessing and manipulating the in
dividual style rules that make up a css stylesheet.
...And 4 more matches
Using files from web applications - Web APIs
you can determine how many files the user selected by checking the value of the file list's length attribute: const numfiles = filelist.length; in
dividual file objects can be retrieved by simply accessing the list as an array: for (let i = 0, numfiles = filelist.length; i < numfiles; i++) { const file = filelist[i]; // ...
... example: showing file(s) size the following example shows a possible use of the size property: <!doctype html> <html> <head> <meta charset="utf-8"> <title>file(s) size</title> </head> <body> <form name="uploadform"> <
div> <input id="uploadinput" type="file" name="myfiles" multiple> selected files: <span id="filenum">0</span>; total size: <span id="filesize">0</span> </
div> <
div><input type="submit" value="send file"></
div> </form> <script> function updatesize() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.length; for (let nfileid = 0; nfileid < nf...
... function handlefiles(files) { for (let i = 0; i < files.length; i++) { const file = files[i]; if (!file.type.startswith('image/')){ continue } const img = document.createelement("img"); img.classlist.add("obj"); img.file = file; preview.appendchild(img); // assuming that "preview" is the
div output where the content will be displayed.
...And 4 more matches
Using IndexedDB - Web APIs
in our case, we've asked for an object store named "customers" and defined a keypath, which is the property that makes an in
dividual object in the store unique.
...if you're doing lots of database operations, then tracking the transaction rather than in
dividual requests can certainly aid your sanity.
... using an index storing customer data using the ssn as a key is logical since the ssn uniquely identifies an in
dividual.
...And 4 more matches
Using the aria-labelledby attribute - Accessibility
examples example 1: multiple labels in the example below, each input field is labelled by both its own in
dividual label and by the label for the group: <
div id="mybillingid">billing</
div> <
div> <
div id="mynameid">name</
div> <input type="text" aria-labelledby="mybillingid mynameid"/> </
div> <
div> <
div id="myaddressid">address</
div> <input type="text" aria-labelledby="mybillingid myaddressid"/> </
div> example 2: associating headings with regions in the example below, header elements a...
... <
div role="main" aria-labelledby="foo"> <h1 id="foo">wild fires spread across the san diego hills</h1> strong winds expand fires ignited by high temperatures ...
... </
div> example 3: radio groups in the example below, the container of a radiogroup is associated with its label using the aria-labelledby attribute: <
div id="radio_label">my radio label</
div> <ul role="radiogroup" aria-labelledby="radio_label"> <li role="radio">item #1</li> <li role="radio">item #2</li> <li role="radio">item #3</li> </ul> example 4: dialog label in the example below, the header element that labels the dialog is referred to by the aria-labelledby attribute: <
div role="dialog" aria-labelledby="dialogheader"> <h2 id="dialogheader">choose a file</h2> ...
...And 4 more matches
ARIA: figure role - Accessibility
<
div role="figure" aria-labelledby="caption"> <img src="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </
div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
... this is wrapped by a <
div> element that identifies the content as a figure using role="figure".
...you could add an id to an element containing content that describes the figure, and then reference that id inside an appropriate attribute on the figure to associate the figure with the label: <
div role="figure" aria-labelledby="figure-1"> ...
...And 4 more matches
ARIA: img role - Accessibility
<
div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </
div> description any set of content that should be consumed as a single image (which could include images, video, audio, code snippets, emojis, or other content) can be identified using role="img".
... you shouldn't count on the alt text of in
dividual elements images for conveying context to assistive technologies; most screenreaders will consider the element with role="img" set on it to be to be like a black box, and not access the in
dividual elements inside it.
... therefore, provide a comprehensive overall descriptive alt text for image, either in the surrounding text, or by using an aria-label attribute, with optional alt attributes for search engines or sighted users to be written to the page should an image fail: <
div role="img" aria-label="description of the overall image"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </
div> if you wish to add a caption or label to your image that is visible on the page, you can do using: aria-labelledby when the text is a concise label.
...And 4 more matches
An overview of accessible web applications and widgets - Accessibility
since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <
div> and <span>.
...--> <ol> <li id="ch1tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab"> <a href="#quizpanel">quiz</a> </li> </ol> <
div> <
div id="ch1panel">chapter 1 content goes here</
div> <
div id="ch2panel">chapter 2 content goes here</
div> <
div id="quizpanel">quiz content goes here</
div> </
div> example 2: how the tabs widget might be styled visually.
...--> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <
div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels.
...And 4 more matches
Attribute selectors - CSS: Cascading Style Sheets
ref^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all
divs with a `lang` attribute are bold.
... */
div[lang] { font-weight: bold; } /* all
divs without a `lang` attribute are italicized.
... */
div:not([lang]) { font-style: italic; } /* all
divs in us english are blue.
...And 4 more matches
Stacking context example 2 - CSS: Cascading Style Sheets
there are the same four
divs of the previous example, but now z-index properties are assigned on both levels of the hierarchy.
... you can see that
div #2 (z-index: 2) is above
div #3 (z-index: 1), because they both belong to the same stacking context (the root one), so z-index values rule how elements are stacked.
... what can be considered strange is that
div #2 (z-index: 2) is above
div #4 (z-index: 10), despite their z-index values.
...And 4 more matches
Stacking context example 3 - CSS: Cascading Style Sheets
let's take as an example a three-level hierarchical menu made from several positioned
divs.
... second-level and third-level
divs appear when hovering or clicking on their parents.
... level #1 this problem can be avoided by removing overlapping between different level menus, or by using in
dividual (and different) z-index values assigned through the id selector instead of class selector, or by flattening the html hierarchy.
...And 4 more matches
<color> - CSS: Cascading Style Sheets
currentcolor example html <
div style="color:blue; border: 1px dashed currentcolor;"> the color of this text is blue.
... <
div style="background:currentcolor; height:9px;"></
div> this block is surrounded by a blue border.
... </
div> result rgb colors the rgb color model defines a given color according to its red, green, and blue components.
...And 4 more matches
repeat() - CSS: Cascading Style Sheets
for the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., 1px), to avoid
division by zero.
... examples specifying grid columns using repeat() html <
div id="container"> <
div> this item is 50 pixels wide.
... </
div> <
div> item with flexible width.
...And 4 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
r; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128px; flex-flow: row nowrap; } .container.y { width: 256px; height: 256px; flex-flow: column nowrap; } /* definite scroll snap */ .mandatory-scroll-snapping >
div { scroll-snap-stop: always; } .proximity-scroll-snapping >
div { scroll-snap-stop: normal; } /* scroll-snap */ .x.mandatory-scroll-snapping { scroll-snap-type: x mandatory; } .y.mandatory-scroll-snapping { scroll-snap-type: y mandatory; } .x.proximity-scroll-snapping { scroll-snap-type: x proximity; } .y.proximity-scroll-snapping { scroll-snap-type: y proximity; } .container >
div...
... { text-align: center; scroll-snap-align: center; flex: none; } .x.container >
div { line-height: 128px; font-size: 64px; width: 100%; height: 128px; } .y.container >
div { line-height: 256px; font-size: 128px; width: 256px; height: 256px; } /* 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; } html <
div class="container x mandatory-scroll-snapping" dir="ltr"> <
div>x mand.
... ltr </
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> <
div>5</
div> </
div> <
div class="container x proximity-scroll-snapping" dir="ltr"> <
div>x proximity ltr</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> <
div>5</
div> </
div> <
div class="container y mandatory-scroll-snapping" dir="ltr"> <
div>y mand.
...And 4 more matches
HTML attribute reference - HTML: Hypertext Markup Language
note: in some instances, such as <
div>, this is a legacy attribute, in which case the css height property should be used instead.
... note: for all other instances, such as <
div>, this is a legacy attribute, in which case the css width property should be used instead.
...the following examples are valid ways to mark up a boolean attribute: <
div itemscope> this is valid html but invalid xml.
...And 4 more matches
<input type="search"> - HTML: Hypertext Markup Language
basic example <form> <
div> <input type="search" id="mysearch" name="q"> <button>search</button> </
div> </form> this renders like so: q is the most common name given to search inputs, although it's not mandatory.
...look at the following example: <form> <
div> <input type="search" id="mysearch" name="q" placeholder="search the site..."> <button>search</button> </
div> </form> you can see how the placeholder is rendered below: search form labels and accessibility one problem with search forms is their accessibility; a common design practice is not to provide a label for the search field (although there might be a magnifying glass ico...
... let's have a look at an example: <form role="search"> <
div> <input type="search" id="mysearch" name="q" placeholder="search the site..." aria-label="search through site content"> <button>search</button> </
div> </form> you can see how this is rendered below: there is no visual difference from the previous example, but screenreader users have way more information available to them.
...And 4 more matches
<input type="text"> - HTML: Hypertext Markup Language
basic example <form> <
div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name"> </
div> <
div> <button>submit</button> </
div> </form> this renders like so: when submitted, the data name/value pair sent to the server will be uname=chris (if "chris" was entered as the input value before submission).
...look at the following example: <form> <
div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word"> </
div> <
div> <button>submit</button> </
div> </form> you can see how the placeholder is rendered below: the placeholder is typically rendered in a lighter color than the element's foreground color, and automatically vanishes when the user begins to enter text into the field (o...
...in this example, for instance, the input is 30 characters wide: <form> <
div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" placeholder="lower case, all one word" size="30"> </
div> <
div> <button>submit</button> </
div> </form> validation <input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary stri...
...And 4 more matches
<input type="time"> - 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; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; ...
... let's look at an example; here we've set minimum and maximum times, and also made the field required: <form> <
div> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required> <span class="validity"></span> </
div> <
div> <input type="submit" value="submit form"> </
div> </form> if you try to submit the form with an incomplete time (or with a time outside the set...
...for example, try viewing the following demo in a browser that doesn't support time inputs: <form> <
div> <label for="appt-time">choose an appointment time (opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required pattern="[0-9]{2}:[0-9]{2}"> <span class="validity"></span> </
div> <
div> <input type="submit" value="submit form"> </
div> </form> if you try submitting it, you'll see that no...
...And 4 more matches
Expressions and operators - JavaScript
also compound assignment operators that are shorthand for the operations listed in the following table: compound assignment operators name shorthand operator meaning assignment x = y x = y addition assignment x += y x = x + y subtraction assignment x -= y x = x - y multiplication assignment x *= y x = x * y
division assignment x /= y x = x / y remainder assignment x %= y x = x % y exponentiation assignment x **= y x = x ** y left shift assignment x <<= y x = x << y right shift assignment x >>= y x = x >> y unsigned right shift assignment x >>>= y x = x >>> y bitwise and assignment x &= y x = x & y bi...
...the standard arithmetic operators are addition (+), subtraction (-), multiplication (*), and
division (/).
... these operators work as they do in most other programming languages when used with floating point numbers (in particular, note that
division by zero produces infinity).
...And 4 more matches
Digital audio concepts - Web media technologies
the granularity of an audio wave in the real world, then, is that of an in
dividual molecule of the medium through which the sound wave is traveling.
...there are several formats used for the in
dividual samples within an audio file.
...the size of an in
dividual sample is called the sample size.
...And 4 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
so the following piece of html defines an iframe element which is not visible to the user: <
div style="visibility:hidden; position:absolute; top:-1000px; left:-1000px"> <iframe id="bridgeframe" src=""></iframe> </
div> the javascript code located in the data loader component will be interacting with this iframe element, requesting data from the server.
...note the following piece of code: function iframecallback(doc) { /* copies the data in the iframe to the main page */ mydata = doc.getelementbyid("mydata"); ticker
div.innerhtml = mydata.innerhtml; } the callback is called with the parameter doc, which is a reference to the iframe's document).
... the code locates element with id mydata then copies the content of mydata (mydata.innerhtml) into the ticker
div element (
div element that is the container of elements into the ticker).
...And 3 more matches
Index - Archive of obsolete content
2 <statusbarpanel> deprecated, xul, xul elements, xul reference an in
dividual element of a statusbar.
...assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of
div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview).
...child column elements define the in
dividual columns to appear in the grid.
...And 3 more matches
Adding HTML Elements - Archive of obsolete content
you can also add labels to controls either by using the html label element, or you can simply put the text inside another html block element (such as p or
div) as in the example below.
... text outside of html blocks example 3 : source view <html:
div> would you like to save the following documents?
... <html:hr/> </html:
div> expense report 1 what i did last summer <button id="yes" label="yes"/> <button id="no" label="no"/> as can be seen in the image, the text inside the
div tag was displayed but the other text (expense report 1 and what i did last summer) was not.
...And 3 more matches
Advanced text formatting - Learn web development
playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...a light brown color.</textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); const code = textarea.value; const userentry = textarea.value; function updatecode() { output.innerhtml = textar...
... playable code 2 <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> <p>hello and welcome to my motivation page.
...And 3 more matches
Build your own function - Learn web development
finally, add the following code inside the curly braces: const html = document.queryselector('html'); const panel = document.createelement('
div'); panel.setattribute('class', 'msgbox'); html.appendchild(panel); const msg = document.createelement('p'); msg.textcontent = 'this is a message box'; panel.appendchild(msg); const closebtn = document.createelement('button'); closebtn.textcontent = 'x'; panel.appendchild(closebtn); closebtn.onclick = function() { panel.parentnode.removechild(panel); } this is quite a lot of code to go th...
... the first line uses a dom api function called document.queryselector() to select the <html> element and store a reference to it in a constant called html, so we can do things to it later on: const html = document.queryselector('html'); the next section uses another dom api function called document.createelement() to create a <
div> element and store a reference to it in a constant called panel.
...we specify the panel <
div> as the child we want to append inside the <html> element.
...And 3 more matches
Looping code - Learn web development
for each iteration, create a new paragraph and append it to the output <
div>, which we've selected using const output = document.queryselector('.output');.
... output.appendchild(para); — appends the paragraph to the output <
div>.
... active learning <h2>live output</h2> <
div class="output" style="height: 410px;overflow: auto;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p');...
...And 3 more matches
Arrays - Learn web development
array objects can be stored in variables and dealt with in much the same way as any other type of value, the difference being that we can access each value inside the list in
dividually, and do super useful and efficient things with the list, like loop through it and do the same thing to every value.
... accessing and modifying array items you can then access in
dividual items in the array using bracket notation, in the same way that you accessed the letters in a string.
... playable code <h2>live output</h2> <
div class="output" style="min-height: 150px;"> <ul> </ul> <p></p> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0;...
...And 3 more matches
Useful string methods - Learn web development
playable code <h2>live output</h2> <
div class="output" style="min-height: 125px;"> <ul> </ul> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 290px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let greetings = ['happy birthday!', 'me...
...or christmas', 'get well soon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const ...
... playable code 2 <h2>live output</h2> <
div class="output" style="min-height: 125px;"> <ul> </ul> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 250px; width: 95%"> const list = document.queryselector('.output ul'); list.innerhtml = ''; let cities = ['london', 'manchester', 'birmingham', 'liv...
...And 3 more matches
Beginning our React todo list - Learn web development
this article will walk you through putting the basic app component structure and styling in place, ready for in
dividual component definition and interactivity, which we'll add later.
... the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <
div classname="todoapp stack-large"> <h1>todomatic</h1> <form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <
div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname=...
...And 3 more matches
Starting our Svelte Todo list app - Learn web development
copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <
div class="todoapp stack-large"> <!-- newtodo --> <form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <
div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</spa...
...n> <span class="visually-hidden">tasks</span> </button> </
div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <
div class="stack-small"> <form class="stack-small"> <
div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </
div> <
div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel <span class="visually-hidden">re...
...And 3 more matches
Implementing feature detection - Learn web development
give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('
div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and creating a <
div> element as part of our test.
...if you look at the latter, you'll see a couple of @supports blocks, for example: @supports (flex-flow: row) and (flex: 1) { main { display: flex; } main
div { padding-right: 4%; flex: 1; } main
div:last-child { padding-right: 0; } } this at-rule block applies the css rule within only if the current browser supports both the flex-flow: row and flex: 1 declarations.
... see
dive into html5 video formats detection test.
...And 3 more matches
Examples of web and XML development using the DOM - Web APIs
1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <
div id="output"> </
div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="...
...in this case, you are manipulating the in
dividual styles directly.
...you can access these stylesheets and their rules in
dividually using the stylesheet, style, and cssrule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console.
...And 3 more matches
Element.querySelectorAll() - Web APIs
examples dataset selector & attribute selectors <section class="box" id="sect1"> <
div class="funnel-chart-percent1">10.900%</
div> <
div class="funnel-chart-percent2">3700.00%</
div> <
div class="funnel-chart-percent3">0.00%</
div> </section> // dataset selectors const refs = [...document.queryselectorall(`[data-name*="funnel-chart-percent"]`)]; // attribute selectors // const refs = [...document.queryselectorall(`[class*="funnel-chart-percent"]`)]; // const refs = [...document.
...[class^="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class$="funnel-chart-percent"]`)]; // const refs = [...document.queryselectorall(`[class~="funnel-chart-percent"]`)]; obtaining a list of matches to obtain a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <
div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("
div.note,
div.alert"); here, we get a list of the document's <p> elements whose immediate parent element is a
div with the class "highlighted" and which are located inside a container whose id is "test".
... var container = document.queryselector("#test"); var matches = container.queryselectorall("
div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...And 3 more matches
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
it takes as input the rtcpeerconnection being tested, calls getstats() to get a new rtcstatsreport with current statistics, then computes the results it's looking for, outputting those results as appropriate to the user by appending appropriate html to the contents of the <
div> element whose class is stats-box.
...ate = framesdecoded / elapsedtime; let timestring = ""; if (!isnan(elapsedtime)) { timestring = ` representing ${elapsedtime}s`; } let framestring = ""; if (!isnan(framesdecoded)) { framestring = `decoded ${framesdecoded} frames for a frame rate of ${framerate.tofixed(2)} fps.<br>`; } let logentry = `<
div class="stats-entry"><h2>report id: ${endremoteoutbound.id}</h2>` + `remote peer sent ${packetssent} packets ${timestring}.<br>` + `${framestring}` + `data size: ${bytessent} bytes.</
div>`; statsbox.innerhtml += logentry; } else { statsbox.innerhtml += `<
div class="stats-error">unable to find ini...
...tial statistics for id ${endremoteoutbound.id}.</
div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection method getstats() to get the latest statistics report for the connection and storing it in endreport, this is an rtcstatsreport object, which maps strings taken from the rtcstatstype enumerated type to objects of the corresponding rtcstats-based type.
...And 3 more matches
Using the Web Speech API - Web APIs
we simply have a title, instructions paragraph, and a
div into which we output diagnostic messages.
... <h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <
div> <p class="output"><em>...diagnostic messages</em></p> </
div> the css provides a very simple responsive styling so that it looks ok across devices.
...but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the output <
div> and the html element (so we can output diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start.
...And 3 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
} function stoptextcolor() { clearinterval(nintervid); } </script> </head> <body onload="changecolor();"> <
div id="my_box"> <p>hello world</p> </
div> <button onclick="stoptextcolor();">stop</button> </body> </html> example 3: typewriter simulation the following example simulates typewriter by first clearing and then slowly typing content into the nodelist that matches a specified group of selectors.
...ext-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span> ]</p> <
div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...</
div> <h1>javascript typewriter</h1> <
div id="article"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...And 3 more matches
ARIA live regions - Accessibility
regions are identified just like an id in a
div, and multiple regions can be associated with a control using a space, e.g.
...> <label for="planetsselect">planet:</label> <select id="planetsselect" aria-controls="planetinfo"> <option value="">select a planet…</option> <option value="mercury">mercury</option> <option value="venus">venus</option> <option value="earth">earth</option> <option value="mars">mars</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <
div role="region" id="planetinfo" aria-live="polite"> <h2 id="planettitle">no planet selected</h2> <p id="planetdescription">select a planet to view its description</p> </
div> <p><small>information courtesy <a href="https://en.wikipedia.org/wiki/solar_system#inner_solar_system">wikipedia</a></small></p> javascript const planets_info = { mercury: { title: 'mercury', description: 'mer...
... advanced live regions (tbd: more granular information on the support of the in
dividual attributes with combinations of os/browser/at).
...And 3 more matches
ARIA: table role - Accessibility
<
div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <
div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</
div> <
div role="rowgroup"> <
div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> </
div> </
div> <
div role="rowgroup"> <
div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </
div> <
div role="ro...
...w" aria-rowindex="16"> <span role="cell">header</span> <span role="cell">h6</span> </
div> <
div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </
div> <
div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </
div> </
div> </
div> description an element with role="table" is a static tabular structure with rows containing cells.
... the cells are not focusable or selectable, though widgets within in
dividual cells of the table can be interactive.
...And 3 more matches
Introduction to formatting contexts - CSS: Cascading Style Sheets
in the example below, we have a floated element inside a <
div> with a border applied.
... the content of that <
div> has floated alongside the floated element.
... as the content of the float is taller than the content alongside it, the border of the <
div> now runs through the float.
...And 3 more matches
offset-anchor - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting various offset-anchor values in the following example, we have three <
div> elements nested in <section> elements.
... each <
div> is given the same offset-path (a horizontal line 200 pixels long) and animated to move along it.
... each <section> has been styled with a linear gradient to give it a horizontal line running through its center, to give you a visual display of where the <
div>'s offset paths are running.
...And 3 more matches
HTTP Messages - HTTP
in http/2, the once human-readable message is now
divided up into http frames, providing optimization and performance improvements.
...they can be
divided in several groups: general headers, like via, apply to the message as a whole.
... bodies can be broadly
divided into two categories: single-resource bodies, consisting of one single file, defined by the two headers: content-type and content-length.
...And 3 more matches
Operator precedence - JavaScript
code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the
division operator (/) console.log(echo("left", 6) / echo("right", 2)); evaluating the left side evaluating the right side 3 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("right", 3)); evaluating the left side evaluating the r...
... code output function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the
division operator (/) console.log(echo("left", 6) / echo("middle", 2) / echo("right", 3)); evaluating the left side evaluating the middle side evaluating the right side 1 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the exponentiation operator (**) console.log(echo("left", 2) ** echo("middle", 3) ** echo(...
...{ console.log("evaluating the " + name + " side"); return num; } // notice the parentheses around the left and middle exponentiation console.log((echo("left", 2) ** echo("middle", 3)) ** echo("right", 2)); evaluating the left side evaluating the middle side evaluating the right side 64 looking at the code snippets above, 6 / 3 / 2 is the same as (6 / 3) / 2 because
division is left-associative.
...And 3 more matches
SVG documentation index - SVG: Scalable Vector Graphics
after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the
divisor attribute, the bias attribute is added to each component.
... 60
divisor filters, svg, svg attribute the
divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is
divided to yield the destination color value.
... 177 requiredfeatures svg, svg attribute the requiredfeatures attribute takes a list of feature strings, with the in
dividual strings separated by white space.
...And 3 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> </popup> <popupset id="mainpopupset"> <tooltip id="myhtmltip"> <html:
div id="myhtmltip
div" type="content"/> </tooltip> </popupset> </overlay> insert your version of the following into the javascript overlay.
...ip1").setattribute("tooltiphtml", "<font color='red'>red foo</font>") document.getelementbyid("htmltip2").setattribute("tooltiphtml", "<font color='green'>green foo</font>") }, onmousetooltip: function(event) { //get the html tooltip string assigned to the element that the mouse is over (which will soon launch the tooltip) var txt = event.target.getattribute("tooltiphtml"); // get the html
div element that is inside the custom xul tooltip var
div = document.getelementbyid("myhtmltip
div"); //clear the html
div element of any prior shown custom html while(
div.firstchild)
div.removechild(
div.firstchild); //safely convert html string to a simple dom object, stripping it of javascript and more complex tags var injecthtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservic...
...e(components.interfaces.nsiscriptableunescapehtml) .parsefragment(txt, false, null,
div); //attach the dom object to the html
div element
div.appendchild(injecthtml); } } window.addeventlistener('load', htmltip.onload, false); in the xul overlay, xmlns:html is used to enable html tags to be used inside the xul.
...And 2 more matches
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
[html:]
div) or an array of elements in json notation function tag(elemnameorarray, elemattr) { // array of elements?
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["
div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribu...
...the demo of this is seen at jsfiddle :: jsontodom example var json = ['html:
div', {style:'background-color:springgreen'}, ['html:form', {id:'myfirstform'}, ['html:input', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:
div', {}, 'sub
div with textcontent...
...And 2 more matches
jspage - Archive of obsolete content
m=c(this.uid);delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("
div");var a={table:[1,"<table>","</table>"],select:[1,"<select>","</select>"],tbody:[2,"<table><tbody>","</tbody></table>"],tr:[3,"<table><tbody><tr>","</tr></tbody></table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.flatten(arguments).join("");var f=browser.engine.trident&&a[this.get("tag")];if(f){var g=c;g.innerhtml=f[1]+e+f[2]; for(var d=f[0];d--;){g=g.firstchild;}this.empty().a...
...dopt(g.childnodes);}else{this.innerhtml=e;}}};b.erase=b.set;return b;})();if(browser.engine.webkit&&browser.engine.version<420){element.properties.text={get:function(){if(this.innertext){return this.innertext; }var a=this.ownerdocument.newelement("
div",{html:this.innerhtml}).inject(this.ownerdocument.body);var b=a.innertext;a.destroy();return b;}};}element.properties.events={set:function(a){this.addevents(a); }};native.implement([element,window,document],{addevent:function(e,g){var h=this.retrieve("events",{});h[e]=h[e]||{keys:[],values:[]};if(h[e].keys.contains(g)){return this; }h[e].keys.push(g);var f=e,a=element.events.get(e),c=g,i=this;if(a){if(a.onadd){a.onadd.call(this,g);}if(a.condition){c=function(j){if(a.condition.call(this,j)){return g.call(this,j); }return true;};}f=a.base||f;}var ...
...},selected:function(){return this.selected;},enabled:function(){return(this.disabled===false); }});element.events.domready={onadd:function(a){if(browser.loaded){a.call(this);}}};(function(){var b=function(){if(browser.loaded){return;}browser.loaded=true; window.fireevent("domready");document.fireevent("domready");};window.addevent("load",b);if(browser.engine.trident){var a=document.createelement("
div"); (function(){($try(function(){a.doscroll();return document.id(a).inject(document.body).set("html","temp").dispose();}))?b():arguments.callee.delay(50);})(); }else{if(browser.engine.webkit&&browser.engine.version<525){(function(){(["loaded","complete"].contains(document.readystate))?b():arguments.callee.delay(50); })();}else{document.addevent("domcontentloaded",b);}}})();var json=new hash(this.j...
...And 2 more matches
Introduction to XUL - Archive of obsolete content
mozilla applications will be built of "small" components like dialog buttons and mail inbox folders, which we collectively term "widgets." within a widget, drawing and user interactions are completely under control of the in
dividual widget, and set when the widget was built.
...correct namespace usage dictates that the namespace be used only for the tag, not in in
dividual attributes.
...see in
dividual widget documentation referenced at the index for a list of attributes accepting javascript values.
...And 2 more matches
Sizing items in CSS - Learn web development
an empty <
div> however, has no size of its own.
... if you add a <
div> to your html with no content, then give it a border as we did with the image, you will see a line on the page.
...therefore the size of this <
div> in the block dimension comes from the size of the content.
...And 2 more matches
The box model - Learn web development
these shorthands also have equivalent longhand properties, which allow control over the different sides of the box in
dividually.
... we can control all margins of an element at once using the margin property, or each side in
dividually using the equivalent longhand properties: margin-top margin-right margin-bottom margin-left in the example below, try changing the margin values to see how the box is pushed around due to the margin creating or removing space (if it is a negative margin) between this element and the containing element.
...if you have two elements whose margins touch, and both margins are positive, those margins will combine to become one margin, which is the size of the largest in
dividual margin.
...And 2 more matches
How CSS is structured - Learn web development
an example would be the calc() function, which can do simple math within css: <
div class="outer"><
div class="box">the inner box is 90% - 30px.</
div></
div> .outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } this renders as: a function consists of the function name, and parentheses to enclose the values for the function.
... <
div class="box"></
div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the output from the above code looks like this: look up different values of properties listed below.
...on large screen or window, we increase the font size for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* handle specific elements nested in the dom */ /* -------------------------------------------------------------------------------------------- */
div p, #id:first-line { background-color: red; border-radius: 3px; }
div p { margin: 0; padding: 1em; }
div p + p { padding-top: 0; } "commenting out" code is also useful for temporarily disabling sections of code for testing.
...And 2 more matches
How to build custom form controls - Learn web development
--> <
div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control.
...--> <ul class="optlist"> <!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> note the use of class names; these identify each relevant part regardless of the actual underlying html elements used.
... <body class="no-widget"> <form> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> </form> </body> second, we need two new classes to let us hide the unneeded element: ...
...And 2 more matches
Images in HTML - Learn web development
if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show...
... solution"> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show...
...for example, there would be nothing to stop you from doing this: <
div class="figure"> <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341"> <p>a t-rex on display in the manchester university museum.</p> </
div> this is ok.
...And 2 more matches
A first splash into JavaScript - Learn web development
we'll tell you if your guess was too high or too low.</p> <
div class="form"> <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </
div> <
div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </
div> <script> // your javascript goes here let randomnumber = math.flo...
... the first three constants are each made to store a reference to the results paragraphs in our html, and are used to insert values into the paragraphs later on in the code (note how they are inside a <
div> element, which is itself used to select all three later on for resetting, when we restart the game): <
div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </
div> the next two constants store references to the form text input and submit button and are used to control submitting the guess later on.
... first let's look at arithmetic operators, for example: operator name example + addition 6 + 9 - subtraction 20 - 15 * multiplication 3 * 7 /
division 10 / 5 you can also use the + operator to join text strings together (in programming, this is called concatenation).
...And 2 more matches
Ember app structure and componentization - Learn web development
t looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <
div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </
div> <input autofocus class="edit" value="todo te...
...xt"> </li> <li> <
div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </
div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear comple...
... break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an in
dividual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-todo" input.
...And 2 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <
div class="btn-group"> <button type="button" class="btn btn__primary" on:click={checkall}>{completed ?
... 'check' : 'uncheck'} all</button> <button type="button" class="btn btn__primary" on:click={removecompleted}>remove completed</button> </
div> we've also included a completed variable to toggle between checking and unchecking all tasks.
... below the existing ones: import moreactions from './moreactions.svelte' then add the described functions at the end of the <script> section: const checkalltodos = (completed) => todos.foreach(t => t.completed = completed) const removecompletedtodos = () => todos = todos.filter(t => !t.completed) now go to the bottom of the todos.svelte markup section and replace the btn-group <
div> that we copied into moreactions.svelte with a call to the moreactions component, like so: <!-- moreactions --> <moreactions on:checkall={e => checkalltodos(e.detail)} on:removecompleted={removecompletedtodos} /> ok, let's go back into the app and try it out!
...And 2 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <
div class="stack-small"> <
div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </
div> <
div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </...
...button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </
div> </
div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in html attributes, like we did with the checked and id attributes of the checkbox.
...update it like this: <
div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter...
...And 2 more matches
Vue conditional rendering: editing existing todos - Learn web development
copy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <
div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </
div> <
div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__p...
...rimary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </
div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true } }, data() { return { newlabel: this.label }; }, methods: { onsubmit() { if (this.newlabel && this.newlabel !== this.label) { this.$emit("item-edited", this.newlabel); } }, oncancel() { this.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { displ...
... <template> <
div class="stack-small"> <
div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </
div> <
div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{...
...And 2 more matches
Accessibility API cross-reference
application frame n/a application see <
div> and <nonstruct> a region that contains mostly site-oriented content, rather than page-specific content.
... complementary <aside> n/a but <
div> or even <p> have been suggested for this purpose a widget that may contain navigable descendants or owned children.
...see also span n/a n/a n/a <
div> <
div> but if you need custom semantic structure, use <nonstruct> instead window that corresponds to an mdi document.
...And 2 more matches
How Mozilla's build system works
the recursive make backend
divides the source tree into tiers.
... an in
dividual moz.build file is actually a python script.
... the output of the execution of an in
dividual moz.build file is a python dictionary.
...And 2 more matches
Eclipse CDT
to rebuild for changes in an in
dividual directory (for example, to take account of some changes that you yourself made) select "index > freshen all files" on that directory.
...you can set the scheme to "emacs" or "microsoft visual studio" if that's your thing, or change in
dividual key bindings.
... when changing in
dividual key bindings, note that bindings are context sensitive and that any changes you make may be ignored if they conflict with existing bindings, or if they are overridden by a binding for a more specific context.
...And 2 more matches
MathML Accessibility in Mozilla
pre-subscript e pre-superscript f pre-superscript g subscript b subscript c superscript d a base b subscript c subscript d superscript e presubscript f presuperscript g presuperscript scripted x+y __________ long
division symbol enclosing x plus y end symbol __________ not supported.
... x plus y enclosed by: a long
division sign x + y long
division enclosed x+y __________ long
division symbol enclosing x plus y end symbol __________ not supported.
... x plus y enclosed by: a long
division sign x + y long
division enclosed x+y __________ actuarial symbol enclosing x plus y end symbol __________ not supported.
...And 2 more matches
DMD
unreported { 150 blocks in heap block record 283 of 5,495 21,600 bytes (20,400 requested / 1,200 slop) in
dividual block sizes: 144 x 150 0.00% of the heap (16.85% cumulative) 0.02% of unreported (94.68% cumulative) allocated at { #01: replace_malloc (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:1286) #02: malloc (/home/njn/moz/mi5/go64dmd/memory/build/../../../memory/build/replace_malloc.c:153) #03: moz_xmalloc (/home/njn/moz/mi5/memory/mozalloc/m...
...for example: unreported { 420,010 blocks in heap block record 2 of 5,495 29,203,408 bytes (27,777,288 requested / 1,426,120 slop) in
dividual block sizes: 2,048 x 3; 1,024 x 103; 512 x 147; 496 x 7; 480 x 31; 464 x 6; 448 x 50; 432 x 41; 416 x 28; 400 x 53; 384 x 43; 368 x 216; 352 x 141; 336 x 58; 320 x 104; 304 x 5,130; 288 x 150; 272 x 591; 256 x 6,017; 240 x 1,372; 224 x 93; 208 x 488; 192 x 1,919; 176 x 18,903; 160 x 1,754; 144 x 5,041; 128 x 36,709; 112 x 5,571; 96 x 6,280; 80 x 40,738; 64 x 37,925; 48 x 78,392; 32 x 136,199...
... allocated at { #01: (no stack trace recorded due to --stacks=partial) } } in contrast, stack traces are always recorded when a block is reported, which means you can end up with records like this where the allocation point is unknown but the reporting point is known: once-reported { 104,491 blocks in heap block record 13 of 4,689 10,392,000 bytes (10,392,000 requested / 0 slop) in
dividual block sizes: 512 x 124; 256 x 242; 192 x 813; 128 x 54,664; 64 x 48,648 1.35% of the heap (48.65% cumulative) 1.64% of once-reported (59.18% cumulative) allocated at { #01: (no stack trace recorded due to --stacks=partial) } reported at { #01: mozilla::dmd::dmdfuncs::report(void const*) (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:164...
...And 2 more matches
A guide to searching crash reports
please read the documentation about in
dividual crash reports before reading this page.
... this is a list of all the in
dividual crash reports that match the search criteria.
... the link in each "crash id" column cell links to an in
dividual crash report.
...And 2 more matches
SpiderMonkey Internals
semantic and lexical feedback are used to disambiguate hard cases such as missing semicolons, assignable expressions ("lvalues" in c parlance), and whether / is the
division symbol or the start of a regular expression.
...an example, from perfect.js: function perfect(n) { print("the perfect numbers up to " + n + " are:"); // we build sumof
divisors[i] to hold a string expression for // the sum of the
divisors of i, excluding i itself.
... var sumof
divisors = new exprarray(n + 1, 1); for (var
divisor = 2;
divisor <= n;
divisor++) { for (var j =
divisor +
divisor; j <= n; j +=
divisor) { sumof
divisors[j] += " + " +
divisor; } // at this point everything up to '
divisor' has its sumof
divisors // expression calculated, so we can determine whether it's perfect // already by evaluating.
...And 2 more matches
An Overview of XPCOM
mozilla has over four million lines of code, and no single in
dividual understands the entire codebase.
... the best way to tackle a project of this size is to
divide it into smaller, more manageable pieces, use a component programming model, and to organize related sets of components into modules.
...this library is the networking module, also known as "necko." but it's not always a good idea to
divide things up.
...And 2 more matches
nsIAccessibleRole
thus, panes represent a level of grouping lower than frame windows or documents, but above in
dividual controls.
... role_separator 21 used to visually
divide a space into two regions, such as a separator menu item or a bar that
divides split panes within a window.
...the edit control is
divided into sections for the different parts of the ip address.
...And 2 more matches
Tree map view - Firefox Developer Tools
for the treemaps shown in the memory tool, things on the heap are
divided at the top level into four categories: objects: javascript and dom objects, such as function, object, or array, and dom types like window and html
divelement.
... within top-level categories: objects is further
divided by the object's type.
... scripts is further sub
divided by the script's origin.
...And 2 more matches
Background Tasks API - Web APIs
</p> <
div class="container"> <
div class="label">decoding quantum filament tachyon emissions...</
div> <progress id="progress" value="0"></progress> <
div class="button" id="startbutton"> start </
div> <
div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </
div> </
div> <
div class="logbox"> <
div class="logheader"> log </
div> <...
...
div id="log"> </
div> </
div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
... logelem is the <
div> we'll insert logged text messages into.
...And 2 more matches
Document.querySelectorAll() - Web APIs
examples obtaining a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <
div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("
div.note,
div.alert"); here, we get a list of <p> elements whose immediate parent element is a <
div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("
div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
... html consider this html, with its three nested <
div> blocks.
...And 2 more matches
EffectTiming.fill - Web APIs
we have a <
div> named "main" which is a container for the element we'll be animating, which is a <
div> with the id "box".
... below that, another <
div> serves as a button that will trigger the animation to begin.
... <
div class="main"> <
div id="box"> <
div id="text">look!
...And 2 more matches
Element: fullscreenchange event - Web APIs
examples in this example, a handler for the fullscreenchange event is added to the element whose id is fullscreen-
div.
... if the user clicks on the "toggle fullscreen mode" button, the click handler will toggle full-screen mode for the
div.
...if not, the
div will be placed into full-screen mode.
...And 2 more matches
Event.eventPhase - Web APIs
example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next
div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <
div id="d1">d1 <
div id="d2">d2 <
div id="d3">d3 <
div id="d4">d4</
div> </
div> </
div> </
div> <
div id="
divinfo"></
div> css
div { margin: 20px; padding: 4px; border: thin bl...
...ack solid; } #
divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear = false,
divinfo = null,
divs = null, usecapture = false; window.onload = function () {
divinfo = document.getelementbyid('
divinfo')
divs = document.getelementsbytagname('
div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removelisteners() { for (let i = 0; i <
divs.length; i++) { let d =
divs[i] if (d.id != "
divinfo") { d.removeeventlistener("click", on
divclick, true) d.removeeventlistener("click", on
divclick, false) } } } function addlisteners() { for (let i = 0; i <
divs.length; i++) { let d ...
...=
divs[i] if (d.id != "
divinfo") { if (chcapture.checked) { d.addeventlistener("click", on
divclick, true) } else { d.addeventlistener("click", on
divclick, false) d.onmousemove = function () { clear = true } } } } } function on
divclick(e) { if (clear) { clear() clear = false } if (e.eventphase == 2) e.currenttarget.style.backgroundcolor = 'red'; let level = e.eventphase == 0 ?
...And 2 more matches
Ajax navigation example - Web APIs
"</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <
div id="ajax-content"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </
div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; echo...
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <
div id="ajax-content"> <?php } ?> <p>this is the content of <strong>second_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </
div> <p>this paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <?php include "include/after_content.php"; ec...
..."</title>"; ?> </head> <body> <?php include "include/before_content.php"; ?> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <
div id="ajax-content"> <?php echo $page_content; ?> </
div> <p>this paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</html>"; } ?> css/style.css: #ajax-loader { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; } #ajax-load...
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
this object contains zero or more in
dividual constraints, as well as an optional sub-object named advanced, which contains another set of zero or more constraints which the user agent must satisfy if at all possible.
... below all of that, you'll see the video itself.</p> <p>click the "start" button to begin.</p> <h3>constrainable properties available:</h3> <ul id="supportedconstraints"> </ul> <
div id="startbutton" class="button"> start </
div> <
div class="wrapper"> <
div class="trackrow"> <
div class="leftside"> <h3>requested video constraints:</h3> <textarea id="videoconstrainteditor" cols=32 rows=8></textarea> </
div> <
div class="rightside"> <h3>actual video settings:</h3> <textarea id="videosettingstext" cols=32 rows=8 disabled></textarea> </
div> ...
... </
div> <
div class="trackrow"> <
div class="leftside"> <h3>requested audio constraints:</h3> <textarea id="audioconstrainteditor" cols=32 rows=8></textarea> </
div> <
div class="rightside"> <h3>actual audio settings:</h3> <textarea id="audiosettingstext" cols=32 rows=8 disabled></textarea> </
div> </
div> <
div class="button" id="applybutton"> apply constraints </
div> </
div> <video id="video" autoplay></video> <
div class="button" id="stopbutton"> stop video </
div> <
div id="log"> </
div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 150px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px...
...And 2 more matches
Node.insertBefore() - Web APIs
example example 1 <
div id="parentelement"> <span id="childelement">foo bar</span> </
div> <script> // create the new node to insert let newnode = document.createelement("span") // get a reference to the parent node let parent
div = document.getelementbyid("childelement").parentnode // begin test case [ 1 ] : existing childelement (all works correctly) let sp2 = document.getelementbyid("childelement") parent
div.inse...
...rtbefore(newnode, sp2) // end test case [ 1 ] // begin test case [ 2 ] : childelement is of type undefined let sp2 = undefined // non-existent node of id "childelement" parent
div.insertbefore(newnode, sp2) // implicit dynamic cast to type node // end test case [ 2 ] // begin test case [ 3 ] : childelement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parent
div.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [ 3 ] </script> example 2 <
div id="parentelement"> <span id="childelement">foo bar</span> </
div> <script> // create a new, plain <span> element let sp1 = document.createelement("span") // get the reference element let sp2 = document.getelementbyid("childelement") // get the parent element l...
...et parent
div = sp2.parentnode // insert the new element into before sp2 parent
div.insertbefore(sp1, sp2) </script> note: there is no insertafter() method.
...And 2 more matches
ParentNode.querySelectorAll() - Web APIs
examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <
div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("
div.note,
div.alert"); here, we get a list of <p> elements whose immediate parent element is a <
div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("
div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
... html consider this html, with its three nested <
div> blocks.
...And 2 more matches
Using DTMF with WebRTC - Web APIs
a <
div> to receive and display log text to show status information.
...note that this example is "cheating" by generating both peers in one code stream, rather than having each be a truly separate entity.</p> <audio id="audio" autoplay controls></audio><br/> <button name="dial" id="dial">dial</button> <
div class="log"></
div> javascript let's take a look at the javascript code next.
... dialbutton and logelement these variables will be used to store references to the dial button and the <
div> into which logging information will be written.
...And 2 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
while reading this article and the accompanying source code, it's helpful to keep in mind that the display for a 3d headset is a single screen,
divided in half.
... the last four variables declared are storage for references to the <
div> elements into which we'll output the matrices when we want to show them to the user.
... window.addeventlistener("load", onload); function onload() { xrbutton = document.queryselector("#enter-xr"); xrbutton.addeventlistener("click", onxrbuttonclick); projectionmatrixout = document.queryselector("#projection-matrix
div"); modelmatrixout = document.queryselector("#model-view-matrix
div"); cameramatrixout = document.queryselector("#camera-matrix
div"); mousematrixout = document.queryselector("#mouse-matrix
div"); if (!navigator.xr || enableforcepolyfill) { console.log("using the polyfill"); polyfill = new webxrpolyfill(); } setupxrbutton(); } the load event handler gets a reference to the bu...
...And 2 more matches
Using Web Workers - Web APIs
window.onload = function() { document.worker.postmessage(''); }; </script> </head> <body><
div id="logdisplay"></
div></body> </html> the embedded worker is now nested into a new custom document.worker property.
... the html code <!doctype html> <html> <head> <meta charset="utf-8" /> <title>test threads fibonacci</title> </head> <body> <
div id="result"></
div> <script language="javascript"> var worker = new worker('fibonacci.js'); worker.onmessage = function(event) { document.getelementbyid('result').textcontent = event.data; dump('got: ' + event.data + '\n'); }; worker.onerror = function(error) { dump('worker error: ' + error.message + '\n'); throw error; }; worker.postmessage('...
...5'); </script> </body> </html> the web page creates a
div element with the id result , which gets used to display the result, then spawns the worker.
...And 2 more matches
ARIA: article role - Accessibility
<
div role="article"> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ...
...</
div> <
div role="article"> ...
... </
div> this example shows two articles side by side on one page that could be structured similarly and are related.
...And 2 more matches
ARIA: Comment role - Accessibility
the related comment is marked up using an html structure wrapped with a <
div> containing role="comment".
... <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> 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.
... multiple comments since aria-details can now accept multiple ids, we can associate multiple comments with the same annotation, like so: <p>the last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, 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> <
div role="comment" id="thread-2" data-author="chris"> <h3>marcus said</h3> <p class="comment-text">the guitar solo could do with a touch more chorus, and a slightly lower volume.</p> <p><time datetime="2019-03-29t15:35">march 29 2019, 15:...
...And 2 more matches
ARIA: Region role - Accessibility
<
div role="region" aria-label="example"> <!-- region content --> </
div> description the region role is an aria landmark role.
... examples <
div role="region" aria-labelledby="region-heading"> <h2 id="region-heading">this heading's <code>id</code> attribute helps this region have an accessible name</h2> <!-- region content --> </
div> accessibility concerns use sparingly!
... <
div role="region" aria-labelledby="heading"> <h3 id="use-discretion">please use the <code>region</code> role with discretion</h3> <!-- content --> </
div> ...
...And 2 more matches
ARIA: row role - Accessibility
<
div role="table" aria-label="populations" aria-describedby="country_population_desc"> <
div id="country_population_desc">world populations by country</
div> <
div role="rowgroup"> <
div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </
div> </
div> <
div role="rowgroup"> <
div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </
div> <
div role="row"> <span role="cell"...
...>france</span> <span role="cell">67 million</span> </
div> </
div> </
div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
...if the interaction provides for the selection state of in
dividual cells, if left to right and top to botton navigation is provided, or if the user interface allows the rearranging of cell order or otherwise changing in
dividual cell order such as through drag and drop, use grid or treegrid instead.
...And 2 more matches
Basic form hints - Accessibility
" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript widget, using <
div>s or <span>s.
... the example below shows a <button> element that is described by a sentence in a separate <
div> element.
... the aria-describedby attribute on the <button> references the id of the <
div>.
...And 2 more matches
Web accessibility for seizures and physical reactions - Accessibility
in the article, "understanding wcag 2.0 three flashes or below threshold" notes generally that: “in
dividuals who have photosensitive seizure disorders can have a seizure triggered by content that flashes at certain frequencies for more than a few flashes” and goes on to note, very specifically that: “people are even more sensitive to red flashing than to other colors, so a special test is provided for saturated red flashing”.
...a <
div> element set to change color and luminosity at high frequency, easily done via javascript, can cause real harm.
... additional concerns exist for in
dividuals with motor-skills problems.
...And 2 more matches
border-bottom-left-radius - CSS: Cascading Style Sheets
an arc of circle is used as the border
div { border-bottom-left-radius: 40px 40px; } .
... an arc of ellipse is used as the border
div { border-bottom-left-radius: 40px 20px; } .
... the box is a square: an arc of circle is used as the border
div { border-bottom-left-radius: 40%; } .
...And 2 more matches
border-bottom-right-radius - CSS: Cascading Style Sheets
an arc of circle is used as the border
div { border-bottom-right-radius: 40px 40px; } .
... an arc of ellipse is used as the border
div { border-bottom-right-radius: 40px 20px; } .
... the box is a square: an arc of circle is used as the border
div { border-bottom-right-radius: 40%; } .
...And 2 more matches
border-image-slice - CSS: Cascading Style Sheets
the border-image-slice css property
divides the image specified by border-image-source into regions.
...-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <
div> with a border image set on it.
... html <
div class="wrapper"> <
div></
div> </
div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output"...
...And 2 more matches
calc() - CSS: Cascading Style Sheets
/
division.
...
division by zero results in an error being generated by the html parser.
...this includes any
division, even if it results in an integer.
...And 2 more matches
display - CSS: Cascading Style Sheets
some values of display are fully defined in their own in
dividual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification.
... see the table at the end of this document for all of the in
dividual specifications.
... global /* global values */ display: inherit; display: initial; display: unset; description the in
dividual pages for the different types of value that display can have set on it feature multiple examples of those values in action — see the syntax section.
...And 2 more matches
<filter-function> - CSS: Cascading Style Sheets
html <
div></
div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>sat...
...urate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css
div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('select'); const
divelem = document.queryselector('
div'); const slider = document.queryselector('input'); const output = document.queryselector('output'); c...
...onst curvalue = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); set
div(selectelem.value); }); slider.addeventlistener('input', () => { set
div(selectelem.value); }); function setslider(filter) { if(filter === 'blur') { slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setattribute('data-unit', 'px'); } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; slider.setattribute('data-unit', ''); } else if(filter === 'drop-shadow') { slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setattribute('data-unit', 'px')...
...And 2 more matches
line-height - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */
div { line-height: 1.2; font-size: 10pt; } /* number/unitless */
div { line-height: 1.2em; font-size: 10pt; } /* length */
div { line-height: 120%; font-size: 10pt; } /* percentage */
div { font: 10pt/1.2 georgia,"bitstream charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family prop...
...we will use two <
div> elements.
... html <
div class="box green"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ...
...And 2 more matches
overflow-block - CSS: Cascading Style Sheets
toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <
div id="
div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </
div> </li> <li><code>overflow-block:scroll</code> — always adds a scrollbar <
div id="
div2"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </
div> </li> <li><code>overflow-block:visible</code> — displays the text outside the box if needed <
div id="
div3"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...And 2 more matches
overflow-y - CSS: Cascading Style Sheets
containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> — hides the text outside the box <
div id="
div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </
div> </li> <li><code>overflow-y:scroll</code> — always adds a scrollbar <
div id="
div2"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... </
div> </li> <li><code>overflow-y:visible</code> — displays the text outside the box if needed <
div id="
div3"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
...And 2 more matches
position - CSS: Cascading Style Sheets
html <
div class="box" id="one">one</
div> <
div class="box" id="two">two</
div> <
div class="box" id="three">three</
div> <
div class="box" id="four">four</
div> css .box { display: inline-block; width: 100px; height: 100px; background: red; color: white; } #two { position: relative; top: 20px; left: 20px; background: blue; } absolute positioning elements that are relatively positioned ...
... html <
div class="outer"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </p> <
div class="box" id="one">one</
div> </
div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top: 80px; left: 10px; background: blue; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; } result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positionin...
...And 2 more matches
transform-origin - CSS: Cascading Style Sheets
a percentageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <
div class="box1"> </
div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } transform: rotate(30deg); <
div class="box2"> </
div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(...
...30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0; <
div class="box3"> </
div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <
div class="box4"> </
div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transfo...
...rm: rotate(30deg); transform-origin: -1em -3em; <
div class="box5"> </
div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } transform: scale(1.7); <
div class="box6"> </
div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <
div class="box7"> </
div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; backg...
...And 2 more matches
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s...
...und-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("
div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("
div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 1s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; backgro...
...kground-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:1s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("
div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("
div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-delay: 2s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; backgro...
...And 2 more matches
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; ...
... font-size left top transform -webkit-transform color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transformv color; transition-duration:0.5s; 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); transition-duration: 1s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; back...
...color font-size left top -webkit-transform transform color; -webkit-transition-duration:1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -webkit-transform color; transition-duration:1s; 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); transition-duration: 2s <
div class="parent"> <
div class="box">lorem</
div> </
div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; back...
...And 2 more matches
transition-timing-function - CSS: Cascading Style Sheets
the step timing functions
divides the input time into a specified number of intervals that are equal in length.
...r>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <
div class="parent"> <
div class="ease">ease</
div> <
div class="easein">ease-in</
div> <
div class="easeout">ease-out</
div> <
div class="easeinout">ease-in-out</
div> <
div class="linear">linear</
div> <
div class="cb">cubic-bezier(0.2,-2,0.8,2)</
div> </
div> .parent {} .parent >
div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px ...
...solid red; color: white; transition-property: all; transition-duration: 7s; } .parent >
div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent >
div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var intervalid = window.setinterval(updatetransition, 10000); .ease { transition-timing-function: ease; } .easein { transition-timing-function: ease-in; } .easeout { transition-timing-function: ease-out; } .easeinout { transition-timing-function: ease-in-out; } .linear { transition-timing-function: linear; }...
...And 2 more matches
Adding captions and subtitles to HTML5 video - Developer guides
html5 and video captions before
diving into how to add captions to the video player, there are a number of things that we will first mention, which you should be aware of before we start.
...as a consequence, the video controls now look as follows: <
div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <
div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </
div> <button id="mute" type="button" data-state="mute"...
...>mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> <button id="subtitles" type="button" data-state="subtitles">cc</button> </
div> css changes the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
let's take a look at an example, starting by looking at the results we're trying to achieve: html the html responsible for creating the above example is shown here: <
div class="wrapper"> <
div class="box boxleft"> <p> this is the first box.
... </p> </
div> <
div class="box boxright"> <p> this is the second box.
... </p> </
div> </
div> this is pretty simple, using a <
div> as a wrapper around the contents, which consists of two more <
div>s, each styled differently with a single paragraph (<p>) in each box.
...And 2 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
take the following example: <form> <
div> <input type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </
div> <
div> <button type="submit">subscribe</button> </
div> </form> in this example, we've got a name of subscribe, and a value of newsletter.
... <fieldset> <legend>choose your interests</legend> <
div> <input type="checkbox" id="coding" name="interest" value="coding"> <label for="coding">coding</label> </
div> <
div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </
div> </fieldset> in this example you will see that we've given each checkbox the same name.
...see the below example: <fieldset> <legend>choose your interests</legend> <
div> <input type="checkbox" id="coding" name="interest" value="coding" checked> <label for="coding">coding</label> </
div> <
div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </
div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicki...
...And 2 more matches
<input type="number"> - HTML: Hypertext Markup Language
the following example exhibits all of the above features, as well as using some css to display valid and invalid icons, depending on the input's value: <form> <
div> <label for="balloons">number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> <span class="validity"></span> </
div> <
div> <input type="submit"> </
div> </form> try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that i...
... the css applied to this example is as follows:
div { margin-bottom: 10px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity.
... the html looks like this: <form> <
div class="metersinputgroup"> <label for="meters">enter your height — meters:</label> <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g.
...And 2 more matches
<input type="tel"> - HTML: Hypertext Markup Language
for example, let's use this html: <form> <
div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </
div> <
div> <button>submit</button> </
div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross:
div { margin-bottom: 10px; position: relative; } input[...
... in this example we'll use the same css as before, but our html is changed to look like this: <form> <
div> <label for="telno">enter a telephone number (in the form xxx-xxx-xxxx): </label> <input id="telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <span class="validity"></span> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span {...
... <form> <
div> <label for="country">choose your country:</label> <select id="country" name="country"> <option>uk</option> <option selected>us</option> <option>germany</option> </select> </
div> <
div> <p>enter your telephone number: </p> <span class="area
div"> <input id="areano" name="areano" type="tel" required placeholder="area code" pattern="[0-9]{3...
...And 2 more matches
<input type="week"> - 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; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid a...
... let's look at an example; here we've set minimum and maximum weeks, and also made the field required: <form> <
div> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2017-w52" required> <span class="validity"></span> </
div> <
div> <input type="submit" value="submit form"> </
div> </form> if you try to submit the form with no value, the browser displays an error.
... the html looks like so: <form> <
div class="nativeweekpicker"> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2018-w52" required> <span class="validity"></span> </
div> <p class="fallbacklabel">what week would you like to start?</p> <
div class="fallbackweekpicker"> <
div> <span> <label for="week">week:</label> ...
...And 2 more matches
Number.NEGATIVE_INFINITY - JavaScript
any positive value
divided by negative_infinity is negative zero.
... any negative value
divided by negative_infinity is positive zero.
... negative_infinity,
divided by any negative value except negative_infinity, is positive_infinity.
...And 2 more matches
Number.POSITIVE_INFINITY - JavaScript
any positive number
divided by positive_infinity is positive zero.
... any negative number
divided by positive_infinity is negative zero.
... positive_infinity,
divided by any negative value except negative_infinity, is negative_infinity.
...And 2 more matches
Multiple item extension packaging - Archive of obsolete content
the extension manager will read the install.rdf install manifest to determine if this is a multiple item package and then start the installation of the in
dividual packages it contains automatically.
...the in
dividual packages contained in the multiple item package will not be listed).
...extension / theme manager) is used, the manager will display the in
dividual items contained by the multiple item package after the download completes in the same manner that it would if the user had chosen to install multiple in
dividual items simultaneously.
...this means that the contained add-ons need to be submitted to amo in
dividually for signing.
MMgc - Archive of obsolete content
every object in the system has an associated "mark bit." a garbage collection is
divided into two phases: mark and sweep.
...here you
divide memory into "cards" and when a white object is written to a black object you mark the card containing the slot the pointer to the white object was written to.
...increment time slice before
diving into the this it should be acknowledged that another way to go about this is to use a background thread and not worry about incremental marking.
...similarly we can base the decision on when to start marking when we've consumed a certain portion of the heap since the last collection, call this the isd (incremental start
divisor).
Monitoring WiFi access points - Archive of obsolete content
nsisupports)) return this; throw components.results.ns_error_no_interface; }, } netscape.security.privilegemanager.enableprivilege('universalxpconnect'); var listener = new test(); var wifi_service = components.classes["@mozilla.org/wifi/monitor;1"].getservice(components.interfaces.nsiwifimonitor); wifi_service.startwatching(listener); </script> </head> <body> <
div id="d"><p></p></
div> <
div id="c"><p></p></
div> </body> </html> the nsiwifilistener object the first thing the code above does is to prototype the listener object that will be receiving notifications of changes to the access point list.
...the onchange() method (lines 13 through 27) begins by enabling universalxpconnect privileges, then clearing out the
div (d) that will receive the updated list of access points.
... then the loop in lines 19-22 iterates over the list of access points received in the accesspoints array and adds them to the html in the
div.
... then the c
div is updated with the number of times the list has been refreshed.
Source code directories overview - Archive of obsolete content
the layout engine decides how to
divide up the "window real estate" among all the pieces of content.
...this code originated from mozilla as well as various different companies and in
dividual people.
...this code serves to manipulate the in
dividual content that it contains.
... original document information author(s): daniel howard other contributors: heikki toivonen (11-nov-1999), hervé renault (for the french translation) (16-nov-1999) last updated date: michael kaply 2-june-2005 copyright information: portions of this content are © 1998-2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Menu - Archive of obsolete content
in
dividual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus are those that arise from nodes that match the given css selector(s).
...similarly, if the user clicks a node within a
div, this property will be the node, not the
div.
... icon: "http://www.google.com/favicon.ico", data: "http://www.google.com/search?q=" }, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some
div buttons (e.g., in a slidebar or status bar item) and specify their context menu: for (let i = 0; i < 10; i++) { var button = $('<
div class="button" />', document); buttoncontainer.append(button); } jetpack.menu.context.on(".button").add(["do this", "do that"]); create a
div button (e.g., in a slidebar or status bar item) and attach menus directly to it.
...left-click the button to show popupmenu: var button = $("<
div />", document); button.text("click me"); var contextmenu = new jetpack.menu(["do this", "do that", "and the other"]); contextmenu.contexton(button); var popupmenu = new jetpack.menu(["frumpy", "frimpy", "frompy"]); popupmenu.popupon(button); complete jetpacks see a complete, real-word example that you can install in the simple storage documentation.
Metro browser chrome tests - Archive of obsolete content
it is possible to run in
dividual tests as well.
...a simple test looks like this: gtests.push({ desc: "test loading about:blank", setup: function () { }, teardown: function () { }, run: function () { yield addtab("about:blank"); is(tab.browser.currenturi.spec, "about:blank", "about:blank is loaded"); } }); function test() { runtests(); } gtests contains in
dividual tests that make up the library of tests your test file will contain.
...setup(), teardown(), and run() each have in
dividual exception handlers to prevent one method from interfering with the execution of another.
...additional built-in framework test checks will run after the completion of each in
dividual test insuring tests clean up properly.
Space Manager Detailed Design - Archive of obsolete content
andrect, this);} // remove and delete all the band rects in the list void clear(); }; frameinfo* getframeinfofor(nsiframe* aframe); frameinfo* createframeinfo(nsiframe* aframe, const nsrect& arect); void destroyframeinfo(frameinfo*); void clearframeinfo(); void clearbandrects(); bandrect* getnextband(const bandrect* abandrect) const; void
divideband(bandrect* aband, nscoord abottom); prbool canjoinbands(bandrect* aband, bandrect* aprevband); prbool joinbands(bandrect* aband, bandrect* aprevband); void addrecttoband(bandrect* aband, bandrect* abandrect); void insertbandrect(bandrect* abandrect); nsresult getbandavailablespace(const bandrect* aband, nscoord ay, ...
... starting at the head of the list of bandrects, check for intersection with the rect passed in: case #1: the rect is totally above the current band rect, so insert a new band rect before the current bandrect cases #2 and #7: the rect is partially above the band rect, so it is
divided into two bandrects, one entirely above the band, and one containing the remainder of the rect.
... case #5: the rect is totally below the current bandrect, so just skip to the next band case #3 and #4: rect is at least partially intersection with the bandrect, so
divide the current band into two parts, where the top part is above the current rect.
... this algorithm is pretty confusing - basically what needs to happen is that rects and bands need to be
divided up so that complicated cases like#2, #4, and #7, are reduced to simpler cases where the rects is totally above,below, or between a band rect.
-ms-scrollbar-base-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-base-color and -ms-scrollbar-arrow-color to create two <
div> objects with different scroll bar color schemes.
...
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .aquascroll { scrollbar-base-color: aqua; scrollbar-arrow-color: blue; border-color: blue; } .bisquescroll { scrollbar-base-color: bisque; scrollbar-arrow-color: red; border-color: red; } <body> <
div class="aquascroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> <
div class="bisquescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> </body> the following image shows the result.
-ms-scrollbar-highlight-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-highlight-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <
div> objects with different scroll bar color schemes.
...
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <
div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> <
div class="redscroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> </body> this image shows the result: specifications not part of any specification.
-ms-scrollbar-track-color - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-track-color, -ms-scrollbar-face-color, and -ms-scrollbar-arrow-color to create two <
div> elements with different scroll bar color schemes.
...
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <
div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> <
div class="redscroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> </body> the following image shows the result.
XForms Repeat Element - Archive of obsolete content
example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model> <
div xforms:repeat-nodeset="val"> this is the inline content, just text.
... here comes the output: <br/> <xf:output ref="@id"><xf:label>output: </xf:label></xf:output> <
div xf:repeat-nodeset="nest"><xf:output ref="."><xf:label>nested output: </xf:label></xf:output></
div> </
div> repeat in anonymous content (usage in xbl) you can use repeat elements inside anonymous content to create powerful new widgets.
...tent> <xf:repeat xbl:inherits="bind, model, nodeset" anonid="anonidgridrepeat"> <xf:trigger> <xf:label>r</xf:label> <xf:delete ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style>
div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <input>input1</input> </item> <item> <input>input2</input> </item> <item> <input>input3</input> </item> </repeat> </data> </xf:instance> </xf:mode...
...l> </head> <body> <xf:repeat nodeset="/data/repeat/item" id="gridrepeat"> <xf:input ref="input"/> </xf:repeat> <br/> <
div class="grid" nodeset="/data/repeat/item"/> </body> ...
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
consider this css: p { color: green; }
div.warning { width: 100%; border: 2px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16px lucida grande, arial, helvetica, sans-serif; } the selectors here are "p" (which applies the color green to the text inside any <p> element), "
div.warning" (which makes any <
div> element with the class "warning" look like a warning box), and "#customized", which sets the base font of the element with the id "customized" to 16-pixel tall lucida grande or one of a few fallback fonts.
... we can then apply this css to some html, such as: <p>this is happy text.</p> <
div class="warning"> be careful!
...</
div> <
div id="customized"> <p>this is happy text.</p> <
div class="warning"> be careful!
... </
div> </
div> the resulting page content is styled like this: ...
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
for example, nans can represent infinity, result of
division by zero, missing value, or the square root of a negative (which is imaginary, whereas a floating-point number is real).
... practically speaking, if i
divide two variables in a javascript program, the result may be nan, which is predefined in javascript as "undefined".
... hence this
division may break the program.
...fortunately, since the result will be nan and i know my
divisor may turn out to be 0, i can set up testing conditions that prevent any such computations in the first place or notify me of where they happen.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
<script>document.write("<
div>");</script> is bad.
... <script>document.write("<
div></
div>");</script> is ok.
...<script>document.write("<
div></
div");</script> is bad.
...<script>document.write("<
div></
div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><
div></
div>");</script> which is unbalanced.
Backgrounds and borders - Learn web development
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } we'll return to how the shorthand works later in the tutorial, but first let's have a look at the different things you can do with backgrounds in css, by looking at the in
dividual background properties.
... the most common background-position values take two in
dividual values — a horizontal value followed by a vertical value.
... note: background-position is a shorthand for background-position-x and background-position-y, which allow you to set the different axis position values in
dividually.
... we can set a border for all four sides of a box with border: .box { border: 1px solid black; } or we can target one edge of the box, for example: .box { border-top: 1px solid black; } the in
dividual properties for these shorthands would be: .box { border-width: 1px; border-style: solid; border-color: black; } and for the longhands: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } note: these top, right, bottom, and left border properties also have mapped logical properties that relate to the writing mode of the document (e.g.
Supporting older browsers - Learn web development
in the below example, we have floated three <
div>s so they display in a row.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } <
div class="wrapper"> <
div class="item">item one</
div> <
div class="item">item two</
div> <
div class="item">item three</
div> </
div> note: the clear property also has no effect once the cleared item becomes a grid item, so you could have a layout with a cleared footer, which is then turned into a grid layout.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } <
div class="wrapper"> <
div class="item">item one</
div> <
div class="item">item two</
div> <
div class="item">item three</
div> </
div> to deal with this issue we need to have a way to detect if grid is supported and therefore if it will override the width.
... * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10px; max-width: 400px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; width: 33.333%; } @supports (display: grid) { .item { width: auto; } } <
div class="wrapper"> <
div class="item">item one</
div> <
div class="item">item two</
div> <
div class="item">item three</
div> </
div> support for feature queries is very good across modern browsers, however, you should note that it is the browsers that do not support css grid, which also doesn’t support feature queries.
Drawing graphics - Learn web development
once you've drawn a graphic to a canvas, there's no way to manipulate that graphic in
dividually like you can with dom elements.
... you can't move each ball around on the canvas, because once it's drawn, it's part of the canvas, and is not an in
dividual accessible element or object.
...we use the modulo (%) operator (also known as the remainder operator) to check whether the posx value can be exactly
divided by 13 with no remainder.
... the aspect ratio: usually, this is the ratio of the scene's width
divided by the scene's height.
An overview of NSS Internals
nss doesn't require the programmer to manage in
dividual files containing in
dividual certificates or keys.
...performing an operation often involves allocating many in
dividual data items, and the code might be required to abort a task at many positions in the logic.
...the implementation of arenas makes sure that all in
dividual memory blocks are tracked.
... once a task is done, regardless whether it completed or was aborted, the programmer simply needs to release the arena, and all in
dividually allocated blocks will be released automatically.
NSS tools : signtool
digital signatures allow ssl-enabled clients to perform two important operations: * confirm the identity of the in
dividual, company, or other entity whose digital signature is associated with the files * check whether the files have been tampered with since being signed if you have a signing certificate, you can use netscape signing tool to digitally sign files and package them as a jar file.
... an in
dividual file can potentially be signed with multiple digital signatures.
... signtool -l using certificate directory: /u/jsmith/.netscape s certificates - ------------ bbn certificate services ca root 1 ibm world registry ca verisign class 1 ca - in
dividual subscriber - verisign, inc.
... organization unit: server products
division state or province: california country (must be exactly 2 characters): us username: someuser email address: someuser@netscape.com enter password or pin for "communicator certificate db": [password will not echo] generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x509.raw and x...
JIT Optimization Strategies
the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access in
dividual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...the function containing the arguments.callee is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access in
dividual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access in
dividual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
...the function containing the arguments.length is allowed to use the arguments object in the following ways without disabling this optimization: access arguments.length access arguments.callee access in
dividual args using arguments[i] save arguments into variables, as long as those variables cannot be accessed by any nested function, and as long as there exists no eval anywhere within the function or nested function definitions.
Gecko Roles
thus, panes represent a level of grouping lower than frame windows or documents, but above in
dividual controls.
... role_separator used to visually
divide a space into two regions, such as a separator menu item or a bar that
divides split panes within a window.
...the edit control is
divided into sections for the different parts of the ip address.
...between the two panels is a
divider the user can manipulate to make one panel larger and the other panel smaller.
jsdIStackFrame
method overview boolean eval(in astring bytes, in autf8string filename, in unsigned long line, out js
divalue result); attributes attribute type description callee js
divalue function object running in this stack frame.
... scope js
divalue top object in the scope chain.
... thisvalue js
divalue |this| object for this stack frame.
...boolean eval( in astring bytes, in autf8string filename, in unsigned long line, out js
divalue result ); parameters bytes script to be evaluated.
AbstractRange - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fi...
...ll="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties collapsed read only a boolean value which is true if the range is collapsed.
... to illustrate this, consider the html below: <
div class="container"> <
div class="header"> <img src="" class="sitelogo"> <h1>the ultimate website</h1> </
div> <article> <section class="entry" id="entry1"> <h2>section 1: an interesting thing...</h2> <p>a <em>very</em> interesting thing happened on the way to the forum...</p> <aside class="callout"> <h2>aside</h2> <p>an interesting aside to share w...
...ith you...</p> </aside> </section> </article> <pre id="log"></pre> </
div> after loading the html and constructing the dom representation of the document, the resulting dom tree looks like this: in this diagram, the nodes representing html elements are shown in green.
Pixel manipulation with canvas - Web APIs
finally, we use the array data to set a background color and a text in the <
div> to display the color.
... <canvas id="canvas" width="300" height="227" style="float:left"></canvas> <
div id="color" style="width:200px;height:50px;float:left"></
div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick...
... <canvas id="canvas" width="300" height="227"></canvas> <
div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </
div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.st...
... zoom example <canvas id="canvas" width="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> <
div> <label for="smoothbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </
div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
<body>⏎ ⇥<
div>◦◦hello◦◦</
div>⏎ ⏎ ◦◦◦<
div>◦◦world!◦◦</
div>◦◦⏎ </body> we have 3 text nodes that contain only whitespace, one before the first <
div>, one between the 2 <
divs>, and one after the second <
div>.
... this renders like so: hidden example 2 <body> <
div> hello </
div> <
div> world!
... </
div> </body> we can summarize how the whitespace here is handled as follows (the may be some slight differences in exact behavior between browsers, but this basically works): because we’re inside a block formatting context, everything must be a block, so our 3 text nodes also become blocks, just like the 2 <
div>s.
...people viewing the web page see the words "hello" and "world!" on 2 separate lines as you’d expect 2 <
div>s to be laid out.
HTMLFormElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget<...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
...you can then use any of the following syntaxes to get an in
dividual form: document.forms[index] returns the form at the specified index into the array of forms.
...the reference form.elements will now refer to the in
dividual element.
HTMLImageElement.alt - Web APIs
<
div class="container"> <
div class="left-margin"> <img src="/files/16861/margin-flourish.svg" alt=""> </
div> <
div class="contents"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...ut nunc neque, porta eu auctor at, tempor et arcu.</p> </
div> </
div> css the css for this example simply sets up the styles for the layout as shown in the result below.
... <
div class="container"> <img src="https://udn.realityripple.com/samples/87/eace6b7d6a.svg" alt="new page!" class="pageinfo-badge"> <p class="contents"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </p> </
div> css the main feature of the css here is the use of clip-path and shape-outside to wrap the text around the icon in an appealing way.
KeyboardEvent: code values - Web APIs
"audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" 0xe032 "browserhome" "browserhome" 0xe033, 0xe034 "unidentified" "" 0xe035 "numpad
divide" "numpad
divide" 0xe036 "unidentified" "" 0xe037 "printscreen" "printscreen" 0xe038 "altright" "altright" 0xe039, 0xe03a "unidentified" "" 0xe03b "unidentified" "help" 0xe03c~ 0xe044 "unidentified" "" 0xe045 "numlock" "numlock" 0xe046 (ctrl +...
...lumeup" (was "volumeup" until firefox 48) "audiovolumeup" (was "volumeup" until chrome 50) kvk_volumedown (0x49) "audiovolumedown" (was "volumedown" until firefox 49) "audiovolumedown" (was "volumedown" until chrome 50) kvk_mute (0x4a) "audiovolumemute" (was "volumemute" until firefox 49) "audiovolumemute" (was "volumemute" until chrome 50) kvk_ansi_keypad
divide (0x4b) "numpad
divide" "numpad
divide" kvk_ansi_keypadenter (0x4c) "numpadenter" "numpadenter" kvk_ansi_keypadminus (0x4e) "numpadsubtract" "numpadsubtract" kvk_f18 (0x4f) "f18" "f18" kvk_f19 (0x50) "f19" "f19" kvk_ansi_keypadequals (0x51) "numpadequal" "numpadequal" kvk_ansi_keypad0 (0x52) "numpad0" ...
... "f12" 0x0061 "intlro" "intlro" 0x0062, 0x0063 "unidentified" "" 0x0064 "convert" "convert" 0x0065 "kanamode" "kanamode" 0x0066 "nonconvert" "nonconvert" 0x0067 "unidentified" "" 0x0068 "numpadenter" "numpadenter" 0x0069 "controlright" "controlright" 0x006a "numpad
divide" "numpad
divide" 0x006b "printscreen" "printscreen" 0x006c "altright" "altright" 0x006d "unidentified" "" 0x006e "home" "home" 0x006f "arrowup" "arrowup" 0x0070 "pageup" "pageup" 0x0071 "arrowleft" "arrowleft" 0x0072 "arrowright" "arrowright" 0x0073 "end" "en...
...ied" 0x0056 "intlbackslash" 0x0057 "f11" 0x0058 "f12" 0x0059 "intlro" 0x005a, 0x005b "unidentified" 0x005c "convert" 0x005d "kanamode" 0x005e "nonconvert" 0x005f "unidentified" 0x0060 "numpadenter" 0x0061 "controlright" 0x0062 "numpad
divide" 0x0063 "printscreen" 0x0064 "altright" 0x0065 "unidentified" 0x0066 "home" 0x0067 "arrowup" 0x0068 "pageup" 0x0069 "arrowleft" 0x006a "arrowright" 0x006b "end" 0x006c "arrowdown" 0x006d "pagedown" 0x006e "insert" 0x006f "delete" ...
Recording a media element - Web APIs
<
div class="left"> <
div id="startbutton" class="button"> start </
div> <h2>preview</h2> <video id="preview" width="160" height="120" autoplay muted></video> </
div> we present our main interface in two columns.
... <
div class="right"> <
div id="stopbutton" class="button"> stop </
div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </
div> on the right we see a stop button and the <video> element which will be used to play back the recorded video.
... <
div class="bottom"> <pre id="log"></pre> </
div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 2px; border: 1px solid black; } .button { cursor: pointer; display: block; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; text-decoration: none; } h2 { margin-bottom: 4px; } .left { margin-right: 10px; float: left; width: 16...
... function log(msg) { logelement.innerhtml += msg + "\n"; } the log() function is used to output text strings to a <
div> so we can share information with the user.
NonDocumentTypeChildNode.previousElementSibling - Web APIs
syntax prevnode = elementnodereference.previouselementsibling; example <
div id="
div-01">here is
div-01</
div> <
div id="
div-02">here is
div-02</
div> <li>this is a list item</li> <li>this is another list item</li> <
div id="
div-03">here is
div-03</
div> <script> let el = document.getelementbyid('
div-03').previouselementsibling; document.write('<p>siblings of
div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example outputs the following into the page...
... when it loads: siblings of
div-03 1.
...
div 4.
...
div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('previou...
Multi-touch interaction - Web APIs
define touch targets the application uses <
div> to define three different touch target areas.
... <style>
div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required.
... function pointerup_handler(ev) { if (logevents) log(ev.type, ev); // remove this touch point from the cache and reset the target's // background and border remove_event(ev); update_background(ev); ev.target.style.border = "1px solid black"; } application ui the application uses <
div> elements for the touch areas and provides buttons to enable logging and to clear the log.
... <body onload="init();" style="touch-action:none"> <
div id="target1"> tap, hold or swipe me 1</
div> <
div id="target2"> tap, hold or swipe me 2</
div> <
div id="target3"> tap, hold or swipe me 3</
div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
Pinch zoom gestures - Web APIs
define touch target the application uses <
div> to define the pointers' target areas.
... <style>
div { margin: 0em; padding: 2em; } #target { background: white; border: 1px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases.
...ndler(ev) { log(ev.type, ev); // remove this pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <
div> element for the touch area and provides buttons to enable logging and to clear the log.
... <body onload="init();" style="touch-action:none"> <
div id="target">touch and hold with 2 pointers, then pinch in or out.<br/> the background color will change to pink if the pinch is opening (zoom in) or changes to lightblue if the pinch is closing (zoom out).</
div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> </body> miscellaneous functions these functions support the application but aren't directly involved in the event flow.
ResizeObserver - Web APIs
examples in the resize-observer-text.html (see source) example, we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <
div> to change width.
...if it is turned off, the text will not change in response to the <
div>'s width changing.
... the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const
divelem = document.queryselector('body >
div'); const slider = document.queryselector('input[type="range"]'); const checkbox = document.queryselector('input[type="checkbox"]');
divelem.style.width = '600px'; slider.addeventlistener('input', () => {
divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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); 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.
Multi-touch interaction - Web APIs
define touch targets the application uses <
div> elements to represent four touch areas.
... <style>
div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1px solid black; } #target2 { background: white; border: 1px solid black; } #target3 { background: white; border: 1px solid black; } #target4 { background: white; border: 1px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired.
... function end_handler(ev) { ev.preventdefault(); if (logevents) log(ev.type, ev, false); if (ev.targettouches.length == 0) { // restore background and border to original values ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; } } application ui the application uses <
div> elements for the touch areas and provides buttons to enable logging and clear the log.
... <
div id="target1"> tap, hold or swipe me 1</
div> <
div id="target2"> tap, hold or swipe me 2</
div> <
div id="target3"> tap, hold or swipe me 3</
div> <
div id="target4"> tap, hold or swipe me 4</
div> <!-- ui for logging/bebugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <output></output> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
Matrix math for the web - Web APIs
first we'll set up a simple <
div> with some content.
...the <
div> has a transition set for the transform so that matrix is animated in making it easy to see what is being done.
... <
div id='move-me' class='transformable'> <h2>move me with a matrix</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </
div> finally, for each of the examples we will generate a 4x4 matrix, then update the <
div>'s style to have a transform applied to it, set to a matrix3d.
...below is the representation of a rotation about the x axis: let sin = math.sin; let cos = math.cos; // note: there is no perspective in these transformations, so a rotation // at this point will only appear to only shrink the
div let a = math.pi * 0.3; //rotation amount in radians // rotate around z axis let rotatezmatrix = [ cos(a), -sin(a), 0, 0, sin(a), cos(a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ]; view on jsfiddle here are a set of functions that return rotation matrices for rotating around each of the three axes.
A simple RTCDataChannel sample - Web APIs
this <
div> will be the first peer in the channel.
... <
div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </
div> finally, there's the little box into which we'll insert the messages.
... this <
div> block will be the second peer.
... <
div class="messagebox" id="receivebox"> <p>messages received:</p> </
div> the javascript code while you can just look at the code itself on github, below we'll review the parts of the code that do the heavy lifting.
Using the aria-describedby attribute - Accessibility
<
div role="application" aria-labelledby="calendar" aria-describedby="info"> <h1 id="calendar">calendar</h1> <p id="info"> this calendar shows the game schedule for the boston red sox.
... </p> <
div role="grid"> ...
... </
div> </
div> example 2: a close button in the example below, a link that functions as a 'close' button on a dialog is described elsewhere in the document.
... <
div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</
div> working examples: checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
ARIA: cell role - Accessibility
<
div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </
div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
... examples <
div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <
div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</
div> <
div role="rowgroup"> <
div role="row"> <span role="columnheader" aria-sort="none" aria-rowindex="1">aria role</span> <span role="columnheader" aria-sort="none" aria-rowin...
...dex="1">semantic element</span> </
div> </
div> <
div role="rowgroup"> <
div role="row"> <span role="cell" aria-rowindex="11">header</span> <span role="cell" aria-rowindex="11">h1</span> </
div> <
div role="row"> <span role="cell" aria-rowindex="16">header</span> <span role="cell" aria-rowindex="16">h6</span> </
div> <
div role="row"> <span role="cell" aria-rowindex="18">rowgroup</span> <span role="cell" aria-rowindex="18">thead</span> </
div> <
div role="row"> <span role="cell" aria-rowindex="24">term</span> <span role="cell" aria-rowindex="24">dt</span> </
div> </
div> </
div> the above is a non-semantic aria table with five of 81 rows present in the dom: one within a table header and four rows within the ta...
...if no cells spanned more than one row or column, the aria-rowindex could have been placed on the row rather than the row's in
dividual cells.
ARIA: form role - Accessibility
<
div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </
div> this is a form that collects and saves a user's contact information.
... 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> <te...
...xtarea id="comment" name="comment"></textarea> <input value="comment" type="submit"> </
div> it is recommended to use <form> instead.
... using role="form" <
div role="form" id="gift-cards" aria-label="purchase a gift card"> <!-- form content --> </
div> redundant descriptions screen readers will announce the type of role the landmark is.
ARIA: rowgroup role - Accessibility
<
div role="table" aria-label="populations" aria-describedby="country_population_desc"> <
div id="country_population_desc">world populations by country</
div> <
div role="rowgroup"> <
div role="row"> <span role="columnheader" aria-sort="descending">country</span> <span role="columnheader"aria-sort="none">population</span> </
div> </
div> <
div role="rowgroup"> <
div role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </
div> <
div role="row"> <span role="cell">france</span> <span ...
...role="cell">67 million</span> </
div> </
div> </
div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
... examples <
div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <
div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</
div> <
div role="rowgroup"> <
div role="row"> <span role="columnheader" aria-sort="none">aria role</span> <span role="columnheader" aria-sort="none">semantic element</span> ...
... </
div> </
div> <
div role="rowgroup"> <
div role="row" aria-rowindex="11"> <span role="cell">header</span> <span role="cell">h1</span> </
div> <
div role="row" aria-rowindex="16"> <span role="cell">header</span> <span role="cell">h6</span> </
div> <
div role="row" aria-rowindex="18"> <span role="cell">rowgroup</span> <span role="cell">thead</span> </
div> <
div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </
div> </
div> </
div> the above is a non-semantic aria table with a table header and table body, with five of 81 rows present in the dom: one within a table header and four rows within the table body.
ARIA: dialog role - Accessibility
<
div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </
div> description marking up a dialog element with the dialog role helps assistive technology identify the dialog's conten...
...this approach is shown in the code snippet below: <
div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </
div> keep in mind that a dialog's title and description text do not have to be focusable in order to be perceived by scree...
... examples a dialog containing a form <
div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">subscription form</h2> <p id="dialog1desc">we will not share this information with third parties.</p> <form> <p> <label for="firstname">first name</label> <input id="firstname" type="text" /> </p> <p> <label for="lastname">last name</label> <input ...
...id="lastname" type="text"/> </p> <p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input type="submit" value="save information"/> </p> </form> </
div> working examples: jquery-ui dialog notes note: while it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate to that content using their screen reader's virtual cursor.
Alerts - Accessibility
below is example javascript code which could be inserted above the closing “head” tag: <script type="application/javascript"> function removeoldalert() { var oldalert = document.getelementbyid("alert"); if (oldalert){ document.body.removechild(oldalert); } } function addalert(amsg) { removeoldalert(); var newalert = document.createelement("
div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var msg = document.createtextnode(amsg); newalert.appendchild(msg); document.body.appendchild(newalert); } function checkvalidity(aid, asearchterm, amsg) { var elem = document.getelementbyid(aid); var invalid = (elem.value.indexof(asearchterm) < 0); if (invalid) { elem.setattribute("a...
... next, the function creates a
div element to hold the alert text.
... the text is added to the
div element, and the
div element is added to the document.
... the moment this happens, firefox will fire an “alert” event to assistive technologies when this
div appears.
-moz-image-rect - CSS: Cascading Style Sheets
examples this example loads an image and uses it in four segments to draw the firefox logo in four <
div> blocks.
... clicking on their container causes the four segments to rotate around by swapping the background-image property values among the four <
div> blocks.
...ern: #box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <
div id="container" onclick="rotate()"> <
div id="box1" style="left:0px;top:0px;">top left</
div> <
div id="box2" style="left:133px;top:0px;">top right</
div> <
div id="box3" style="left:0px;top:136px;">bottom left</
div> <
div id="box4" style="left:133px;top:136px;">bottom right</
div> </
div> this places the four segments of our image in a two-by-two box grid.
... these four segments are all contained within a larger <
div> block whose primary purpose is to receive click events and dispatch them to our javascript code.
:empty - CSS: Cascading Style Sheets
/* selects any <
div> that contains no content */
div:empty { background: lime; } syntax :empty examples html <
div class="box"><!-- i will be lime.
... --></
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.
... --></p> </
div> css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
align-self — controls alignment of an in
dividual flex item on the cross axis.
...you can change the value of align-items or change the values of align-self on the in
dividual items to see how this works.
... aligning content on the cross axis — the align-content property so far we have been aligning the items, or an in
dividual item inside the area defined by the flex-container.
...however it is possible to do some in
dividual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.
animation-timing-function - CSS: Cascading Style Sheets
n-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end); /* multiple animations */ animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); /* global values */ animation-timing-function: inherit; animation-timing-function: initial; animation-timing-function: unset; timing functions may be specified on in
dividual keyframes in a @keyframes rule.
...the step timing functions
divides the input time into a specified number of intervals that are equal in length.
...>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <
div class="parent"> <
div class="ease">ease</
div> <
div class="easein">ease-in</
div> <
div class="easeout">ease-out</
div> <
div class="easeinout">ease-in-out</
div> <
div class="linear">linear</
div> <
div class="cb">cubic-bezier(0.2,-2,0.8,2)</
div> </
div> .parent >
div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom:...
...or: yellow; border: 1px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-in; } .easeout { animation-timing-function: ease-out; } .easeinout { animation-timing-function: ease-in-out; } .linear { animation-timing-function: linear; } .cb { animation-timing-function: cubic-bezier(0.2,-2,0.8,2); } step examples <
div class="parent"> <
div class="jump-start">jump-start</
div> <
div class="jump-end">jump-end</
div> <
div class="jump-both">jump-both</
div> <
div class="jump-none">jump-none</
div> <
div class="start">start</
div> <
div class="end">end</
div> <
div class="step-start">step-start</
div> <
div class="step-end">step-end</
div> </
div> .parent >
div[class] { animation-name: changeme; animation-...
animation - CSS: Cascading Style Sheets
/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <
div class="grid"> <
div class="col"> <
div class="note"> given the following animation: <pre>@keyframes slidein { from { transform: scalex(0); } to { transform: scalex(1); } }</pre> </
div> <
div class="row"> <
div class="cell"> <button class="play" title="play"></button> </
div> <
div class="cell flx"> <
div class="overlay">animation: 3s ease...
...-in 1s 2 reverse both paused slidein;</
div> <
div class="animation a1"></
div> </
div> </
div> <
div class="row"> <
div class="cell"> <button class="pause" title="pause"></button> </
div> <
div class="cell flx"> <
div class="overlay">animation: 3s linear 1s slidein;</
div> <
div class="animation a2"></
div> </
div> </
div> <
div class="row"> <
div class="cell"> <button class="pause" title="pause"></button> </
div> <
div class="cell flx"> <
div class="overlay">animation: 3s slidein;</
div> <
div class="animation a3"></
div> </
div> </
div> </
div> </
div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { wid...
... each in
dividual animation is specified as: zero or one occurrences of the following values: <single-transition-timing-function> <single-animation-iteration-count> <single-animation-direction> <single-animation-fill-mode> <single-animation-play-state> an optional name for the animation, which may be none, a <custom-ident>, or a <string> zero, one, or two <time> values the order ...
...0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cylon eye <
div class="view_port"> <
div class="polling_message"> listening for dispatches </
div> <
div class="cylon_eye"></
div> </
div> .polling_message { color: white; float: left; margin-right: 2%; } .view_port { background-color: black; height: 25px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0...
border-color - CSS: Cascading Style Sheets
each side can be set in
dividually using border-top-color, border-right-color, border-bottom-color, and border-left-color; or using the writing mode-aware border-block-start-color, border-block-end-color, border-inline-start-color, and border-inline-end-color.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples complete border-color usage html <
div id="justone"> <p><code>border-color: red;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: red;</code></li> <li><code>border-left-color: red;</code></li> </ul> </
div> <
div id="horzvert"> <p><code>border-color: gold red;</code> is equivalent to</p> <ul><li><code>border-to...
...p-color: gold;</code></li> <li><code>border-right-color: red;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: red;</code></li> </ul> </
div> <
div id="topvertbott"> <p><code>border-color: red cyan gold;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: gold;</code></li> <li><code>border-left-color: cyan;</code></li> </ul> </
div> <
div id="trbl"> <p><code>border-color: red cyan black gold;</code> is equivalent to</p> <ul><li><code>border-top-color: red;</code></li> <li><code>border-right-color: cyan;</code></li> <li><code>border-bottom-color: black;</code></li> <li><code>border-left-color: gold;</code></...
...li> </ul> </
div> css #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.
box-pack - CSS: Cascading Style Sheets
center the box packs contents in the center,
dividing any extra space equally between the start and the end.
... justify the space is
divided evenly in-between each child, with none of the extra space placed before the first child or after the last child.
... formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples
div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are centered horizontally */ width: 300px; /* children should be oriented vertically */ -moz-box-orient: vertical; /* mozill...
...a */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ }
div.example p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } <
div class="example"> <p>i will be second from the bottom of
div.example, centered horizontally.</p> <p>i will be on the bottom of
div.example, centered horizontally.</p> </
div> specifications not part of any standard.
clear - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | left | right | both | inline-start | inline-end examples clear: left html <
div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </
div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right html <
div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="right">this paragraph clears right.</p> </
div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both html <
div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...suspendisse eget dolor.</p> <p class="both">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.
<easing-function> - CSS: Cascading Style Sheets
the steps() class of easing functions the steps() functional notation defines a step function
dividing the domain of output values in equidistant steps.this subclass of step functions are sometimes also called staircase functions.
... html <
div> <
div></
div> </
div> <ul> <li> <button class="animation-button">start animation</button> </li> <li> <label for="easing-select">choose an easing function:</label> <select id="easing-select"> <option selected>linear</option> <option>ease</option> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezie...
...r(0.1, -0.6, 0.2, 0)</option> <option>cubic-bezier(0, 1.1, 0.8, 4)</option> <option>steps(5, end)</option> <option>steps(3, start)</option> <option>steps(4)</option> </select> </li> </ul> css body >
div { position: relative; height: 100px; }
div >
div { position: absolute; width: 50px; height: 50px; background-color: blue; background-image: radial-gradient(circle at 10px 10px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } javascript const selectelem = document.queryselector('select'); const start...
...btn = document.queryselector('button'); const
divelem = document.queryselector('
div >
div'); startbtn.addeventlistener('click', () => { if(startbtn.textcontent === 'start animation') {
divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation';
divelem.style.animationtimingfunction = selectelem.value; } else {
divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => {
divelem.style.animationtimingfunction = selectelem.value; }); result cubic-bezier() function examples these cubic bézier curves are valid for use in css: /* the canonical bézier curve with four <number> in the [0,1] range.
element() - CSS: Cascading Style Sheets
a somewhat realistic example this example uses a hidden <
div> as a background.
... <
div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </
div> <
div style="overflow:hidden; height:0;"> <
div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">this text is part of the background.
... cool, huh?</p> </
div> </
div> the <
div> element with the id "mybackground1" is used as the background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!".
... <
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.
flex - CSS: Cascading Style Sheets
to see the effect of these values, try resizing the flex containers below: <
div class="flex-container"> <
div class="item auto">auto</
div> <
div class="item auto">auto</
div> <
div class="item auto">auto</
div> </
div> <
div class="flex-container"> <
div class="item auto">auto</
div> <
div class="item initial">initial</
div> <
div class="item initial">initial</
div> </
div> <
div class="flex-container"> <
div class="item auto">auto</
div> <
div class="item auto">auto</
div> ...
... <
div class="item none">none</
div> </
div> <
div class="flex-container"> <
div class="item initial">initial</
div> <
div class="item none">none</
div> <
div class="item none">none</
div> </
div> <
div class="flex-container"> <
div class="item four">4</
div> <
div class="item two">2</
div> <
div class="item one">1</
div> </
div> * { box-sizing: border-box; } .flex-container { background-color: #f4f7f8; resize: horizontal; overflow: hidden; display: flex; margin: 1em; } .item { margin: 1em; padding: 0.5em; width: 110px; min-width: 0; background-color: #1b5385; color: white; font-family: monospace; font-size: 13px; } .initial { flex: initial; } .auto { flex: auto; } .none { flex: none; } .four { flex: 4; } .two { flex: 2; } .one { flex: 1; } by ...
...| <'flex-basis'> ] examples setting flex: auto html <
div id="flex-container"> <
div class="flex-item" id="flex">flex box (click to toggle raw box)</
div> <
div class="raw-item" id="raw">raw box</
div> </
div> css #flex-container { display: flex; flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw...
..."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.
font-weight - CSS: Cascading Style Sheets
html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</label> </header> <
div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </
div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { ...
...hem as a single component">[1,1000]> examples setting font weights html <p> alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought alice "without pictures or conversations?" </p> <
div>i'm heavy<br/> <span>i'm lighter</span> </
div> css /* set paragraph text to be bold.
... */ p { font-weight: bold; } /* set
div text to two steps heavier than normal but less than a standard bold.
... */
div { font-weight: 600; } /* set span text to be one step lighter than its parent.
<gradient> - CSS: Cascading Style Sheets
<
div class="linear-gradient">linear gradient</
div>
div { width: 240px; height: 80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <
div class="radial-gradient">radial gradient</
div>
div { width: 240px; height: 80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <
div class="linear-repeat">repeating linear gradient</
div> <br> <
div class="radial-repeat">repeating radial gradient</
div>
div { width: 240px; height: 80px; } .linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
... <
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.
max-block-size - CSS: Cascading Style Sheets
html the html simply establishes the two <
div> blocks that will be presented with their writing-mode set using the classes horizontal or vertical.
... <p>writing mode <code>horizontal-tb</code> (the default):</p> <
div class="standard-box horizontal"> call me ishmael.
...</
div> <p>writing mode <code>vertical-rl</code>:</p> <
div class="standard-box vertical"> call me ishmael.
...</
div> css the css defines three classes.
minmax() - CSS: Cascading Style Sheets
) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container >
div { background-color: #8ca0ff; padding: 5px; } html <
div id="container"> <
div> item as wide as the content, but at most 300 pixels.
... </
div> <
div> item with flexible width but a minimum of 200 pixels.
... </
div> <
div> inflexible item of 150 pixels width.
... </
div> </
div> result specifications specification status comment css grid layoutthe definition of 'minmax()' in that specification.
perspective - CSS: Cascading Style Sheets
<table> <tbody> <tr> <th><code>perspective: 250px;</code> </th> <th><code>perspective: 350px;</code> </th> </tr> <tr> <td> <
div class="container"> <
div class="cube pers250"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> <td> <
div class="contain...
...er"> <
div class="cube pers350"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> </tr> <tr> <th><code>perspective: 500px;</code> </th> <th><code>perspective: 650px;</code> </th> </tr> <tr> <td> <
div class="container"> <
div class="cube pers500"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> ...
...<
div class="face bottom">6</
div> </
div> </
div> </td> <td> <
div class="container"> <
div class="cube pers650"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> </td> </tr> </tbody> </table> css the css establishes classes that can be used to set the perspective to different distances.
... /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } /* define the container
div, the cube
div, and a generic face */ .container { width: 200px; height: 200px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /*...
Rich-Text Editing in Mozilla - Developer guides
similarly, setting contenteditable to "true" allows you to make in
dividual elements of a document editable.
...lid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <
div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title 5 <h5></option> <option va...
.../option> <option value="blue">blue</option> <option value="green">green</option> <option value="black">black</option> </select> <select onchange="formatdoc('backcolor',this[this.selectedindex].value);this.selectedindex=0;"> <option class="heading" selected>- background -</option> <option value="red">red</option> <option value="green">green</option> <option value="black">black</option> </select> </
div> <
div id="toolbar2"> <img class="intlink" title="clean" onclick="if(validatemode()&&confirm('are you sure?')){odoc.innerhtml=sdeftxt};" src="data:image/gif;base64,r0lgodlhfgawaiqbad04ktrlyzfrjlldzl9vj1dusy14wyodhpwibbsvfy6o7ioxw5qbms+wubcztca0ccs4kddqjdtltmrl1o3yitha7opcsd/f4pfvrvdv8pv5xv///////////////////yh5baekab8alaaaaaawabyaaav84ceozgmeakqubmteyzk547qobcfwtm/jgshq4rhmloxfiehqqsawr+z4iayaj0ke...
..." src="data:image/gif;base64,r0lgodlhfgawaiquad04ktrly2txqf9vj414wzwibxmorpqbmpgjudclfaezxsa0cb/i1+3yitha7prkiphvbups+/fvrvv8/f///////////////////////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </
div> <
div id="textbox" contenteditable="true"><p>lorem ipsum</p></
div> <p id="editmode"><input type="checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page,...
Using HTML sections and outlines - Developer guides
they are intended to enhance the limited semantics of earlier versions of html, which included only the <
div> tag as a generic mechanism for grouping related content.
... for example, <
div class="navigation"> does not suggest any meaning about its content to a browser; only a human reading the html source can
divine the meaning of a class like navigation.
...so don't simply swap out an existing tangle of <
div> elements for a bunch of <section> elements.
...a book, for example, may be
divided up into sections with related articles.
User input and controls - Developer guides
<
div draggable="true" ondragstart="event.datatransfer.setdata('text/plain', 'this text may be dragged')">
this text <strong>may</strong> be dragged.
...
</
div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a listener for the dragstart event and set the drag data within this listener note: you can find more information in the mdn drag & drop documentation.
... <
div contenteditable="true">
this text can be edited by the user.
... </
div> note: compatibility information, examples and other resources can be found in the content editable guide.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide
diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: "honorific-prefix" the prefix or title, such as "mrs.", "mr.", "miss", "ms.", "dr.", or "mlle.".
... "address-line1", "address-line2", "address-line3" each in
dividual line of the street address.
... examples <
div> <label for="cc-number">enter your credit card number</label> <input name="cc-number" id="cc-number" autocomplete="off"> </
div> administrative levels in addresses the four administrative level fields (address-level1 through address-level4) describe the address in terms of increasing levels of precision within the country in which the address is located.
... address-level1 always represents the broadest administrative
division; it is the least-specific portion of the address short of the country name.
itemscope - HTML: Hypertext Markup Language
<
div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </
div> structured data the following table shows the structured data from the preceding example.
... <
div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d063c361c1.jpg" width="50" height="50" /> <p> by <span itemprop="author" itemscope itemtype="http://schema.org/person"> <span itemprop="name">carol smith</span> </span> </p> <p> published: <time datetime...
... </p> directions: <br> <
div itemprop="recipeinstructions"> 1.
... </
div> </
div> results html the following is an example rendering of the preceding code example.
Details of the object model - JavaScript
for example, victoria could be an instance of the employee class, representing a particular in
dividual as an employee.
...can add or remove properties dynamically to in
dividual objects or to the entire set of objects.
...in these languages, an instance is an in
dividual instantiation of a class and is fundamentally different from a class.
... in
dividual objects = jim, sally, mark, fred, jane, etc.
Authoring MathML - MathML
for example the following function verifies the mathml support by testing the mspace element (you may replace mspace with mpadded): function hasmathmlsupport() { var
div = document.createelement("
div"), box;
div.innerhtml = "<math><mspace height='23px' width='77px'/></math>"; document.body.appendchild(
div); box =
div.firstchild.firstchild.getboundingclientrect(); document.body.removechild(
div); return math.abs(box.height - 23) <= 1 && math.abs(box.width - 77) <= 1; } alternatively, the following ua string sniffing will allow to detect the rendering en...
... <
div class="latex"> \documentclass[12pt]{article} \begin{document} \title{latexml example} \maketitle \begin{abstract} this is a sample latexml document.
... \end{abstract} \section{first section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $$ \end{document} </
div> ...
... original document information author(s): frédéric wang other contributors: florian scholz copyright information: portions of this content are © 2010 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
dx - SVG: Scalable Vector Graphics
if there are multiple values, dx defines a shift along the x-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dx defines a shift along the x-axis for each in
dividual glyph relative to the preceding glyph.
dy - SVG: Scalable Vector Graphics
if there are multiple values, dy defines a shift along the y-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each in
dividual glyph relative to the preceding glyph.
... if there are multiple values, dy defines a shift along the y-axis for each in
dividual glyph relative to the preceding glyph.
Using templates and slots - Web Components
root design the <element-details> element in such a way that, when used in documents, it is rendered from composing the element’s content together with content from its shadow root—that is, pieces of the element’s content are used to fill in named slots in its shadow root note that it is technically possible to use <slot> element without a <template> element, e.g., within say a regular <
div> element, and still take advantage of the place-holder features of <slot> for shadow dom content, and doing so may indeed avoid the small trouble of needing to first access the template element's content property (and clone it).
...in addition, <template> can have items directly added to it, like <td>, which would disappear when added to a <
div>.
...er-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <
div class="attributes"> <h4><span>attributes</span></h4> <slot name="attributes"><p>none</p></slot> </
div> </details> <hr> </template> that <template> element has several features: the <template> has a <style> element with a set of css styles that are scoped just to the document fragment the <template> creates.
... .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <
div class="attributes"> <h4><span>attributes</span></h4> <slot name="attributes"><p>none</p></slot> </
div> </details> <hr> </template> <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effect of composing d...
dev/panel - Archive of obsolete content
in
dividual built-in tools, such as the javascript debugger or the web console, occupy "panels" in the toolbox.
...structor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <
div id="content"></
div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
... to use volcan.js, you can just include it from your panel's html like this: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <
div id = "content"></
div> </body> <script src="./my-panel.js"></script> </html> here's a script that uses volcan.js to get the selected tab and display its url: // my-panel.js var content = document.getelementbyid("content"); window.addeventlistener("message", function(event) { var debuggee = event.ports[0]; volcan.connect(debuggee).
HTML to DOM - Archive of obsolete content
body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than chrome-level) <
div> in the current page, then parsing the html fragment and attaching that fragment to the <
div>.
... the <
div> is returned, and it is never actually appended to the current page.
... the returned <body> object is of type element here is a sample that counts the number of paragraphs in a string: var dompars = htmlparser('<p>foo</p><p>bar</p>'); alert(dompars.getelementsbytagname('p').length); if htmlparser() returns the element name html (instead of body), you have all document object with its complete functions list, therefore you can retrieve info within
div tag like this: var dompars = htmlparser("<
div id='userinfo'>john was a mediocre programmer, but people liked him <strong>anyway</strong>.</
div>"); alert(dompars.getelementbyid('userinfo').innerhtml); to parse a complete html page, load it into an iframe whose type is content (not chrome).
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
keeping it complex if you're developing a really complex extension with lots of xpcom components, you'll probably want to
divide your code up into smaller modules.
... kinda, sorta complex extensions for a moderately complex extension, it's probably enough just to sub
divide the code into a single level of modules.
... = @srcdir@ include $(depth)/config/autoconf.mk module = myextension dirs = base advanced xpi_name = myextension install_extension_id = myextension@mycompany.com xpi_pkgname = myextension dist_files = install.rdf include $(topsrcdir)/config/rules.mk seriously complex extensions at some point, even a single module may grow to the point where you want to
divide it further into submodules.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
these conditions will vary from one license to the next, but the open source definition stipulates the following minimum conditions: the integrity of the author’s source code must be preserved; no discrimination may be made against in
dividuals or organizations; no discrimination may be made based on field of endeavor; no additional licensing can be required when redistributing; license must not be specific to a product; license must not interfere with other software.
... the “no discrimination may be made against in
dividuals or organizations” rule means that you cannot prohibit it from any particular country.
...and you don’t want each person using that code to be forced to apply the patch in
dividually—that would be a lot of duplicated effort.
The Box Model - Archive of obsolete content
boxes a xul box is very similar to an html
div.
... it's an invisible rectangular container with no styling at all (
divs may have some default styling, though).
... flexibility an html
div is as big as its contents unless you override its dimensions using css.
JXON - Archive of obsolete content
*/ /* element.prototype.appendjxon = function (oobjtree) { loadobjtree(document, this, oobjtree); return this; }; */ example imagine you want to populate the following htmlelement through json: <
div id="form_container"></
div> then, the following code: document.getelementbyid("form_container").appendjxon({ "form": { "script": { "@type": "text/javascript", "keyvalue": "\n function numbersonly (otocheckfield, okeyevent) {\n return okeyevent.charcode === 0 || /\\d/.test(string.fromcharcode(okeyevent.charcode));\n }\n" }, "input": [{ "@type": "hidden", "...
...press": "return numbersonly(this, event);", "@onpaste": "return false;" } } }] }, "p": { "input": { "@type": "submit", "@value": "purchase!" } }, "@action": "https://secure-test.worldpay.com/wcc/purchase", "@name": "buyform", "@method": "post" } }); will populate the previous element in the following way: <
div id="form_container"> <form action="https://secure-test.worldpay.com/wcc/purchase" name="buyform" method="post"> <script type="text/javascript"> function numbersonly(otocheckfield, okeyevent) { return okeyevent.charcode === 0 || /\d/.test(string.fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidde...
...="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> <tr> <th style="text-align: right;">quantity:</th> <td> <input type="text" name="myinput" onkeypress="return numbersonly(this, event);" onpaste="return false;" /> </td> </tr> </table> <p> <input type="submit" value="purchase!" /> </p> </form> </
div> other examples example #1: how to use jxon to create an html document instead of an xml document: /* the structure of my document */ var omyhtmlstruct = { "html": { "head": { "meta": { "@http-equiv": "content-type", "@content": "text/html; charset=utf-8" }, "title": "my html document", "script": { "@type": "text/javascript", "keyva...
LIR - Archive of obsolete content
double equality 74 ltd integer double less-than 75 gtd integer double greater-than 76 led integer double less-than-or-equal 77 ged integer double greater-than-or-equal 78 negi integer negate int 79 addi integer add int 80 subi integer subtract int 81 muli integer multiply int 82
divi integer i386/64
divide int 83 modi integer modulo int - lir_modi is a hack.
... the operand is the result of a lir_
divi because on i386/x64
div and mod results are computed by the same instruction.
...shq quad 64 bit left shift quad,2nd operand is an int 97 rshq quad 64 bit right shift quad, 2nd operand is an int 98 rshuq quad 64 bit right shift unsigned quad; 2nd operand is an int 99 negd double negate double 100 addd double add double 101 subd double subtract double 102 muld double multiply double 103
divd double
divide double 104 modd double modulo double lir_modd is just a place-holder opcode, ie.
-ms-filter - Archive of obsolete content
<
div id="filterfrom" style="position: absolute; width: 200px; height: 250px; background-color: white; filter: revealtrans()"> <img id="imagefrom" style="position: absolute; top: 20px; left: 20px;" src="sphere.jpg" alt="sphere"> <
div id="filterto" style="positi...
...on: absolute; width: 200px; height: 250px; top: 20px; left: 20px; background: white; visibility: hidden;"> </
div> </
div> <script type="text/javascript"> let filterimg = document.queryselector('#filterfrom'); filterimg.addeventlistener('click', dofilter); function dofilter () { filterfrom.filters.item(0).apply(); // 12 is the dissolve filter.
... html <
div class="gradient horizontal"></
div> <
div class="gradient vertical"></
div> css html, body { overflow-x: hidden; max-width: 100vw; } .gradient { width: 100vw; height: 60px; height: 50vh; } .gradient.horizontal { -ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=1)'; background-image: linear-gradient(to right, #ff...
-ms-scrollbar-arrow-color - Archive of obsolete content
div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <
div class="bluescrollbox"> lorem ipsum dolor sit ame...
... </
div> <
div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> </body> the following image shows the result: specifications not part of any specification.
-ms-scrollbar-face-color - Archive of obsolete content
div { width: 150px; height: 150px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10px; } .bluescrollbox { scrollbar-face-color: blue; scrollbar-arrow-color: blue; } .greenscrollbox { scrollbar-face-color: green; scrollbar-arrow-color: green; } <body> <
div class="bluescrollbox"> lorem ipsum dolor sit ame...
... </
div> <
div class="greenscrollbox"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
... </
div> </body> this image shows the result: specifications not part of any specification.
Audio for Web games - Game development
if you space your in
dividual sounds by at least 500ms then using the timeupdate event (which fires every 250ms) should be sufficient.
... loading your tracks with the web audio api you can load separate tracks and loops in
dividually using xmlhttprequest or the fetch api, which means you can load them synchronously or in parallel.
... let's create our audio context: // for cross browser compatibility const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); now let's select all the <li> elements; later we can harness these elements to give us access to the track file path and each in
dividual play button.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using thei...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <
div class="wrapper"> <
div class="item">item</
div> </
div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } <
div class="wrapper"> <
div class="item">item</
div> </
div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end]; grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
this "separation of concerns" provides for a better
division of labor and improved maintenance.
... 275 modern web apps composing, glossary, modern web apps see progressive web apps 276 modularity codingscripting, glossary the term modularity refers to the degree to which a system's components may be separated and recombined, it is also
division of a software package into logical units.
...the resource timing api is a javascript api that is able to capture timing information for each in
dividual resource that is fetched when a page is loaded.
What is accessibility? - Learn web development
people with disabilities are just as
diverse as people without disabilities, and so are their disabilities.
...importantly, though there is a lot of
diversity within clinical definitions of cognitive impairments, people with them experience a common set of functional problems.
...ontent in more than one way, such as by text-to-speech or by video; easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; consistent webpage layout and navigation; familiar elements, such as underlined links blue when not visited and purple when visited;
dividing processes into logical, essential steps with progress indicators; website authentication as easy as possible without compromising security; and making forms easy to complete, such as with clear error messages and simple error recovery.
Advanced styling effects - Learn web development
first, background-blend-mode — here we'll show a couple of simple <
div>s, so you can compare the original with the blended version: <
div> </
div> <
div class="multiply"> </
div> now some css — we are adding to the <
div> one background image and a green background color:
div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px...
...here we'll present the same two <
div>s, but each one is now sat on top of a simple <
div> with a purple background, to show how the elements will blend together: <article> no mix blend mode <
div> </
div> <
div> </
div> </article> <article> multiply mix <
div class="multiply-mix"> </
div> <
div> </
div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; }
div { width: 250px; height: 130px; padding: 10px; margin: 10px; } art...
...icle
div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article
div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the two background images, but also the color from the <
div> below it too.
Type, class, and ID selectors - Learn web development
target an element if it has more than one class applied you can apply multiple classes to an element and target them in
dividually, or only select the element when all of the classes in the selector are present.
... in the example below we have a <
div> that contains a note.
...you'll see that the last <
div> doesn't get any styling applied, as it only has the danger class; it needs notebox as well to get anything applied.
Beginner's guide to media queries - Learn web development
<body> <
div class="wrapper"> <header> <nav> <ul> <li><a href="">about</a></li> <li><a href="">contact</a></li> <li><a href="">meet the team</a></li> <li><a href="">blog</a></li> </ul> </nav> </header> <main> <article> <
div class="content"> <h1>veggies!</h1> <p> ...
... </p> </
div> <aside class="related"> <p> ...
... </li> </ul> </aside> </main> <footer><p>©2019</p></footer> </
div> </body> this simple layout also works well on mobile.
Fundamental text and font styling - Learn web development
a simple sizing example when sizing your text, it is usually a good idea to set the base font-size of the document to 10 px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size
divided by 10, not 16.
... playable code <
div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px...
... solid #0095dd;"> p { } </textarea> <h2>output</h2> <
div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></
div> <
div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </
div> </
div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); const reset = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style'); const headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.
Styling links - Learn web development
playable code <
div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p></textarea> <h2>cs...
...s input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <
div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></
div> <
div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </
div> </
div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselec...
...the last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the in
dividual properties.
Styling lists - Learn web development
rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each in
dividual list item will have the same spacing between lines.
... playable code <
div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>first, light the candle.</li> <li>next, open the box.</li> <li>finally, place the three magic items in the box, in this exact order, to complete the spell: ...
... <ol> <li>the book of spells</li> <li>the shiny rod</li> <li>the goblin statue</li> </ol> </li> </ul></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <
div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></
div> <
div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </
div> </
div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcod...
How can we design for all types of users? - Learn web development
let's consider this html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <
div class="container"> <h1>this is our main heading <span class="subheading">this is our subheading</span> </h1> <p>[lengthly text that spans many lines]</p> </
div> </body> </html> we have a
div with class container.
... we can style the
div either to set its width (using the width property) or its maximum width so that it never gets too large (using the max-width property).
... if you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the max-width property to allow up to 70 characters per line and no more:
div.container { max-width:70em; } alternative content for images, audio, and video websites often include stuff besides plain text.
Example 1 - Learn web development
basic state html <
div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------...
...: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <
div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : i...
...er: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for active state open state html <
div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display ...
How to structure a web form - Learn web development
let's consider this example: <p>required fields are followed by <abbr title="required">*</abbr>.</p> <!-- so this: --> <
div> <label for="username">name:</label> <input id="username" type="text" name="username"> <label for="username"><abbr title="required" aria-label="required">*</abbr></label> </
div> <!-- would be better done like this: --> <
div> <label for="username"> <span>name:</span> <input id="username" type="text" name="username"> <abbr title="required" aria-label="required">*</abbr> </lab...
...el> </
div> <!-- but this is probably best: --> <
div> <label for="username">name: <abbr title="required" aria-label="required">*</abbr></label> <input id="username" type="text" name="username"> </
div> the paragraph at the top states a rule for required elements.
...<p> and <
div> elements are also commonly used.
Sending form data - Learn web development
consider the following form: <form action="http://www.foo.com" method="get"> <
div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </
div> <
div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </
div> <
div> <button>send my greetings</button> </
div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the brows...
... <form action="https://www.foo.com" method="post"> <
div> <label for="say">what greeting do you want to say?</label> <input name="say" id="say" value="hi"> </
div> <
div> <label for="to">who do you want to say it to?</label> <input name="to" id="to" value="mom"> </
div> <
div> <button>send my greetings</button> </
div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http r...
... for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <
div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </
div> <
div> <button>send the file</button> </
div> </form> note: servers can be configured with a size limit for files and http requests in order to prevent abuse.
Styling web forms - Learn web development
these problems can be
divided into three categories: the good some elements can be styled with few if any problems across platforms.
... <form> <h1>to: mozilla</h1> <
div id="from"> <label for="name">from:</label> <input type="text" id="name" name="user_name"> </
div> <
div id="reply"> <label for="mail">reply:</label> <input type="email" id="mail" name="user_email"> </
div> <
div id="message"> <label for="msg">your message:</label> <textarea id="msg" name="user_message"></textarea> </
div> <
div class="button"> <button type="su...
...bmit">send your message</button> </
div> </form> add the above code into the body of your html.
Adding vector graphics to the Web - Learn web development
moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image in
dividually.
... playable code <h2>live output</h2> <
div class="output" style="min-height: 50px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="b...
... </text> </svg> </textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code...
From object to iframe — other embedding technologies - Learn web development
a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in in
dividual html pages.
... playable code <h2>live output</h2> <
div class="output" style="min-height: 250px;"> </
div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> </textarea> <
div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solu...
...tion"> </
div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 's...
Index - Learn web development
103 css building blocks beginner, css, learn, building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to
dive a bit deeper.
...we have covered the necessary prerequisites so we can now
dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
...read on for more information on each in
dividual technology!
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <
div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
...{ for(var i = 0; i < articles.length; i++) { const article = document.createelement('article'); const heading = document.createelement('h2'); const link = document.createelement('a'); const img = document.createelement('img'); const para1 = document.createelement('p'); const para2 = document.createelement('p'); const clearfix = document.createelement('
div'); let current = articles[i]; console.log(current); link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + '...
... we gave our <
div> element a class of "clearfix", so we can easily apply clearing to it.
Introduction to the server side - Learn web development
perhaps the most significant benefit of server-side code is that it allows you to tailor website content for in
dividual users.
... server-side programming is very useful because it allows us to efficiently deliver information tailored for in
dividual users and thereby create a much better user experience.
... you should also understand that it is useful because it allows us to create websites that efficiently deliver information tailored for in
dividual users and have a good idea of some of the things you might be able to do when you're a server-side programmer.
Introduction to client-side frameworks - Learn web development
start learning ember angular angular is an open-source web application framework led by the angular team at google and by a community of in
dividuals and corporations.
...vue is not alone in this: using a framework improves team as well as in
dividual efficiency.
...just as frameworks empower you to quickly write client-side javascript applications, static site generators allow you a way to quickly create html files you would otherwise have written in
dividually.
React interactivity: Editing, filtering, conditional rendering - Learn web development
copy this block of code into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <
div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </
div> <
div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> ...
... <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </
div> </form> ); const viewtemplate = ( <
div classname="stack-small"> <
div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </
div> <
div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn...
...__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> </
div> </
div> ); we've now got the two different template structures — "edit" and "view" — defined inside two separate constants.
Getting started with Vue - Learn web development
in this article we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an in
dividual component, see how to run the project locally, and get it prepared to start building our example.
... let’s add a new <h1> inside <
div id="app">.
...add it like so: <template> <
div id="app"> <h1>to-do list</h1> </
div> </template> app.vue will now show our heading, as you'd expect.
Understanding client-side JavaScript frameworks - Learn web development
this article will walk you through putting the basic app component structure and styling in place, ready for in
dividual component definition and interactivity, which we'll add later.
...in this article, we'll look at a little bit of vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an in
dividual component, see how to run the project locally, and get it prepared to start building our example.
...creating our first vue component now it's time to
dive deeper into vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list.
Handling common JavaScript problems - Learn web development
you will have to read the libraries' in
dividual install pages for more information.
...whereas libraries are often usable for solving in
dividual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.
... note: again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's in
dividual documentation.
Deploying our app - Learn web development
if you want finer control over what you add, then use git add -p for an interactive process, or add in
dividual files using git add path/to/file.
...products like github, gitlab, etc., all support running tests against in
dividual commits.
...you’ll need to consider all these in
dividual aspects whilst you're working on your own projects.
mach
if it works, you can look at compiler warnings: $ ./mach warnings-list try running the program: $ ./mach run try running your program in a debugger: $ ./mach run --debug try running some tests: $ ./mach xpcshell-test services/common/tests/unit/ or run an in
dividual test: $ ./mach mochitest browser/base/content/test/general/browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-complete paths to tests.
... most mach bugs are bugs in in
dividual commands, not bugs in the core mach code.
... bugs for in
dividual commands should be filed against the component that command is related to.
Performance best practices for Firefox front-end engineers
here’s a simple example, cribbed from this blog post by paul rouget:
div1.style.margin = "200px"; // line 1 var height1 =
div1.clientheight; // line 2
div2.classlist.add("foobar"); // line 3 var height2 =
div2.clientheight; // line 4 dosomething(height1, height2); // line 5 at line 1, we’re setting some style information on a dom node that’s going to result in a reflow - but (at just line 1) it’s okay, because that reflow will happen aft...
...this means that gecko needs to synchronously calculate layout (and styles) using an uninterruptible reflow in order to answer the question that javascript is asking (“what is the clientheight of
div1?”).
...rom davidwalsh’s blog post: // create the fragment var frag = document.createdocumentfragment(); // create numerous list items, add to fragment for(var x = 0; x < 10; x++) { var li = document.createelement("li"); li.innerhtml = "list item " + x; frag.appendchild(li); } // mass-add the fragment nodes to the list listnode.appendchild(frag); the above is strictly cheaper than in
dividually adding each node to the dom.
Overview of Mozilla embedding APIs
through the service manager, in
dividual services can be loaded, unloaded and accessed.
...as such, access to in
dividual document frames is done via the domwindow interfaces.
...being reviewed interface definition: nsiwebbrowserpersist.idl nsiwebbrowserprint this interface allows printing of in
dividual (or a collection of) dom windows within a nswebbrowser component.
Getting from Content to Layout
to give a trivial example of when this might be necessary, consider: "<span>foo <
div></
div> bar</span>".
... separate frames are created for the pre and post-
div parts of the <span>.
... if the <
div> is removed, the frame construction code merges those frames by examining the parent frame, destroying the two frames created for the <span>, and creating one unified frame for the text content.
Translation phase
this is where the technical aspect of the process begins to
divide.
... projects the mozilla projects and their l10n workflows are
divided into these groups: mozilla applications, mozilla websites, and add-ons.
... mozilla engagement campaigns in
dividual campaigns created by mozilla to attract new contributors.
Mozilla Development Strategies
if you can
divide and conquer what you are working on into smaller chunks, you will find you'll get faster reviews.
... of course, not everything can be
divided up.
...cvs commit client.mak nmake -f client.mak original document information author(s): seth spitzer and alec flett last updated date: september 3, 2006 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Statistics API
gc work can be
divided into phases, such as marking or sweeping.
... the
division into phases is hierarchical, so a phase can be split into subphases.
... additionally, an incremental gc is
divided into a series of slices (the
division into slices is completely separate from the
division into phases; neither one is a refinment of the other).
Building the WebLock UI
because this step (particularly the overlay section) is so dependent on mozilla, the chapter is
divided up into a couple of different sections.
... in xul in
dividual <radio/> elements are contained within a parent element called <radiogroup/>.
...the separator that appears at the top of this snippet creates a little
divider between widgets like the kind you see in menus that
divide sets of functionality available there.
nsINavHistoryQueryOptions
in
dividual result nodes will be of type "uri".
...in
dividual result nodes will have type "visit".
... results_as_full_visit 2 this is identical to result_type_visit except that in
dividual result nodes will have type "fullvisit".
URLs - Plugins
mailto (electronic mail address) locates the internet mailing address of an in
dividual or service.
... news (usenet news) locates usenet news groups or in
dividual usenet articles.
... nntp (usenet news using nntp access) locates usenet news groups or in
dividual usenet articles; alternate to news.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
<
div onclick="do
divsandspans()"> click here to make the page do some allocations.
... </
div> <script> function makefactory(type) { return function factory(content) { var elt = document.createelement(type); elt.textcontent = content; return elt; }; } var
divfactory = makefactory('
div'); var spanfactory = makefactory('span'); function
divsandspans() { for (i = 0; i < 10; i++) { var
div =
divfactory('
div #' + i);
div.appendchild(spanfactory('span #' + i)); document.body.appendchild(
div); } } function do
divsandspans() {
divsandspans(); } </script> open the browser console (menu button > developer > browser console), and then evaluate the expression demotrackallocations() in the browser console.
...we will probably change this to be the line number within page.html, not the line number within the handler code.) the onclick handler calls do
divsandspans, which calls
divsandspans, which invokes closures of factory to do all the actual allocation.
Tutorial: Set a breakpoint - Firefox Developer Tools
save the following text to an html file: <
div onclick="report('the best
div');">click me!</
div> <
div onclick="report('another great
div');">or me!</
div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “web developer”, and then “browser content toolbox”.
...this runs the
div element’s onclick handler.
...when you click on the
div element, both debuggers’ breakpoints are hit, and both handlers run.
Migrating from Firebug - Firefox Developer Tools
the devtools' rules panel is a bit smarter and allows you to expand in
dividual shorthand properties by clicking the twisty besides them.
...this feature can globally be enabled via the break on mutate button, or in
dividually for each element and for different types of changes like attribute changes, content changes or element removal.
...it also allows you to toggle in
dividual style sheets.
Examine and edit HTML - Firefox Developer Tools
create new node create a new empty <
div> as the last child of the currently selected element.
... inserting new nodes there's a "+" icon at the top of the markup view: click this icon to insert an empty <
div> into the document as the last child of the currently selected element.
...however, it is enabled in places where it is not valid to insert a <
div>, such as <style> or <link>.
Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: 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(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here w...
...e have a <
div> element, and an event listener that fires the event handler code whenever the mouse moves.
... the event handler sets up an animation that animates the <
div> element to the position of the mouse pointer.
Animation.persist() - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: 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(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <...
...
div> element, and an event listener that fires the event handler code whenever the mouse moves.
... the event handler sets up an animation that animates the <
div> element to the position of the mouse pointer.
Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: 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(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here w...
...e have a <
div> element, and an event listener that fires the event handler code whenever the mouse moves.
... the event handler sets up an animation that animates the <
div> element to the position of the mouse pointer.
AudioNode - Web APIs
a filter like biquadfilternode or convolvernode), or volume control (like gainnode) <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><...
...="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
...ethod const analysernode = audioctx.createanalyser(); analysernode.fftsize = 2048; analysernode.maxdecibels = -25; analysernode.mindecibels = -60; analysernode.smoothingtimeconstant = 0.5; you are free to use either constructors or factory methods, or mix both, however there are advantages to using the constructors: all parameters can be set during construction time and don't need to be set in
dividually.
BaseAudioContext - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
... baseaudiocontext.createchannelsplitter() creates a channelsplitternode, which is used to access the in
dividual channels of an audio stream and process them separately.
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the result into a <
div> element.
...; } button { vertical-align: top; height: 1.5rem; } const channel = new broadcastchannel('example-channel'); const messagecontrol = document.queryselector('#message'); const broadcastmessagebutton = document.queryselector('#broadcast-message'); broadcastmessagebutton.addeventlistener('click', () => { channel.postmessage(messagecontrol.value); }) receiver 1 <h1>receiver 1</h1> <
div id="received"></
div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); receiver 2 <h1>receiver 2</h1> ...
...<
div id="received"></
div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; }); result specifications specification status html living standard living standard ...
Manipulating video using canvas - Web APIs
<!doctype html> <html> <head> <style> body { background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; }
div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <
div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </
div> <
div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canva...
...s> </
div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.
... line 4 computes the number of pixels in the image by
dividing the total size of the frame's image data by four.
Basic animations - Web APIs
yle> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <
div class="keypress hide"> <
div class="up" onclick="emit(38)">↑</
div> <
div class="right" onclick="emit(39)">→</
div> <
div class="left" onclick="emit(37)">←</
div> <
div class="down" onclick="emit(40)">↓</
div> </
div> <
div class="banner" id="selector"> <
div> time :<span id="time">0</span> </
div> <
div>lousyg...
...ames ©</
div> <
div> score :<span id="score">0</span> </
div> <
div class="touch off" onclick="touch(this)">touch</
div> </
div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; color: #fff; background: #3f51b5; line-height: 29px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 }
div#selector>
div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } ...
...to { opacity: 0 } } .keypress>
div { border: dashed 3px #fff; height: 48%; width: 48%; display: flex; align-content: center; justify-content: center; align-self: center; align-items: center; font-size: -webkit-xxx-large; font-weight: 900; color: #fff; transition: .5s; opacity: .1; border-radius: 7px } .keypress { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>
div:hover { opacity: 1 } .touch { background: #8bc34a ...
Document.createElementNS() - Web APIs
important namespace uris html http://www.w3.org/1999/xhtml svg http://www.w3.org/2000/svg mathml http://www.w3.org/1998/math/mathml xul http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul xbl http://www.mozilla.org/xbl example this creates a new <
div> element in the xhtml namespace and appends it to the vbox element.
...useful xul document, it does demonstrate the use of elements from two different namespaces within a single document: <?xml version="1.0"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="||working with elements||" onload="init()"> <script type="application/javascript"><![cdata[ let container; let new
div; let txtnode; function init(){ container = document.getelementbyid("containerbox"); new
div = document.createelementns("http://www.w3.org/1999/xhtml", "
div"); txtnode = document.createtextnode("this is text that was constructed dynamically with createelementns and createtextnode then inserted into the document using appendchild."); new
div.appendchild(txtnode); container.appendchi...
...ld(new
div); } ]]></script> <vbox id="containerbox" flex="1"> <html:
div> the script on this page will add dynamic content below: </html:
div> </vbox> </page> the example given above uses inline script which is not recommended in xhtml documents.
Document.getElementById() - Web APIs
example <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <
div id="parent-id"> <p>hello word1</p> <p id="test1">hello word2</p> <p>hello word3</p> <p>hello word4</p> </
div> <script> var parentdom = document.getelementbyid('parent-id'); var test1 = parentdom.getelementbyid('test1'); //throw error //uncaught typeerror: parentdom.getelementbyid is not a function </script> </body> </html...
...note that the id parameter is case-sensitive, so document.getelementbyid("main") will return null instead of the element <
div id="main"> because "m" and "m" are different for the purposes of this method.
...when creating an element and assigning it an id, you have to insert the element into the document tree with node.insertbefore() or a similar method before you can access it with getelementbyid(): var element = document.createelement('
div'); element.id = 'testqq'; var el = document.getelementbyid('testqq'); // el will be null!
Document.getElementsByTagName() - Web APIs
clicking the buttons uses getelementsbytagname() to count the descendant paragraph elements of a particular parent (either the document itself or one of two nested <
div> elements).
... <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>getelementsbytagname example</title> <script> function getallparaelems() { var allparas = document.getelementsbytagname('p'); var num = allparas.length; alert('there are ' + num + ' paragraph in this document'); } function
div1paraelems() { var
div1 = document.getelementbyid('
div1'); var
div1paras =
div1.getelementsbytagname('p'); var num =
div1paras.length; alert('there are ' + num + ' paragraph in #
div1'); } function
div2paraelems() { var
div2 = document.getelementbyid('
div2'); var
div2paras =
div2.getelementsbytagname('p'); var num =
div2paras.length; alert('there are ' + num + ' paragraph in #
div2'); } </script> </hea...
...d> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <
div id="
div1" style="border: solid blue 3px"> <p>some
div1 text</p> <p>some
div1 text</p> <p>some
div1 text</p> <
div id="
div2" style="border: solid red 3px"> <p>some
div2 text</p> <p>some
div2 text</p> </
div> </
div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="
div1paraelems();"> show all p elements in
div1 element</button><br /> <button onclick="
div2paraelems();"> show all p elements in
div2 element</button> </body> </html> notes when called on an html document, getelementsbytagname() lower-cases its argument before proceeding.
Document.mozSetImageElement() - Web APIs
example this example changes the background of a <
div> block each time the block is clicked by the user.
... <style type="text/css"> #mybox { background-image: -moz-element(#canvasbg); text-align: center; width: 400px; height: 400px; cursor: pointer; } </style> the css defined by the <style> block above is used by our <
div> to use an element with the id "canvasbg" as its background.
...r canvas = document.createelement("canvas"); canvas.setattribute("width", 100); canvas.setattribute("height", 100); var ctx = canvas.getcontext('2d'); ctx.fillstyle = "#" + c.tostring(16) + "0000"; ctx.fillrect(25, 25, 75, 75); c += 0x11; if (c > 0xff) { c = 0x00; } document.mozsetimageelement("canvasbg", canvas); } the code here is called each time the user clicks the <
div> element.
Document.querySelector() - Web APIs
as the backslash is also an escape character in javascript, if you are entering a literal string, you must escape it twice (once for the javascript string, and another time for queryselector()): <
div id="foo\bar"></
div> <
div id="foo:bar"></
div> <script> console.log('#foo\bar'); // "#fooar" (\b is the backspace control character) document.queryselector('#foo\bar'); // does not match anything console.log('#foo\\bar'); // "#foo\bar" console.log('#foo\\\\bar'); // "#foo\\bar" document.queryselector('#foo\\\\bar'); // match the first
div docu...
...ment.queryselector('#foo:bar'); // does not match anything document.queryselector('#foo\\:bar'); // match the second
div </script> examples finding the first element matching a class in this example, the first element in the document with the class "myclass" is returned: var el = document.queryselector(".myclass"); a more complex selector selectors can also be really powerful, as demonstrated in the following example.
... here, the first <input> element with the name "login" (<input name="login"/>) located inside a <
div> whose class is "user-panel main" (<
div class="user-panel main">) in the document is returned: var el = document.queryselector("
div.user-panel.main input[name='login']"); negation as all css selector strings are valid, you can also negate selectors: var el = document.queryselector("
div.user-panel:not(.main) input[name='login']"); this will select an input with a parent
div with the user-panel class but not the main class.
Introduction to the DOM - Web APIs
element inherits from the generic node interface, and together these two interfaces provide many of the methods and properties you use on in
dividual elements.
... <html> <head> <title>dom tests</title> <script> function setbodyattr(attr, value) { if (document.body) document.body[attr] = value; else throw new error("no support"); } </script> </head> <body> <
div style="margin: .5in; height: 400px;"> <p><b><tt>text</tt></b></p> <form> <select onchange="setbodyattr('text', this.options[this.selectedindex].value);"> <option value="black">black</option> <option value="red">red</option> </select> <p><b><tt>bgcolor</tt></b></p> <select onchange="setbodyattr('bgcolor', this.options[this.selectedind...
...onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </
div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.
Element.classList - Web APIs
examples const
div = document.createelement('
div');
div.classname = 'foo'; // our starting state: <
div class="foo"></
div> console.log(
div.outerhtml); // use the classlist api to remove and add classes
div.classlist.remove("foo");
div.classlist.add("anotherclass"); // <
div class="anotherclass"></
div> console.log(
div.outerhtml); // if visible is set remove it, otherwise add it
div.classlist.toggle("visible"); //...
... add/remove visible, depending on test conditional, i less than 10
div.classlist.toggle("visible", i < 10 ); console.log(
div.classlist.contains("foo")); // add or remove multiple classes
div.classlist.add("foo", "bar", "baz");
div.classlist.remove("foo", "bar", "baz"); // add or remove multiple classes using spread syntax const cls = ["foo", "bar"];
div.classlist.add(...cls);
div.classlist.remove(...cls); // replace class "foo" with class "bar"
div.classlist.replace("foo", "bar"); versions of firefox before 26 do not implement the use of several arguments in the add/remove/toggle methods.
...{value: nextindex++, done: false} : {done: true}; }}; }; })(window.domtokenlist.prototype, window.document.createelement("
div").classlist); })(window); caveats the polyfill is limited in functionality.
Element.innerHTML - Web APIs
note: if a <
div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerhtml returns these characters as the html entities "&", "<" and ">" respectively.
... <
div class="box"> <
div><strong>log:</strong></
div> <
div class="log"></
div> </
div> the <
div> with the class "box" is just a container for layout purposes, presenting the contents with a box around it.
... the <
div> whose class is "log" is the container for the log text itself.
Element.insertAdjacentElement() - Web APIs
example beforebtn.addeventlistener('click', function() { var temp
div = document.createelement('
div'); temp
div.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('beforebegin',temp
div); } setlistener(temp
div); }); afterbtn.addeventlistener('click', function() { var temp
div = document.createelement('
div'); temp
div.style.backgroundcolor = randomcolor(); if (activeelem) { activeelem.insertadjacentelement('a...
...fterend',temp
div); } setlistener(temp
div); }); have a look at our insertadjacentelement.html demo on github (see the source code too.) here we have a sequence of <
div> elements inside a container.
... when one is clicked, it becomes selected and you can then press the insert before and insert after buttons to insert new
divs before or after the selected element using insertadjacentelement().
Element: mouseleave event - Web APIs
here four events are sent to the four elements of the hierarchy when the pointer moves from the text to an area outside of the most outer
div represented here.
... mouseleave the following trivial example uses the mouseenter event to change the border on the <
div> when the mouse enters the space alloted to it.
... html <
div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </
div> css styling the <
div> to make it more visible.
Element.outerHTML - Web APIs
examples getting the value of an element's outerhtml property: html <
div id="d"> <p>content</p> <p>further elaborated</p> </
div> javascript var d = document.getelementbyid("d"); console.log(d.outerhtml); // the string '<
div id="d"><p>content</p><p>further elaborated</p></
div>' // is written to the console window replacing a node by setting the outerhtml property: html <
div id="container"> <
div id="d">this is a
div.</
div> </
div> javascript var container ...
...= document.getelementbyid("container"); var d = document.getelementbyid("d"); console.log(container.firstchild.nodename); // logs "
div" d.outerhtml = "<p>this paragraph replaced the original
div.</p>"; console.log(container.firstchild.nodename); // logs "p" // the #d
div is no longer part of the document tree, // the new paragraph replaced it.
...for example: var
div = document.createelement("
div");
div.outerhtml = "<
div class=\"test\">test</
div>"; console.log(
div.outerhtml); // output: "<
div></
div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<
div>this
div replaced a paragraph.</
div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org...
Element.scrollWidth - Web APIs
example <!doctype html> <html> <head> <title>example</title> <style>
div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #a
div { width: 100px; } button { margin-bottom: 2em; } </style> </head> <body> <
div id="a
div"> foobar-foobar-foobar-foobar </
div> <button id="abutton"> check for overflow </but...
...ton> <
div id="another
div"> foobar-foobar-foobar-foobar </
div> <button id="anotherbutton"> check for overflow </button> </body> <script> var buttonone = document.getelementbyid('abutton'), buttontwo = document.getelementbyid('anotherbutton'),
divone = document.getelementbyid('a
div'),
divtwo = document.getelementbyid('another
div'); //check to determine if an overflow is happening function isoverflowing(element) { return (element.scrollwidth > element.offsetwidth); } function alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() ...
...{ alertoverflow(
divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(
divtwo); }); </script> </html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Event.preventDefault() - Web APIs
<code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <
div id="output-box"></
div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
... html here's the form: <
div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <input type="text" id="my-textbox"> </form> </
div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
...it's not an elegant function but does the job for the purposes of this example: var warningtimeout; var warningbox = document.createelement("
div"); warningbox.classname = "warning"; function displaywarning(msg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.remov...
Using the Gamepad API - Web APIs
when one is connected, we grab the gamepad using navigator.getgamepads()[0], print information about the gamepad into our gamepad info
div, and fire the gameloop() function that starts the whole ball movement process up.
... var haveevents = 'ongamepadconnected' in window; var controllers = {}; function connecthandler(e) { addgamepad(e.gamepad); } function addgamepad(gamepad) { controllers[gamepad.index] = gamepad; var d = document.createelement("
div"); d.setattribute("id", "controller" + gamepad.index); var t = document.createelement("h1"); t.appendchild(document.createtextnode("gamepad: " + gamepad.id)); d.appendchild(t); var b = document.createelement("
div"); b.classname = "buttons"; for (var i = 0; i < gamepad.buttons.length; i++) { var e = document.createelement("span"); e.classname = "button"; //e.id = "b" + ...
...i; e.innerhtml = i; b.appendchild(e); } d.appendchild(b); var a = document.createelement("
div"); a.classname = "axes"; for (var i = 0; i < gamepad.axes.length; i++) { var p = document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1"); p.innerhtml = i; a.appendchild(p); } d.appendchild(a); // see https://github.com/luser/gamepadtest/blob/master/index.html var start = document.getelementbyid("start"); if (start) { start.style.display = "none"; } document.body.appendchild(d); requestanimationframe(updatestatus); } function disconnecthandler(e) { removegamepad(e.gamepad); } function removegamepad(gamepad) { var d = document.getelementbyid("control...
GlobalEventHandlers.onpointercancel - Web APIs
<html> <script> function cancelhandler(ev) { // process the pointercancel event } function init() { var el = document.getelementbyid('target1'); el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointercancel="cancelhandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointercancel' in that specification.
GlobalEventHandlers.onpointerenter - Web APIs
<html> <script> function enterhandler(ev) { // process the pointerenter event } function init() { let el = document.getelementbyid('target1'); el.onpointerenter = enterhandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointerenter="enterhandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerenter' in that specification.
GlobalEventHandlers.onpointerleave - Web APIs
<html> <script> function leavehandler(ev) { // process the pointerleave event } function init() { var el=document.getelementbyid("target1"); el.onpointerleave = leavehandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointerleave="leavehandler(event)"> touch me ...
... </
div> </body> </html> see using pointer events for additional details.
GlobalEventHandlers.onpointermove - Web APIs
<html> <script> function movehandler(ev) { // process the pointermove event } function init() { let el=document.getelementbyid('target1'); el.onpointermove = movehandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointermove="movehandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointermove' in that specification.
GlobalEventHandlers.onpointerout - Web APIs
<html> <script> function outhandler(ev) { // process the pointerout event } function init() { let el=document.getelementbyid('target1'); el.onpointerout = outhandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointerout="outhandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerout' in that specification.
GlobalEventHandlers.onpointerover - Web APIs
<html> <script> function overhandler(ev) { // process the pointerover event } function init() { let el = document.getelementbyid('target1'); el.onpointerover = overhandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointerover="overhandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerover' in that specification.
GlobalEventHandlers.onpointerup - Web APIs
<html> <script> function uphandler(ev) { // process the pointerup event } function init() { let el = document.getelementbyid('target1'); el.onpointerup = uphandler; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" onpointerup="uphandler(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerup' in that specification.
GlobalEventHandlers.ontouchcancel - Web APIs
<html> <script> function canceltouch(ev) { // process the event } function init() { let el = document.getelementbyid('target1'); el.ontouchcancel = canceltouch; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" ontouchcancel="canceltouch(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
GlobalEventHandlers.ontouchend - Web APIs
<html> <script> function endtouch(ev) { // process the event } function init() { var el=document.getelementbyid("target1"); el.ontouchend = endtouch; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" ontouchend="endtouch(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
GlobalEventHandlers.ontouchmove - Web APIs
<html> <head> <script> function movetouch(ev) { // process the event } function init() { var el=document.getelementbyid("target1"); el.ontouchmove = movetouch; } </script> </head> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" ontouchmove="movetouch(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
GlobalEventHandlers.ontouchstart - Web APIs
<html> <script> function starttouch(ev) { // process the event } function init() { let el = document.getelementbyid('target1'); el.ontouchstart = starttouch; } </script> <body onload="init();"> <
div id="target1"> touch me ...
... </
div> <
div id="target2" ontouchstart="starttouch(event)"> touch me ...
... </
div> </body> </html> specifications specification status comment touch events – level 2 draft non-stable version.
HTMLElement.hidden - Web APIs
the welcome panel <
div id="welcome" class="panel"> <h1>welcome to foobar.com!</h1> <p>by clicking "ok" you agree to be awesome every day!</p> <button class="button" id="okbutton">ok</button> </
div> this html creates a panel (in a <
div> block) that welcomes the user to a site and tells them what they're agreeing to by clicking the ok button.
...the follow-up panel looks like this in html: <
div id="awesome" class="panel" hidden> <h1>thanks!</h1> <p>thank you <strong>so</strong> much for agreeing to be awesome today!
... now get out there and do awesome things awesomely to make the world more awesome!</p> </
div> css the content is styled using the css below.
HTMLElement.offsetLeft - Web APIs
example var colortable = document.getelementbyid("t1"); var toleft = colortable.offsetleft; if (toleft > 5) { // large left offset: do something here } this example shows a 'long' sentence that wraps within a
div with a blue border, and a red box that one might think should describe the boundaries of the span.
... <
div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"> <span>short span.
... </span> <span id="longspan">long span that wraps within this
div.</span> </
div> <
div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"> </
div> <script type="text/javascript"> var 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.
HTMLProgressElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlprogresselement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
... htmlprogresselement.positionread only returns a double value returning the result of
dividing the current value (value) by the maximum value (max); if the progress bar is an indeterminate progress bar, it returns -1.
The HTML DOM API - Web APIs
html dom api interfaces the majority of the interfaces that comprise the html dom api map almost one-to-one to in
dividual html elements, or to a small group of elements with similar functionality.
... htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement html
divelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlinputelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjec...
... audiotrack audiotracklist mediaerror texttrack texttrackcue texttrackcuelist texttracklist timeranges trackevent videotrack videotracklist drag and drop interfaces these interfaces are used by the html_drag_and_drop_api to represent in
dividual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.
InputEvent.inputType - Web APIs
examples this example logs the inputtype for input events on an editable <
div>.
... html <p id="log">input type: </p> <
div contenteditable="true" style="margin: 20px;padding: 20px;border:2px dashed red;"> <p>some sample text.
... try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </
div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('
div[contenteditable]'); editable.addeventlistener('input', loginputtype); function loginputtype(event) { log.textcontent = `input type: ${event.inputtype}`; } result try editing the text inside the <
div> and see what happens.
MediaKeyMessageEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</...
... y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
...may be one of license-request, license-renewal, license-release, or in
dividualization-request.
Node.isEqualNode() - Web APIs
example in this example, we create three <
div> blocks.
... html <
div>this is the first element.</
div> <
div>this is the second element.</
div> <
div>this is the first element.</
div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let
divlist = document.getelementsbytagname("
div"); output.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
example in this example, we create three <
div> blocks.
... html <
div>this is the first element.</
div> <
div>this is the second element.</
div> <
div>this is the first element.</
div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let
divlist = document.getelementsbytagname("
div"); output.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.nextSibling - Web APIs
example <
div id="
div-1">here is
div-1</
div> <
div id="
div-2">here is
div-2</
div> <script> var el = document.getelementbyid('
div-1').nextsibling, i = 1; console.group('siblings of
div-1:'); while (el) { console.log(i, '.
... ', el.nodename); el = el.nextsibling; i++; } console.groupend(); </script> /************************************************** the console displays the following: siblings of
div-1 1.
...
div 3.
Node.textContent - Web APIs
examples given this html fragment: <
div id="
diva">this is <span>some</span> text!</
div> ...
... you can use textcontent to get the element's text content: let text = document.getelementbyid('
diva').textcontent; // the text variable is now: 'this is some text!' ...
... 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
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...e4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
... sample usage the following example prints the textcontent properties of each <span> tag in a <
div> element named "box": <
div id="box"> <span>foo</span> <span>bar</span> <span>baz</span> </
div> const box = document.getelementbyid("box") eachnode(box, function(node) { if (null != node.textcontent) { console.log(node.textcontent) } }) the above will result in the following strings printing to the user's console: "\n\t", "foo", "\n\t", "bar", "\n\t", "baz" note: whitespace for...
ParentNode.prepend() - Web APIs
examples prepending an element var parent = document.createelement("
div"); var p = document.createelement("p"); var span = document.createelement("span"); parent.append(p); parent.prepend(span); console.log(parent.childnodes); // nodelist [ <span>, <p> ] prepending text var parent = document.createelement("
div"); parent.append("some text"); parent.prepend("headline: "); console.log(parent.textcontent); // "headline: some text" appending an element and text var...
... parent = document.createelement("
div"); var p = document.createelement("p"); parent.prepend("some text", p); console.log(parent.childnodes); // nodelist [ #text "some text", <p> ] parentnode.prepend() is unscopable the prepend() method is not scoped into the with statement.
... var parent = document.createelement("
div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments), docfrag = document.createdocumentfragment(); argarr.foreach(function (argitem) { var isnode = argitem instanceof ...
SVGFEConvolveMatrixElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><l...
...482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeconvolvematrixelement" target="_top"><rect x="221" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeconvolvematrixelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
... svgfeconvolvematrixelement.
divisor read only an svganimatednumber corresponding to the
divisor attribute of the given element.
SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position in
dividual text glyphs.
... <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" ...
..."11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpositioningelement" target="_top"><rect x="-239" y="65" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgtextcontentelement.
SourceBufferList - Web APIs
the in
dividual source buffers can be accessed using array operator (i.e.
... <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" str...
...oke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
Storage API - Web APIs
the storage standard defines a common, shared storage system to be used by all apis and technologies that store content-accessible data for in
dividual web sites.
...one of the most likely methods—one which the specification specifically encourages, in fact—would be to consider the popularity and/or usage levels of in
dividual sites to determine what their quotas should be.
... when clearing site storage units, an origin's box is treated as a single entity; if the user agent needs to clear it and the user approves, the entire data store is cleared rather than providing some means of clearing only data from in
dividual apis.
TouchEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
...one"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor touchevent() creates a touchevent object.
... touchevent.changedtouches read only a touchlist of all the touch objects representing in
dividual points of contact whose states changed between the previous touch event and this one.
UIEvent.layerX - Web APIs
dding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <
div id="d1"> <span>this is an un-positioned
div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </
div> <
div id="d2"> <span>this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </
div> <
div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </
div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
dding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <
div id="d1"> <span>this is an un-positioned
div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </
div> <
div id="d2"> <span>this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </
div> <
div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </
div> </body> </html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
dding: 20px; } #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <
div id="d1"> <span>this is an un-positioned
div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </
div> <
div id="d2"> <span>this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
...this is a positioned
div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </
div> <
div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </
div> </body> </html> specifications this property is not part of any specification.
Signaling and video calling - Web APIs
this requires video elements, and a button to hang up the call: <
div class="flexchild" id="camera-container"> <
div class="camera-box"> <video id="received_video" autoplay></video> <video id="local_video" autoplay muted></video> <button id="hangup-button" onclick="hangupcall();" disabled> hang up </button> </
div> </
div> the page structure defined here is using <
div> elements, giving us full control over the page layout by enabling the use...
... the javascript code we'll
divide this code into functional areas to more easily describe how it works.
... note: obviously, it would be more efficient to update the list by adding and removing in
dividual users instead of rebuilding the whole list every time it changes, but this is good enough for the purposes of this example.
Taking still photos with WebRTC - Web APIs
each of these is presented side-by-side in its own <
div> to facilitate styling and control.
... <
div class="camera"> <video id="video">video stream not available.</video> <button id="startbutton">take photo</button> </
div> this is straightforward, and we'll see how it ties together when we get into the javascript code.
... <canvas id="canvas"> </canvas> <
div class="output"> <img id="photo" alt="the screen capture will appear in this box."> </
div> that's all of the relevant html.
Rendering and the WebXR frame animation callback - Web APIs
the
division of time into 60 hz blocks with each block being used at least in part to render the scene is shown in the diagram below.
...that is, by
dividing 1 by the display's refresh rate.
... since webxr uses a single framebuffer for every view, with viewports upon the view being used to separate each eye's viewpoint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) in
dividually.
Using the Web Animations API - Web APIs
it will automatically
divide the animation into equal parts based on the number of keys you give it.
...we can
divide her duration in half to get the midpoint for her animation’s timeline, setting her to be normal height.
...we can figure out whether she's on the large end or small end of her animation by getting her animation's currenttime and
dividing it by her activeduration: var endgame = function() { // get alice's timeline's playhead location var aliceplayhead = alicechange.currenttime; var alicetimeline = alicechange.effect.getcomputedtiming().activeduration; // stops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alicetimeline; if (ali...
Using the group role - Accessibility
<
div id="tree1" role="tree" tabindex="-1"> <
div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <span role="treeitem" tabindex="0">animals</span> </
div> <
div id="animalgroup" role="group"> <
div id="birds" role="treeitem"> <span tabindex="-1">birds</span> ...
... </
div> <
div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <span role="treeitem" tabindex="0">cats</span> </
div> <
div id="catgroup" role="group"> <
div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </
div> <
div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </
div> </
div> </
div> </
div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code.
... <
div role="menu"> <ul role="group"> <li role="menuitem">inbox</li> <li role="menuitem">archive</li> <li role="menuitem">trash</li> </ul> <ul role="group"> <li role="menuitem">custom folder 1</li> <li role="menuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </
div> working examples: file directory treeview example using computed properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit relationships assigned to them in order to participate in the group.
ARIA: timer role - Accessibility
<
div role="timer" id="eggtimer">0</
div> this defines this
div element as a timer with no remaining time.
... <
div id="clock" role="timer" aria-live="off">20</
div> <button onclick="starttimer('clock')">start</button> /* basic javascript to update a timer */ function starttimer(timername) { // get the number of seconds let timer = document.getelementbyid(timername), seconds = parseint(timer.innertext); // remove a second // updated the content of timer timer.innertext = --seconds // if t...
... <
div id="clock" role="timer" aria-live="polite" aria-atomic="true"></
div> accessibility concerns improperly using the timer role can unintentionally xxx specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'timer' in that specification.
ARIA: Complementary role - Accessibility
<
div role="complementary"> <h2>our partners</h2> <!-- complementary section content --> </
div> this is a sidebar containing links to event sponsors.
... examples <
div role="complementary"> <h2>trending articles</h2> <ul> <li><a href="#">18 tweets that will make you feel all the feels</a></li> <li><a href="#">stop searching for the perfect lunch containers because i've found them</a></li> <li><a href="#">the time has come to finally decide what we should be calling these foods</a></li> <li><a href="#">17 really good posts we saw on tumbl...
...r this week</a></li> <li><a href="#">10 parent hacks we know work because we tried them</a></li> </ul> </
div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
ARIA: contentinfo role - Accessibility
<
div role="contentinfo"> <h2>footer</h2> <!-- footer content --> </
div> this is a website footer.
... examples <body> <!-- other page content --> <
div role="contentinfo"> <h2>mdn web docs</h2> <ul> <li><a href="#">web technologies</a></li> <li><a href="#">learn web development</a></li> <li><a href="#">about mdn</a></li> <li><a href="#">feedback</a></li> </ul> <p>© 2005-2018 mozilla and in
dividual contributors.
... content is available under <a href="#">these licenses</a>.</p> </
div> </body> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the document.
ARIA: document role - Accessibility
<
div role="dialog"> ...
... <
div id="infotext" role="document" tabindex="0"> <p>some informational text goes here.</p> </
div> ...
... <button>close</button> </
div> this example shows a dialog widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.
ARIA: Main role - Accessibility
<
div id="main" role="main"> <h1>avocados</h1> <!-- main section content --> </
div> this is the main section of a document that discusses avocados.
... example <body> <!-- primary navigation --> <
div role="main"> <h1>the the first indochina war</h1> <!-- article content --> </
div> <!-- sidebar and footer --> </body> accessibility concerns use only one main role per document the main landmark role should only be used once per document.
... <body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <
div id="main-content" role="main"> <!-- main page content --> </
div> </body> webaim: "skip navigation" links added benefits certain technologies such as browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
ARIA: Navigation Role - Accessibility
<
div role="navigation" aria-label="main"> <!-- list of links to main website locations --> </
div> this is a website's main navigation.
... examples <
div role="navigation" aria-label="customer service"> <ul> <li><a href="#">help</a></li> <li><a href="#">order tracking</li> <li><a href="#">shipping & delivery</a></li> <li><a href="#">returns</a></li> <li><a href="#">contact us</a></li> <li><a href="#">find a store</a></li> </ul> </
div> accessibility concerns landmark roles are intended to be used sparingly, to ide...
... <
div id="main-nav" role="navigation" aria-label="main"> <!-- content --> </
div> ...
ARIA: tab role - Accessibility
here we are enclosing our group of content in a
div, with our tablist having an aria-label to label it for assistive technology.
... <
div class="tabs"> <
div role="tablist" aria-label="sample tabs"> <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1" tabindex="0"> first tab </button> <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1"> second tab </button> <button role="tab" aria-selected="false" aria-controls="panel-3" id=...
..."tab-3" tabindex="-1"> third tab </button> </
div> <
div id="panel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1"> <p>content for the first panel</p> </
div> <
div id="panel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" hidden> <p>content for the second panel</p> </
div> <
div id="panel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" hidden> <p>content for the third panel</p> </
div> </
div> .tabs { padding: 1em; } [role="tablist"] { margin-bottom: -1px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5px 5px 0 0; border: 1px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padd...
ARIA: heading role - Accessibility
<
div role="heading" aria-level="1">this is a main page heading</
div> this defines the text in the
div to be the main heading of the page, indicated by being level 1 via the aria-level attribute.
... instead of using a <
div> or <span> with a heading role and aria-level, consider using a native <h1> through <h6> element instead to indicate that this text is a heading, and what part of the structure it represents.
... <
div id="container"> <
div role="heading" aria-level="1">the main page heading</
div> <p>this article is about showing a page structure.</p> <
div role="heading" aria-level="2">introduction</
div> <p>an introductory text.</p> <
div role="heading" aria-level="2">chapter 1</
div> <p>text</p> <
div role="heading" aria-level="3">chapter 1.1</
div> <p>more text in a sub section.</p> ...</
div> however, instead, you should do: <
div id="container"> <h1>the main page heading</h1> <p>this article is about showing a page structure.</p> <h2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</
div> accessibility concerns if you must use the heading role and aria-lev...
ARIA: textbox role - Accessibility
<!-- simple text input field --> <
div id="txtboxlabel">enter your five-digit zipcode</
div> <
div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></
div> <!-- multi-line text area --> <
div id="txtboxmultilinelabel">enter the tags for the article</
div> <
div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></di...
... <
div role="textbox" contenteditable="true"></
div> example 2: adding the role in the html code for multi-line input the snippet below shows how the textbox role is added directly into the html source code.
... <
div role="textbox" contenteditable="true" aria-multiline="true"></
div> best practices be sure to add the contenteditable="true" attribute to the html element to which this role is applied.
Web applications and ARIA FAQ - Accessibility
aria provides a means to make web applications and widgets more accessible to a
diverse range of users, including those who use assistive technologies such as screen readers or magnifiers.
...here's the markup for a progress bar widget: <
div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> this progress bar is built using a <
div>, which is not very descriptive.
... along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <
div> in the dom.
ARIA - Accessibility
here's the markup for a progress bar widget: <
div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> </
div> this progress bar is built using a <
div>, which has no meaning.
... along with placing them directly in the markup, aria attributes can be added to the element and updated dynamically using javascript code like this: // find the progress bar <
div> in the dom.
...if you 'fake' these with <
div>s and aria, you must ensure your widgets are keyboard accessible.
Accessibility documentation index - Accessibility
here's where to file bugs: 13 using aria: roles, states, and properties aria, accessibility, overview, reference aria defines semantics that can be applied to elements, with these
divided into roles (defining a type of user interface element) and states and properties that are supported by a role.
...aria provides a means to make web applications and widgets more accessible to a
diverse range of users, including those who use assistive technologies such as screen readers or magnifiers.
...these widgets are typically composed of <
div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
Text labels and names - Accessibility
<
div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">your personal details were successfully updated</h2> <p id="dialog1desc">you can change your details at any time in the user account section.</p> <button>close</button> </
div> if the dialog box doesn't have a heading, you can instead use aria-label to contain the label text: <
div role="dialo...
...you can change your details at any time in the user account section.</p> <button>close</button> </
div> see also role="dialog" role="alertdialog" aria-label aria-labelledby wai-aria: dialog role dialog authoring practices documents must have a title it is important on each html document to include a <title> that describes the page's purpose.
...without the legend, they would have to navigate around the in
dividual form controls in the group to infer an idea of the overall purpose, which could result in confusion.
Accessibility
accessibility means developing content to be as accessible as possible no matter an in
dividual's physical and cognitive abilities and no matter how they access the web.
...when the web meets this goal, it is accessible to people with a
diverse range of hearing, movement, sight, and cognitive ability." (w3c - accessibility) key tutorials the mdn accessibility learning area contains modern, up-to-date tutorials covering accessibility essentials: what is accessibility?
... keyboard-navigable javascript widgets until now, web developers who want to make their styled <
div> and <span> based widgets accessible have lacked the proper techniques.
::-webkit-scrollbar - CSS: Cascading Style Sheets
scrollbar::-webkit-scrollbar { display: none; } /* demonstrate a "mostly customized" scrollbar * (won't be visible otherwise if width/height is specified) */ .mostly-customized-scrollbar::-webkit-scrollbar { width: 5px; height: 8px; background-color: #aaa; /* or add it to the track */ } /* add a thumb */ .mostly-customized-scrollbar::-webkit-scrollbar-thumb { background: #000; } <
div class="visible-scrollbar"> etiam sagittis sem sed lacus laoreet, eu fermentum eros auctor.
...</
div> <
div class="invisible-scrollbar"> thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword </
div> <
div class="mostly-customized-scrollbar"> thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br> and pretty tall<br> thing with weird scrollbars.<br> who thought scrollbars could be made weeeeird?
... </
div> specifications not part of any standard.
:nth-child() - CSS: Cascading Style Sheets
detailed example html <h3><code>span:nth-child(2n+1)</code>, without an <code><em></code> among the child elements.</h3> <p>children 1, 3, 5, and 7 are selected.</p> <
div class="first"> <span>span 1!</span> <span>span 2</span> <span>span 3!</span> <span>span 4</span> <span>span 5!</span> <span>span 6</span> <span>span 7!</span> </
div> <br> <h3><code>span:nth-child(2n+1)</code>, with an <code><em></code> among the child elements.</h3> <p>children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't ...
... selected because it isn't a <code><span></code>.</p> <
div class="second"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> </
div> <br> <h3><code>span:nth-of-type(2n+1)</code>, with an <code><em></code> among the child elements.</h3> <p>children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code><em></code>, not a <code><span></code>, and <code>nth-of-type</code> only selects children of that type.
... the <code><em></code> is completely skipped over and ignored.</p> <
div class="third"> <span>span!</span> <span>span</span> <em>this is an `em`.</em> <span>span!</span> <span>span</span> <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.
:target - CSS: Cascading Style Sheets
html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <
div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit.
... donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> </figure> </
div> <
div class="lightbox" id="example2"> <figure> <a href="#" class="close"></a> <figcaption>cras risus odio, pharetra nec ultricies et, mollis ac augue.
... quisque quis neque arcu, nec gravida magna.</figcaption> </figure> </
div> css /* unopened lightbox */ .lightbox { display: none; } /* opened lightbox */ .lightbox:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* lightbox content */ .lightbox figcaption { width: 25rem; position: relative; padding: 1.5em; background-color: lightpink; } /* close button */ .lightbox .close { position: relative; display: block; } .lightbox .close::after { right: -1rem; top: -1rem; width: 2rem; height: 2rem; position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: bla...
aspect-ratio - CSS: Cascading Style Sheets
html <
div id='inner'> watch this element as you resize your viewport's width and height.
... </
div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) {
div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) {
div { background: #9ff; /* cyan */ } } /* exact aspect ratio, put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) {
div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/html,<style> @media (min-aspect-ratio: 8/5) {
div { background: %239af; } } @me...
...dia (max-aspect-ratio: 3/2) {
div { background: %239ff; } } @media (aspect-ratio: 1/1) {
div { background: %23f9a; } }</style><
div id='inner'> watch this element as you resize your viewport's width and height.</
div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.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.
Coordinate systems - CSS: Cascading Style Sheets
let inner = document.queryselector(".inner"); let log = document.queryselector(".log"); function setcoords(e, type) { let idx = type + "x"; let idy = type + "y"; document.getelementbyid(idx).innertext = e[idx]; document.getelementbyid(idy).innertext = e[idy]; } a reference to the <
div> inside the inner box which contains the paragraphs that will show the coordinate information is fetched into log.
...note that within the <
div> with the id "log", we have a paragraph for each coordinate system, with span used for each of the elements to receive and display the coordinates in each model.
... <
div class="outer"> <
div class="inner"> <
div class="log"> <p> offset-relative: <span id="offsetx">0</span>, <span id="offsety">0</span> </p> <p> client-relative: <span id="clientx">0</span>, <span id="clienty">0</span> </p> <p> page-relative: <span id="pagex">0</span>, <span id="pagey">0</span> </p> <p> screen-relative: <span id="screenx">0</span>, <span id="screeny">0</span> </p> </
div> </
div> </
div> css the css is pretty much just for appearances here.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <
div class="tiledbackground"> </
div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px...
... html <
div class="bgsizecontain"> <p>try resizing this element!</p> </
div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image s...
... html <
div class="bgsizecover"> <p>try resizing this element!</p> </
div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
Mastering margin collapsing - CSS: Cascading Style Sheets
the top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the in
dividual margins (or just one of them, if they are equal), a behavior known as margin collapsing.
... examples html <p>the bottom margin of this paragraph is collapsed …</p> <p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p> <
div>this parent element contains two paragraphs!
... <p>this paragraph has a <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.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
try changing the flex-grow factor from 1 to 0 in this live example to see the different behavior: giving items different flex-grow factors our understanding of how flex-grow works with flex-basis allows us to have further control over our in
dividual item sizes by assigning items different flex-grow factors.
...we need to add up the flex grow factors, then
divide the total amount of positive free space in the flex container by that number, which in this case is 4.
... we then share out the space according to the in
dividual values — the first item gets one part, the second one part, the third two parts.
OpenType font features guide - CSS: Cascading Style Sheets
the issue with simply using font-feature-settings for everything is that every time you want to change one of the in
dividual features, you have to redefine the entire string (similar to manipulating variable fonts with font-variation-settings).
... while none of these features in
dividually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail.
...fonts with alternate glyphs can make them available across the board or in
dividually in separate stylistic sets, or even in
dividual characters.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <
div class="wrapper"> <
div class="box box1"><a href="">one</a></
div> <
div class="box box2"><a href="">two</a></
div> <
div...
... class="box box3"><a href="">three</a></
div> <
div class="box box4"><a href="">four</a></
div> <
div class="box box5"><a href="">five</a></
div> </
div> the specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout.
...an example would be where some content was semantically marked up as a list but you decide to use a set of <
div> elements instead as then you can have the element to be a direct child of a container set to display: grid.
Stacking with floated blocks - CSS: Cascading Style Sheets
floating blocks are placed between non-positioned blocks and positioned blocks: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant positioned elements, in order of appearance in the html actually, as you can see in the example below, the background and border of the non-positioned block (
div #4) is completely unaffected by floating blocks, but the content is affected.
...this behavior can be shown with an added rule to the above list: the background and borders of the root element descendant non-positioned blocks, in order of appearance in the html floating blocks descendant non-positioned inline elements descendant positioned elements, in order of appearance in the html note: if an opacity value is applied to the non-positioned block (
div #4), then something strange happens: the background and border of that block pops up above the floating blocks and the positioned blocks.
... source code for the example html <
div id="abs1"> <b>
div #1</b><br />position: absolute;</
div> <
div id="flo1"> <b>
div #2</b><br />float: left;</
div> <
div id="flo2"> <b>
div #3</b><br />float: right;</
div> <br /> <
div id="sta1"> <b>
div #4</b><br />no positioning</
div> <
div id="abs2"> <b>
div #5</b><br />position: absolute;</
div> css
div { padding: 10px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #900; background-color: #fdd; } #sta1 { height: 100px; border: 1px dashed #996; background-col...
CSS Scrollbars - CSS: Cascading Style Sheets
.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } html <
div class="scroller"> veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... gumbo beet greens corn soko en
dive gumbo gourd.
...</
div> result reference css properties scrollbar-width scrollbar-color specifications specification status comment css scrollbars level 1 working draft initial definition.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <
div> <
div class="one">1:</
div> <
div class="two">2: text <span class="five">5 - more text</span></
div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </
div> ...
... inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <
div> <
div class="one"></
div> <
div class="two">text <span class="five">- more text</span></
div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </
div> this leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
...take this html: <
div class="one"> <
div class="two"> <
div class="three"></
div> <
div class="four"></
div> </
div> </
div> ...
align-content - CSS: Cascading Style Sheets
evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-content: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); }
div >
div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 ...
...{ background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <
div id="container" class="flex"> <
div id="item1">1</
div> <
div id="item2">2</
div> <
div id="item3">3</
div> <
div id="item4">4</
div> <
div id="item5">5</
div> <
div id="item6">6</
div> </
div> <
div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </
div> <
div class="row"> <label for="values">align-content: </label> <select id="values"> <option value="normal">normal</option> <option value="stretch">stretch</option> <option value="flex-start">flex-start</opti...
...ption> <option value="unsafe center">unsafe center</option> <option value="safe right">safe right</option> <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </
div> javascript var values = document.getelementbyid('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 specificatio...
align-items - CSS: Cascading Style Sheets
rflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200px; width: 240px; align-items: center; /* can be changed in the live sample */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); }
div >
div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 ...
...{ background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <
div id="container" class="flex"> <
div id="item1">1</
div> <
div id="item2">2</
div> <
div id="item3">3</
div> <
div id="item4">4</
div> <
div id="item5">5</
div> <
div id="item6">6</
div> </
div> <
div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </
div> <
div class="row"> <label for="values">align-items: </label> <select id="values"> <option value="normal">normal</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</optio...
... <option value="unsafe right">unsafe right</option> <option value="safe end">safe end</option> <option value="unsafe end">unsafe end</option> <option value="safe self-end">safe self-end</option> <option value="unsafe self-end">unsafe self-end</option> <option value="safe flex-end">safe flex-end</option> <option value="unsafe flex-end">unsafe flex-end</option> </select> </
div> javascript var values = document.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...
backface-visibility - CSS: Cascading Style Sheets
html <table> <tr> <th><code>backface-visibility: visible;</code></th> <th><code>backface-visibility: hidden;</code></th> </tr> <tr> <td> <
div class="container"> <
div class="cube showbf"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> <p> since all faces are partially transparent, ...
... </p> </td> <td> <
div class="container"> <
div class="cube hidebf"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </
div> </
div> <p> the three back faces (2, 4, 5) are hidden.
... </p> </td> </tr> </table> css /* classes that will show or hide the three back faces of the "cube" */ .showbf
div { backface-visibility: visible; } .hidebf
div { backface-visibility: hidden; } /* define the container
div, the cube
div, and a generic face */ .container { width: 150px; height: 150px; margin: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform...
box-align - CSS: Cascading Style Sheets
center the box aligns contents in the center,
dividing any extra space equally between the start and the end.
... formal definition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style>
div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 400px; /* make this box wider than the children so there is room for the box-align */ width: 300px; /* children should be orient...
...n children to the horizontal center of this box */ box-align: center; /* as specified */ -moz-box-align: center; /* mozilla */ -webkit-box-align: center; /* webkit */ /* pack children to the bottom of this box */ box-pack: end; /* as specified */ -moz-box-pack: end; /* mozilla */ -webkit-box-pack: end; /* webkit */ }
div.example > p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <
div class="example"> <p>i will be second from the bottom of
div.example, centered horizontally.</p> <p>i will be on the bottom of
div.example, centered horizontally.</p> </
div> </body> </html> specifications not part of any standard.
clamp() - CSS: Cascading Style Sheets
as math expressions, so you can use addition, subtraction, multiplication and
division without using the calc() function itself.
...the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and
division without using the calc() function itself.
... the expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and
division ( / ) operators, using standard operator precedence rules.
cross-fade() - CSS: Cascading Style Sheets
if the result is greater than 0%, the result is then
divided equally between all images with omitted percentages.
...the result, if greater than 0, is then
divided equally between all images with omitted percentages.
...p> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <
div class="crossfade"></
div> css .crossfade { width: 300px; height: 300px; background-image: -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.o...
<display-box> - CSS: Cascading Style Sheets
display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <
div> has a 2-pixel red border and a width of 300px.
... however it also has display: contents specified therefore this <
div> will not be rendered, the border and width will no longer apply, and the child element will be displayed as if the parent had never existed.
... html <
div class="outer"> <
div>inner
div.</
div> </
div> css .outer { border: 2px solid red; width: 300px; display: contents; } .outer >
div { border: 1px solid green; } result specifications specification status css display module level 3the definition of 'display-box' in that specification.
image() - CSS: Cascading Style Sheets
displaying a section of the background image <
div class="box">hover over me.
... what cursor do you see?</
div> .box:hover { cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16"); } when the user hovers over the box, the cursor will change to display the 16x16 px section of the sprite image, starting at x=32 and y=64.
... putting color on top of a background image .quarterlogo {height: 200px; width: 200px; border: 1px solid;} .quarterlogo { background-image: image(rgba(0, 0, 0, 0.25)), url("https://mdn.mozillademos.org/files/12053/firefox.png"); background-size: 25%; background-repeat: no-repeat; } <
div class="quarterlogo">if supported, a quarter of this
div has a darkened logo</
div> the above will put a semi-transparent black mask over the firefox logo background image.
<length> - CSS: Cascading Style Sheets
html <
div class="outer"> <
div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </
div> <
div class="inner"> </
div> </
div> <
div class="results"> </
div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-color: #eee; position: relative; } .inner { height: 50px; ...
...px 5px rgba(0,0,0,0.5); background-color: orange; display: flex; align-items: center; margin-top: 10px; } .result code { position: absolute; margin-left: 20px; } .results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const input
div = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const results
div = document.queryselector('.results'); inputelem.addeventlistener('change', () => { input
div.style.width = inputelem.value; const result = document.createelement('
div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.va...
...lue}</code>`; results
div.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification.
mask-border - CSS: Cascading Style Sheets
the source for the mask is a ".png" file of 90 by 90 pixels, with three diamonds going vertically and horizontally: html <
div id="bitmap">this element is surrounded by a bitmap-based mask border!
... pretty neat, isn't it?</
div> css to match the size of a single diamond, we will use a value of 90
divided by 3, or 30, for slicing the image into corner and edge regions.
...
div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ ro...
outline-style - CSS: Cascading Style Sheets
html <
div> <p class="auto">outline demo</p> </
div> css .auto { outline-style: auto; /* same result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to dashed and dotted html <
div> <
div class="dotted"> <p class="dashed">outline demo</p> </
div> </
div> css .dotted { outline-style: dotted; /* same result as...
... "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to solid and double html <
div> <
div class="solid"> <p class="double">outline demo</p> </
div> </
div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to groove and ridge html <
div> <
div class="groove"> <p class="ridge">outline demo</p> </
div> </
div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to inset and outset html <
div> <
div cl...
...ass="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.
place-items - CSS: Cascading Style Sheets
examples placing items in a flex container
div >
div { box-sizing: border-box; border: 2px solid #8c8c8c; width: 50px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30px; } #item2 { background-color: #a0c8ff; min-height: 50px; } #item3 { background-color: #ffa08c; min-height: 40px; } #item4 { background-color: #ffff8c; min-height: 60px; } #item5 ...
...{ background-color: #ff8cff; min-height: 70px; } #item6 { background-color: #8cffff; min-height: 50px; font-size: 30px; } select { font-size: 16px; } .row { margin-top: 10px; } html <
div id="container" class="flex"> <
div id="item1">1</
div> <
div id="item2">2</
div> <
div id="item3">3</
div> <
div id="item4">4</
div> <
div id="item5">5</
div> <
div id="item6">6</
div> </
div> <
div class="row"> <label for="display">display: </label> <select id="display"> <option value="flex">flex</option> <option value="grid">grid</option> </select> </
div> <
div class="row"> <label for="values">place-items: </label> <select id="values"> <option value="start">start</option> <option value="center">center</option> <option value="end">end</option> <option value...
...>flex-end normal</option> <option value="left auto">left auto</option> <option value="right normal">right normal</option> <option value="baseline normal">baseline normal</option> <option value="first baseline auto">first baseline auto</option> <option value="last baseline normal">last baseline normal</option> <option value="stretch auto">stretch auto</option> </select> </
div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.placeitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { heigh...
resize - CSS: Cascading Style Sheets
in the example below, a resizable <
div> contains a resizable paragraph (<p> element).
... html <
div class="resizable"> <p class="resizable"> this paragraph is resizable in all directions, because the css `resize` property is set to `both` on this element.
... </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.
rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation transforms in
dividually and independently of the transform property.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <
div> <p class="rotate">rotation</p> </
div> css * { box-sizing: border-box; } html { font-family: sans-serif; }
div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid 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 s...
...pecifications specification status comment css transforms level 2the definition of 'in
dividual transforms' in that specification.
scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale transforms in
dividually and independently of the transform property.
... formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <
div> <p class="scale">scaling</p> </
div> css * { box-sizing: border-box; } html { font-family: sans-serif; }
div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; 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 'in
dividual transforms' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <
div class="scroller"> <
div>1</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> </
div> css let's walk through the css.
... the child elements are styled as follows: .scroller >
div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller >
div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axi...
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller >
div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller >
div:nth-child(3) { scroll-margin-inline-end: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <
div>, and 2rems outside the inline end edge of the third <
div>.
scroll-margin-inline-start - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <
div class="scroller"> <
div>1</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> </
div> css let's walk through the css.
... the child elements are styled as follows: .scroller >
div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller >
div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the ...
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller >
div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller >
div:nth-child(3) { scroll-margin-inline-start: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline start edge of the second <
div>, and 2rems outside the inline start edge of the third <
div>.
scroll-margin-inline - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <
div class="scroller"> <
div>1</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> </
div> css let's walk through the css.
... the child elements are styled as follows: .scroller >
div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: end; } .scroller >
div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: end, which specifies that the right-hand edges (the "ends" along the x axi...
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller >
div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller >
div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <
div>, and 2rems outside the inline end edge of the third <
div>.
scroll-margin - CSS: Cascading Style Sheets
html the html that represents the blocks is very simple: <
div class="scroller"> <
div>1</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> </
div> css let's walk through the css.
... the child elements are styled as follows: .scroller >
div { flex: 0 0 250px; width: 250px; background-color: #663399; color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; } .scroller >
div:nth-child(2n) { background-color: #fff; color: #663399; } the most relevant part here is scroll-snap-align: start, which specifies that the left-hand edges (the "starts" along the ...
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller >
div:nth-child(2) { scroll-margin: 1rem; } .scroller >
div:nth-child(3) { scroll-margin: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the left edge of the second <
div>, and 2rems outside the left edge of the third <
div>.
scroll-snap-destination - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap destination html <
div id="container"> <
div> <p>at coordinate (0, 0)</p> <
div class="scrollcontainer destination0"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> <
div> <p>at coordinate (25, 0)</p> <
div class="scrollcontainer destination25"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> <
div> <p>at coordinate (50, 0)</p> <
div c...
...lass="scrollcontainer destination50"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> </
div> css #container { display: flex; } #container >
div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; scroll-snap-destination: 20px 0; font-size: 0; } .destination0 { scroll-snap-destination: 0 0; } .destination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer >
div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer >
div:nth-child(even) { background-color: #87ea87; } ...
... .scrollcontainer >
div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scrollbar-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples coloring overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; } html <
div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... gumbo beet greens corn soko en
dive gumbo gourd.
...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
w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <
div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
... gumbo beet greens corn soko en
dive gumbo gourd.
...dandelion cucumber earthnut pea peanut soko zucchini.</
div> result specifications specification status comment css scrollbars level 1the definition of 'scrollbar-width' in that specification.
matrix3d() - CSS: Cascading Style Sheets
html <section id="example-element" tabindex="0"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </section> css #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50px auto; } #example-e...
... html <
div class="foo"> lorem ipsum dolor sit amet, consectetur adipisicing elit.
...</
div> css html { width: 100%; } body { height: 100vh; /* centering content */ display: flex; flex-flow: row wrap; justify-content: center; align-content: center; } .foo { width: 50%; padding: 1em; color: white; background: #ff8c66; border: 2px dashed black; text-align: center; font-family: system-ui, sans-serif; font-size: 14px; /* setting up animation for better demonstration */ animation: motionscale 2s alternate linear infinite; } @keyframes motionscale { from { /* identity matrix is used as basis here.
translate - CSS: Cascading Style Sheets
the translate css property allows you to specify translation transforms in
dividually and independently of the transform property.
...]?where <length-percentage> = <length> | <percentage> examples html <
div> <p class="translate">translation</p> </
div> css * { box-sizing: border-box; } html { font-family: sans-serif; }
div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; 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 'in
dividual transforms' in that specification.
Video player styling basics - Developer guides
the custom video controls and <progress> element are now contained within <
div> elements, rather than residing inside unordered list items.
... the markup for the custom controls now looks as follows: <
div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <
div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </
div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </
div> related css alteration the previous article simply set the display property of the vid...
... the <
div> container for the <progress> element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer: .controls .progress { cursor:pointer; width:75.390625%; } buttons the first major styling task to tackle is to make the video control's buttons actually look like and act like real buttons.
<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
this tag has been deprecated in html 4 (and xhtml 1) in favor of the css text-align property, which can be applied to the <
div> element or to an in
dividual <p>.
...<p>so will this paragraph.</p></center> example 2 (css alternative) <
div style="text-align:center">this text will be centered.
... <p>so will this paragraph.</p></
div> example 3 (css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:center to a <
div> or <p> element centers the contents of those elements while leaving their overall dimensions unchanged.
<dl>: The Description List element - HTML: Hypertext Markup Language
or: one or more <
div> elements, optionally intermixed with <script> and <template> elements.
... <dl> <dt>name</dt> <dd>godzilla</dd> <dt>born</dt> <dd>1952</dd> <dt>birthplace</dt> <dd>japan</dd> <dt>color</dt> <dd>green</dd> </dl> tip: it can be handy to define a key-value separator in the css, such as: dt::after { content: ": "; } wrapping name-value groups in <
div> elements whatwg html allows wrapping each name-value group in a <dl> element in a <
div> element.
... <dl> <
div> <dt>name</dt> <dd>godzilla</dd> </
div> <
div> <dt>born</dt> <dd>1952</dd> </
div> <
div> <dt>birthplace</dt> <dd>japan</dd> </
div> <
div> <dt>color</dt> <dd>green</dd> </
div> </dl> notes do not use this element (nor <ul> elements) to merely create indentation on a page.
<input type="email"> - HTML: Hypertext Markup Language
if the multiple attribute is specified, each in
dividual item in the comma-delineated list of values must match the regular expression.
...let's see how: body { font: 16px sans-serif; } .emailbox { padding-bottom: 20px; } .messagebox { padding-bottom: 20px; } label { line-height: 22px; } label::after { content: ":"; } <form> <
div class="emailbox"> <label for="emailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> </
div> <
div class="messagebox"> <label for="message">request</label><...
...br> <textarea id="message" cols="80" rows="8" required placeholder="my shoes are too tight, and i have forgotten how to dance."></textarea> </
div> <input type="submit" value="send request"> </form> our <form> contains one <input> of type email for the user's e-mail address, a <textarea> to enter their message for it into, and an <input> of type "submit", which creates a button to submit the form.
<input type="image"> - HTML: Hypertext Markup Language
html <form> <p>login to your account</p> <
div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </
div> <
div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </
div> <
div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="100"> </
div> </form> css and now so...
...me simple css to make the basic elements sit more neatly:
div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } adjusting the image position and scaling in this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using object-fit and object-position.
... html <form> <p>login to your account</p> <
div> <label for="userid">user id</label> <input type="text" id="userid" name="userid"> </
div> <
div> <label for="pwd">password</label> <input type="password" id="pwd" name="pwd"> </
div> <
div> <input id="image" type="image" src="/static/external/62/62ac2ecddbec0e0b540098c28451e57203e5cab46dfed7ab0115d5a659fcfb7b.png" alt="login" width="200" height="100"> </
div> </form> css
div { margin-bottom: 10px; } label { display: inline-block; width: 70px; text-align: right; padding-right: 10px; } #image { object-position: right top; object-fit: contain; background-color: #ddd; } here, object-position is configured to draw the image at the top-right corner of the element, while object-fit is s...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
in
dividual attributes accept valid for the file input type only, the accept attribute defines which file types are selectable in a file upload control.
... you could make a <
div> look like a radio button with
div {appearance: radio;} or a radio look like a checkbox with [type="checkbox] {appearance: checkbox;}, but don't.
...the
diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
examples basic example <p>use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".</p> representing keystrokes within an input to describe an input comprised of multiple keystrokes, you can nest multiple <kbd> elements, with an outer <kbd> element representing the overall input and each in
dividual keystroke or component of the input enclosed within its own <kbd>.
... html <p>you can also create a new document using the keyboard shortcut <kbd><kbd>ctrl</kbd>+<kbd>n</kbd></kbd>.</p> this wraps the entire key sequence in an outer <kbd> element, then each in
dividual key within its own, in order to denote the components of the sequence.
... recommendation expanded to include any user input, like voice input and in
dividual keystrokes.
<tr>: The Table Row element - HTML: Hypertext Markup Language
alignobsolete since html5 a domstring which specifies how the cell's context should be aligned horizontally within the cells in the row; this is shorthand for using align on every cell in the row in
dividually.
...for example, when displaying money values for currencies that use hundredths of a unit (such as the dollar, which is
divided into 100 cents), you would typically specify a value of 2, so that in tandem with char being set to ".", the values in a column would be cleanly aligned on the decimal points, with the number of cents properly displayed to the right of the decimal point.
...etime="2011-01013">january 13, 2011</time></td> <td><time datetime="2017-04008">april 8, 2017</time></td> <td>37.00</td> </tr> <tr> <th scope="row">hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>n/a</td> <td>15.00</td> </tr> </tbody> </table> css this time, the html is unchanged, so let's
dive right into the css.
Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <
div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</
div> in this example, the <
div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <
div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</
div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as befo...
...for example, even if the display of the span element is changed to "block", it still would not allow to nest a
div element inside it.
CSP: style-src - HTTP
't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes are also blocked: <
div style="display:none">foo</
div> as well as styles that are applied in javascript by setting the style attribute directly, or by setting csstext: document.queryselector('
div').setattribute('style', 'display:none;'); document.queryselector('
div').style.csstext = 'display:none;'; however, styles properties that are set directly on the element's style property will not be blocked, allowing users to...
... safely manipulate styles via javascript: document.queryselector('
div').style.display = 'none'; these types of manipulations can be prevented by disallowing javascript via the script-src csp directive.
... content-security-policy: style-src 'unsafe-inline'; the above content security policy will allow inline styles like the <style> element, and the style attribute on any element: <style> #inline-style { background: red; } </style> <
div style="display:none">foo</
div> you can use a nonce-source to only allow specific inline style blocks: content-security-policy: style-src 'nonce-2726c7f26c' you will have to set the same nonce on the <style> element: <style nonce="2726c7f26c"> #inline-style { background: red; } </style> alternatively, you can create hashes from your inline styles.
Introduction - JavaScript
once you have a firm grasp of the fundamentals, you can use the javascript reference to get more details on in
dividual objects and statements.
...the prototype-based model provides dynamic inheritance; that is, what is inherited can vary for in
dividual objects.
...objects are
divided into classes and instances with all inheritance through the class hierarchy.
String.prototype.split() - JavaScript
the split() method
divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array.
... the
division is done by searching for a pattern; where the pattern is provided as the first parameter in the method's call.
...after splitting the string, the function logs messages indicating the original string (before the split), the separator used, the number of elements in the array, and the in
dividual array elements.
Remainder (%) - JavaScript
the remainder operator (%) returns the remainder left over when one operand is
divided by a second operand.
... it always takes the sign of the
dividend.
... syntax operator: var1 % var2 examples remainder with positive
dividend 12 % 5 // 2 1 % -2 // 1 1 % 2 // 1 2 % 3 // 2 5.5 % 2 // 1.5 remainder with negative
dividend -12 % 5 // -2 -1 % 2 // -1 -4 % 2 // -0 remainder with nan nan % 2 // nan specifications specification ecmascript (ecma-262)the definition of 'remainder operator' in that specification.
export - JavaScript
syntax there are two types of exports: named exports (zero or more exports per module) default exports (one per module) // exporting in
dividual features export let name1, name2, …, namen; // also var, const export let name1 = …, name2 = …, …, namen; // also var, const export function functionname(){...} export class classname {...} // export list export { name1, name2, …, namen }; // renaming exports export { variable1 as name1, variable2 as name2, …, namen }; // exporting destructured assignments with renaming export...
...each type corresponds to one of the above syntax: named exports: // export features declared earlier export { myfunction, myvariable }; // export in
dividual features (can export var, let, // const, function, class) export let myvariable = math.sqrt(2); export function myfunction() { ...
... }; default exports: // export feature declared earlier as default export { myfunction as default }; // export in
dividual features as default export default function () { ...
MathML element reference - MathML
lement) a <maction> (binded actions to sub-expressions) <maligngroup> (alignment group) <malignmark> (alignment points) e <menclose> (enclosed contents) <merror> (enclosed syntax error messages) f <mfenced> (parentheses) <mfrac> (fraction) g <mglyph> (displaying non-standard symbols) i <mi> (identifier) l <mlabeledtr> (labeled row in a table or a matrix) <mlong
div> (long
division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mpadded> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (radical with specified index) <mrow> (grouped sub-expressions) s <ms> (string literal) <mscarries> (annotations such as carries) <mscarr...
...y> (single carry, child element of <mscarries>) <msgroup> (grouped rows of <mstack> and <mlong
div> elements) <msline> (horizontal lines inside <mstack> elements) <mspace> (space) <msqrt> (square root without an index) <msrow> (rows in <mstack> elements) <mstack> (stacked alignment) <mstyle> (style change) <msub> (subscript) <msup> (superscript) <msubsup> (subscript-superscript pair) t <mtable> (table or matrix) <mtd> (cell in a table or a matrix) <mtext> (text) <mtr> (row in a table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math...
... <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mpadded> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <munderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <mtable> <mtd> <mtr> elementary math <mlong
div> <mscarries> <mscarry> <msgroup> <msline> <msrow> <mstack> uncategorized elements <maction> semantic annotations <annotation> <annotation-xml> <semantics> ...
Media - Progressive web apps (PWAs)
(in html5, this can be marked up with the <nav> element instead of <
div> with an id attribute.) when printing the document, the navigation area has no purpose.
...its values are similar to the border property, except that you cannot specify in
dividual sides.
...copy and paste the content from here: <!doctype html> <html> <head> <title>print sample</title> <link rel="stylesheet" href="style4.css"> </head> <body> <h1>section a</h1> <p>this is the first section...</p> <h1>section b</h1> <p>this is the second section...</p> <
div id="print-head"> heading for paged media </
div> <
div id="print-foot"> page: </
div> </body> </html> make a new stylesheet, style4.css.
x - SVG: Scalable Vector Graphics
if there are multiple values, x defines the x coordinate of each in
dividual glyph from the text.
... if there are multiple values, x defines the x coordinate of each in
dividual glyph from the text.
... if there are multiple values, x defines the x coordinate of each in
dividual glyph from the text.
y - SVG: Scalable Vector Graphics
if there are multiple values, y defines the y coordinate of each in
dividual glyph from the text.
... if there are multiple values, y defines the y coordinate of each in
dividual glyph from the text.
... if there are multiple values, y defines the y coordinate of each in
dividual glyph from the text.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the basic convolution formula which is applied to each color value for a given pixel is: colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-targetx+j, y-targety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) /
divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the ‘order’ attribute, "targetx" represents the value of the ‘targetx’ attribute, "targety" represents the value of the ‘targety’ attribute, "kernelmatrix" represents the value of the ‘kernelmatrix’ attribute, "
divisor" represents the value of the ‘
divisor’ attribute, and "bias" represents th...
...assuming the simplest case (where the input image's pixel grid aligns perfectly with the kernel's pixel grid) and assuming default values for attributes ‘
divisor’, ‘targetx’ and ‘targety’, then resulting color value will be: (9* 0 + 8* 20 + 7* 40 + 6*100 + 5*120 + 4*140 + 3*200 + 2*220 + 1*240) / (9+8+7+6+5+4+3+2+1) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes presentation attributes filter primiti...
...ve attributes class style specific attributes in order kernelmatrix
divisor bias targetx targety edgemode kernelunitlength preservealpha dom interface this element implements the svgfeconvolvematrixelement interface.
Tutorials
css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to
dive a bit deeper.
...we have covered the necessary prerequisites so can now
dive deep into css layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.
... you don't know js a series of books
diving deep into the core mechanisms of the javascript language.
Using custom elements - Web Components
the custom element looks like this: <custom-square l="100" c="red"></custom-square> the class constructor is really simple — here we attach a shadow dom to the element, then attach empty <
div> and <style> elements to the shadow root: const shadow = this.attachshadow({mode: 'open'}); const
div = document.createelement('
div'); const style = document.createelement('style'); shadow.appendchild(style); shadow.appendchild(
div); the key function in this example is updatestyle() — this takes an element, gets its shadow root, finds its <style> element, and adds width, height, and backgrou...
... function updatestyle(elem) { const shadow = elem.shadowroot; shadow.queryselector('style').textcontent = `
div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } the actual updates are all handled by the life cycle callbacks, which are placed inside the class definition as methods.
...as you can see from its properties, it is possible to act on attributes in
dividually, looking at their name, and old and new attribute values.
Introduction to using XPath in JavaScript - XPath
specifying the return type the returned variable xpathresult from document.evaluate can either be composed of in
dividual nodes (simple types), or a collection of nodes (node-set types).
...ypes the xpathresult object allows node-sets to be returned in 3 principal different types: iterators snapshots first nodes iterators when the specified result type in the resulttype parameter is either: unordered_node_iterator_type ordered_node_iterator_type the xpathresult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the in
dividual nodes contained by using the iteratenext() method of the xpathresult.
... once we have iterated over all of the in
dividual matched nodes, iteratenext() will return null.
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
advanced example this advanced example sorts several
divs based on their content.
... figure 7: sorting based on
div contentview example // xhtml fragment: <
div id="example"> <
div>1</
div> <
div>2</
div> <
div>3</
div> <
div>4</
div> <
div>5</
div> <
div>6</
div> <
div>7</
div> <
div>8</
div> <
div>9</
div> <
div>10</
div> </
div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function ...
...ntbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/
div//
div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="
div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...
page-mod - Archive of obsolete content
the following add-on creates a button which, when clicked, highlights all the
div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-
divs", label: "highlight
divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var
divs = document.getelementsbytagname("
div");' + 'for (var i = 0; i <
divs.length; ++i) {' + '
divs[i].se...
...to supply multiple rules, pass an array of strings: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstyle: [ "
div { padding: 10px; color: red }", "img { display: none }" ] }); content styles specified by this option are loaded after those specified by the contentstylefile option.
content/mod - Archive of obsolete content
for example, the following code applies a style to a content window, adding a border to all
divs in page: var attachto = require("sdk/content/mod").attachto; var style = require("sdk/stylesheet/style").style; var style = style({ source: "
div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); parameters modification : object the modification we want to apply to the target.
... for example, the following code applies and removes a style to a content window, adding a border to all
divs in page: var { attachto, detachfrom } = require("sdk/content/mod"); var style = require("sdk/stylesheet/style").style; var style = style({ source: "
div { border: 4px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ...
places/bookmarks - Archive of obsolete content
data events are emitted for every in
dividual operation (such as: each item saved, or each item found by a search query), whereas end events are emitted as the aggregate of an operation, passing an array of objects into the handler.
...//mozilla.com", group: group }), bookmark({ title: "w3", url: "http://w3.org", group: group }) ]; save(bookmarks).on("data", function (item) { // this function will be called three times: // once for each bookmark saved // once for the new group specified implicitly // as the parent of the two items }); the data event is also called for search requests, with each result being passed in
dividually into its own data event.
Miscellaneous - Archive of obsolete content
<
div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area.
...</
div> <script type="text/javascript"> var elm = document.getelementbyid("scrollarea"); elm.addeventlistener("dommousescroll", function scroll(event){ //event.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.act...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
labels use the label element for in
dividual text labels, such as descriptive text.
... <stack> <progressmeter mode="normal" value="50"/> <hbox align="center"> <label value="in progress…"/> </hbox> </stack> listing 21: overlapping with stack figure 17: progress bar tab use the tab element to
divide multiple pages, as used in the properties dialog; use the tabbox element to group related elements.
JavaScript Object Management - Archive of obsolete content
however, most extensions are small projects by in
dividuals, so these examples follow a more practical approach of having just one namespace with the project name.
...if you have complex behavior that requires too much code, look for ways to
divide it into multiple objects and files.
Creating reusable content with CSS and XBL - Archive of obsolete content
copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <
div id="square">click me</
div> </body> </html> make a new css file, style6.css.
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:
div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <implementation> <field name="square"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "square") ]]></field> <field name="button"><![cdata[ document.getanonymouselementbyattribute(this, "anonid", "button") ]]></field> <met...
Getting Started - Archive of obsolete content
for this reason we suggest that you install a second copy into a second directory (make sure that you use a different profile as stated in the release notes) extract the chrome the chrome is stored in \mozilla\chrome and the in
dividual modules are stored in jar files.
...this is a catchall directory which holds all of the images and styles for portions of mozilla that don't merit their own in
dividual directory.
Fast Graphics Performance With HTML - Archive of obsolete content
use <
div><
div style="background:white; position:fixed">simple</
div>lots of text...</
div> instead of <
div><
div style="position:fixed">simple</
div>lots of text...</
div> make the content of scrollable sub frames opaque e.g.
... use <
div style="overflow:scroll><
div style="background:white"><p>this is some text</p><p>and some more</p></
div></
div> instead of <
div style="overflow:scroll><p>this is some text</p><p>and some more</p></
div> animating 'transform' and 'opacity' properties can be done with the compositor which makes them efficient to animate ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
these flags can be grouped into two categories: flags which affect all frames ("public" flags), and flags that are reserved for an in
dividual frame's private use ("private" flags).
... original document information author(s): chris waterson last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Content states and the style system - Archive of obsolete content
for example, say we have the selectors: a:hover a:not(:hover)
div:hover and the hover state on some node changes.
...so the effect will be that of matching a node against the selectors: a a
div the code that implements this is in the selectormatches method, which is passed the list of states that changed in the astatemask parameter.
Modularization techniques - Archive of obsolete content
they can maintain a single reference count for the entire object, or in
dividual reference counts for each interface.
... 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 in
dividual mozilla.org contributors; content available under a creative commons license | details ...
Frequently Asked Questions - Archive of obsolete content
in
dividuals can choose to use a plugin to view svg in mozilla on their own computers, but there is no way for svg content authors to make mozilla use a plugin when people view the svg files on their website.
... original document information author(s): jonathan watt last updated date: november 6, 2006 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Tamarin Build System Documentation - Archive of obsolete content
the page is
divided into the phase table at the top and the waterfall table below the phase table shows all phases at the top of the page, each slave is shown as a box with a red,green, or yellow color: red means failed, green passed, and yellow has warnings.
...compile, smoke, or test to show the build slaves from the most recent phase run or click on an in
dividual box to display the test result below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with color indicating status, red is failed, green passed, yellow has warnings click the stdio link to see the output click on the build yellow box at the bottom of a set of buildsteps to see the result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered a...
Elements - Archive of obsolete content
css:
div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline:
div { -moz-binding: url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0a%3cbi...
...given that the css declarations should be always used - unless you need to add bindings at runtime to in
dividual elements.
Example Sticky Notes - Archive of obsolete content
="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <
div class="sticker"><p>acme, inc.
... fax - respond today.</p></
div> <
div class="sticker"><p>don't forget the eggs!</p></
div> <
div class="sticker"><p>the new project - who's on charge?</p></
div> <
div class="sticker"><p>learn more about xbl.</p></
div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
A XUL Bestiary - Archive of obsolete content
the chrome url this concept of a chrome as an integrated, dynamic thing in some way
divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their related files.
...when you create styles in <style> tags, as style attributes for in
dividual elements, or in custom css files, you break the ability of gecko to skin the application to which your xul belongs.
spellcheck - Archive of obsolete content
--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <
div contenteditable="true" spellcheck="true">i am some content</
div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <
div contenteditable="true" spellcheck="false">i am some content</
div> you can use spellcheck on input, textarea, and contenteditable elements.
treecell.editable - Archive of obsolete content
« xul reference home editable type: boolean allows the contents of in
dividual cells in the column to be changed, especially useful when <treecol type="checkbox">.
... also useful for disabling editing of in
dividual treecells.
MenuButtons - Archive of obsolete content
this is accomplished by
dividing the button into two parts, one with the label and image to carry out the default command and the second to show the menu.
...we might want to extend this example to insert a list of the unsaved documents to the save button menu so that each could be saved in
dividually.
Box Objects - Archive of obsolete content
about mozilla layout mozilla
divides things into two sets of trees, the content tree and the layout tree.
...the layout tree holds a different tree of nodes for each in
dividual component that can be displayed.
Skinning XUL Files by Hand - Archive of obsolete content
as you will see, css provides a lot of flexibility for defining styles to in
dividual elements, to classes of elements, to pseudo-classes, and to anonymous classes.
... types of style definitions: class id element.class { attribute: value; } element#id { attribute: value; } menu.baseline { border: 0px; font-size: 9pt; } menu#edit { color: red; } other style subgroups contextualsubgroups -- elements appearing within other elements, such as italicized text anywhere within a <p> element or a <
div> -- can be grouped in css, but this is an extremely inefficient way to style xul, and is frowned upon in the mozilla development community (again, refer to the skinning guidelines in writing skinnable xul and css for more info); css2 also provides some new ways to group elements for styling, which we summarize briefly here, because they appear in mozilla with some frequency, but reserve for anoth...
The Box Model - Archive of obsolete content
this model allows you to
divide a window into a series of boxes.
... example so far: source view in the next section, we will look at specifying the sizes of in
dividual elements and how to constrain their sizes.
The Implementation of the Application Object Model - Archive of obsolete content
in
dividual widgets, even complex widgets like the trees and toolbars need little to no drawing code (above and beyond what nglayout already has) in order to work.
... preventing the persistence of attributes: the discardable attribute in
dividual attributes can be specified as non-persistent (i.e.,discardable) through the use of the discardable attribute.
textbox - Archive of obsolete content
--> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <
div contenteditable="true" spellcheck="true">i am some content</
div> <!-- spellcheck nothing!
... --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <
div contenteditable="true" spellcheck="false">i am some content</
div> you can use spellcheck on input, textarea, and contenteditable elements.
treecell - Archive of obsolete content
attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of in
dividual cells in the column to be changed, especially useful when <treecol type="checkbox">.
... also useful for disabling editing of in
dividual treecells.
Gecko Compatibility Handbook - Archive of obsolete content
<style type="text/css"> #id1 { text-decoration: line-through; } #id1 { text-decoration: underline; } </style> <
div id="id1"> should be line-through </
div> <
div id="id1"> should be underline </
div> -(example removed)- note that the w3c's html validator will flag html id attributes as duplicates if they only differ due to case.
... css class names should be case-sensitive <style type="text/css"> .class1 { font-size: 1em; } .class1 { font-size: 2em; } </style> <
div> <
div class="class1"> should be font-size: 1em; </
div> <
div class="class1"> should be font-size: 2em; </
div> -(example removed)- gecko implements the case sensitivity of class names correctly and will display this example correctly while internet explorer treats all css classnames's as case-insensitive and will not display this example correctly.
Mozilla release FAQ - Archive of obsolete content
the project is maintained by employees of netscape (now a
division of aol), red hat, some other companies, as well as contributors from the community.
...for the second case, go to the mozilla community section to unsubscribe original document information author(s): pat gunn last updated date: may 28, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Introduction to Public-Key Cryptography - Archive of obsolete content
certificates and authentication managing certificates certificates and authentication a certificate identifies someone or something authentication confirms an identity how certificates are used contents of a certificate how ca certificates are used to establish trust a certificate identifies someone or something a certificate is an electronic document used to identify an in
dividual, a server, a company, or some other entity and to associate that identity with a public key.
... neither password-based authentication nor certificate-based authentication address security issues related to physical access to in
dividual machines or passwords.
TCP/IP Security - Archive of obsolete content
in some environments, network layer controls such as internet protocol security (ipsec) provide a much better solution than transport or application layer controls because of the difficulties in adding controls to in
dividual applications.
... transport layer protocols such as ssl are most commonly used to provide security for communications with in
dividual http-based applications, although they are also used to provide protection for communication sessions of other types of applications such as smtp, point of presence (pop), internet message access protocol (imap), and file transfer protocol (ftp).
XForms Custom Controls - Archive of obsolete content
overview the mozilla xforms controls are largely implemented using xbl and the bindings are applied to the in
dividual xforms control tags via css.
...<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms"> <head> <title>custom image control sample</title> <bindings id="xformsbindings" xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:
div> <html:img anonid="content"/> </html:
div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> <!-- set the src attribute on the html:img to be the simplecontent of the instance node bound to this control --> var img = document.getanonymouselementbyattribute(this, "anonid", "...
XForms Custom Controls Examples - Archive of obsolete content
output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:
div> <html:img anonid="content"/> </html:
div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidg...
...et-output"> <content> <children includes="label"/> <xhtml:
div class="xf-value" anonid="content"></xhtml:
div> <children/> </content> <implementation implements="nsixformsuiwidget"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <getter> if (!this._domparser) this._domparser = new domparser(); return this._domparser; </getter> </property> <method name="refresh"> <body> // get new value, parse, and import it.
Windows Media in Netscape - Archive of obsolete content
since classids are affiliated with in
dividual activex controls in a unique manner, this allows for unique instantiation of controls.
...in ie, a named html element such as a
div may be given to the windows media player control and it will be automatically updated with caption data.
Anatomy of a video game - Game development
other games demand control over each of the smallest possible in
dividual timeslices.
...you could draw every pixel in
dividually on a canvas or you could layer dom elements (including multiple webgl canvases with transparent backgrounds if you want) into a complex hierarchy.
Gecko FAQ - Gecko Redirect 1
gecko lies at the heart of mozilla and firefox browsers, as well as others, powering all of the in
dividual components.
...r win32, x, and mac user preferences library mozilla plug-in api (npapi) to support the navigator plug-in interface open java interface (oji), with sun java 1.2 jvm rdf back end font library security library (nss) original document information author(s): angus other contributors: ekrock, vidur, hidday, drunclear copyright information: portions of this content are © 1998–2006 by in
dividual mozilla.org contributors; content available under a creative commons license ...
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> <
div>six</
div> <
div>seven</
div> <
div>e...
...ight</
div> </
div> ...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <
div class="wrapper"> <
div class="item1">item</
div> <...
...
div class="item2">item</
div> </
div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns grid-template-areas grid-area further reading css grid layout guide: basic concepts of grid layout css grid layout guide: grid template areas definition of grid areas in the css grid layout specification ...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
if you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each in
dividual grid cell by the auto-placement algorithm.
... * {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> learn more property reference grid-temp...
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is
divided by 4.
... * {box-sizing: border-box;} .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; } .wrapper { display: grid; grid-template-columns: 200px 1fr 3fr; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> track sizing in the implicit grid tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns properties.
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
would you know what part of the dom is being selected with
div > ul > li, or .fruits__item?
... some of the benefits from writing semantic markup are as follows: search engines will consider its contents as important keywords to influence the page's search rankings (see seo) screen readers can use it as a signpost to help visually impaired users navigate a page finding blocks of meaningful code is significantly easier than searching though endless
divs with or without semantic or namespaced classes suggests to the developer the type of data that will be populated semantic naming mirrors proper custom element/component naming when approaching which markup to use, ask yourself, "what element(s) best describe/represent the data that i'm going to populate?" for example, is it a list of data?; ordered, unordered?; is it an article with sections...
CSS and JavaScript accessibility best practices - Learn web development
form elements elements to allow users to input data into websites: <
div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </
div> you can see some good example css in our form-css.html example (see it live also).
... as a final note, we have used some wai-aria attributes in our demo to help solve accessibility problems caused by areas of content constantly updating without a page reload (screen readers won't pick this up or alert users to it by default): <
div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </
div> we will explain these attributes in our next article, which covers wai-aria in much more detail.
Normal Flow - Learn web development
first of all, in
dividual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we've looked at earlier.
...if you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block; (or even,display: inline-block; which mixes characteristics from both.) that explains in
dividual elements, but what about how elements interact with one another?
Responsive design - Learn web development
as more
diverse screen sizes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
... target / context = result for example, if our target column size is 60 pixels, and the context (or container) it is in is 960 pixels, we
divide 60 by 960 to get a value we can use in our css, after moving the decimal point two places to the right.
CSS layout - Learn web development
we have covered the necessary prerequisites so we can now
dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
... responsive design as more
diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (rwd) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
Learn to style HTML using CSS - Learn web development
css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to
dive a bit deeper.
...we have covered the necessary prerequisites so we can now
dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
Advanced form styling - Learn web development
take the following example, which shows a number of the "ugly" form features in action: this example has the following css applied to it: body { font-family: 'josefin sans', sans-serif; margin: 20px auto; max-width: 400px; } form >
div { margin-bottom: 20px; } select { -webkit-appearance: none; appearance: none; } .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; position: absolute; } button, label, input, select, progress, meter { display: block; font-family: inherit; font-size: 100%; padding: 0; margin: 0; box-sizing: bord...
...we put an extra wrapper around the control, because ::before/::after don't work on <select> elements (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements — their display is generated by the browser and put in place — and therefore don't have one): <
div class="select-wrapper"><select id="select" name="select"> <option>banana</option> <option>cherry</option> <option>lemon</option> </select></
div> we then use generated content to generate a little down arrow, and put it in the right place using positioning: .select-wrapper { position: relative; } .select-wrapper::after { content: "▼"; font-size: 1rem; top: 6px; right: 10px; ...
Client-side form validation - Learn web development
now delete the contents of the <body> element, and replace it with the following: <form> <
div> <label for="choose">would you prefer a banana or a cherry?</label> <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"> </
div> <
div> <label for="number">how many would you like?</label> <input type="number" id="number" name="amount" value="1" min="1" max="10"> </
div> <
div> <button>submit</button> </
div> </form> here you'll see that w...
... input:invalid { border: 2px dashed red; } input:valid { border: 2px solid black; }
div { margin-bottom: 10px; } here is the example running live: note: you can find this example live on github as fruit-length.html (see also the source code.) note: <input type="number"> (and other types, such as range and date) can also take a step attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number but...
Example 2 - Learn web development
js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* -...
...ener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; heig...
CSS basics - Learn web development
(the term ruleset is often referred to as just rule.) note the names of the in
dividual parts: selector this is the html element name at the start of the ruleset.
...(here, auto is a special value that
divides the available horizontal space evenly between left and right).
HTML basics - Learn web development
anatomy of an html document that wraps up the basics of in
dividual html elements, but they aren't handy on their own.
... now we'll look at how in
dividual elements are combined to form an entire html page.
JavaScript basics - Learn web development
you start by declaring a variable with the var (less recommended,
dive deeper for the explanation) or the let keyword, followed by the name you give to the variable: let myvariable; note: a semicolon at the end of a line indicates where a statement ends.
... + 6 + 9; 'hello ' + 'world!'; subtraction, multiplication,
division these do what you'd expect them to do in basic math.
Mozilla splash page - Learn web development
adding responsive images to the further info links inside the <
div> with the class of further-info you will find four <a> elements — each one linking to an interesting mozilla-related page.
... an art directed red panda inside the <
div> with the class of red-panda, we want to insert a <picture> element that serves the small portrait panda image if the viewport is 600px wide or less, and the large landscape image otherwise.
HTML table basics - Learn web development
tables are not automatically responsive: when you use proper layout containers (such as <header>, <section>, <article>, or <
div>), their width defaults to 100% of their parent element.
... active learning: creating your first table we've talked table theory enough, so, let's
dive into a practical example and build up a simple table.
Test your skills: Events - Learn web development
events 3 in our final events-related task, you need to set an event listener on the <button>s' parent element (<
div class="button-bar"> ...
... </
div>), which when invoked by clicking any of the buttons will set the background of the button-bar to the color contained in the button's data-color attribute.
JavaScript object basics - Learn web development
sending a single object is much more efficient than sending several items in
dividually, and it is easier to work with than an array, when you want to identify in
dividual items by name.
... when you accessed the document object model using lines like this: const my
div = document.createelement('
div'); const myvideo = document.queryselector('video'); you were using methods available on an instance of the document class.
Client-Server Overview - Learn web development
you would repeat a lot of code across each page (the basic page template, structure, etc.), and if you wanted to change anything about the page structure — like add a new "related products" section for example — then you'd have to change every page in
dividually.
...using the example of a product site, the server would store product "data" in a database rather than in
dividual html files.
Website security - Learn web development
the xss vulnerabilities are
divided into reflected and persistent, based on how the site returns the injected scripts to a browser.
...the requests may simply be numerous, or they may in
dividually consume large amounts of resource (e.g., slow reads or uploading of large files).
TypeScript support in Svelte - Learn web development
replace the content of the filterbutton.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <
div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = filter.all} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} ...
...">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </
div> here we are just importing the filter enum, and using it instead of the string values we used previously.
Handling common HTML and CSS problems - Learn web development
the following example shows date and time inputs: <form> <
div> <label for="date">enter a date:</label> <input id="date" type="date"> </
div> <
div> <label for="time">enter a time:</label> <input id="time" type="time"> </
div> </form> the output of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } input { float: right; width: 65%; } ...
... label, input { margin-bottom: 20px; }
div { clear: both; margin: 10px; } body { width: 400px; margin: 0 auto; } <form> <
div> <label for="date">enter a date:</label> <input id="date" type="date"> </
div> <
div> <label for="time">enter a time:</label> <input id="time" type="time"> </
div> </form> note: you can also see this running live as forms-test.html on github (see the source code also).
Command line crash course - Learn web development
create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <
div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
... before we
dive into installing prettier, there's a question to answer — "where should we install to?" with npm we have the choice of installing tools globally — so we can access them anywhere — or locally to the current project directory.
Mozilla accessibility architecture
all other accessibles for the in
dividual objects are created on demand as well.
...isimpledomnode is used by the assistive technology to get access to information about in
dividual dom nodes which may or may not be "accessible".
A bird's-eye view of the Mozilla framework
the article focuses on the architecture of the overall framework supporting the mozilla application suite, not the architecture of the in
dividual applications themselves.
...using the database attribute of the xulelement, getlink() obtains an nsirdfcompositedatasource, which presents the in
dividual datasources of the xulelement as a single rdf graph.
Building SpiderMonkey with UBSan
/bin/sh if [ -z $1 ] ; then echo "usage: $0 <dirname>" elif [ -d $1 ] ; then echo "directory $1 already exists" else autoconf2.13 autoconf213 mkdir $1 cd $1 llvm_root="$home/llvm" sanflag="-fsanitize=undefined -fno-sanitize=alignment,float-cast-overflow,float-
divide-by-zero,vptr -dxmalloc=myxmalloc" \ cc="$llvm_root/build/release+asserts/bin/clang" \ cxx="$llvm_root/build/release+asserts/bin/clang++" \ cflags="$sanflag" \ cxxflags="$sanflag" \ moz_llvm_hacks=1 \ ../configure --enable-debug --disable-optimize make -j 8 fi 3.
...this enables all the cheap undefined behavior checks other than: alignment, which hits known bugs in spidermonkey, and is more implementation-defined (slow on x86 / crash on arm) than undefined behavior float-cast-overflow, which hits known bugs in spidermonkey, and isn't exploited by today's compilers float-
divide-by-zero, which jesse doesn't think is actually undefined behavior (aside from the question of whether cpu overflow flags are set) vptr, a check that requires rtti, which is disabled by default in spidermonkey 4.
Continuous Integration
there is a group of in
dividuals who are constantly monitoring treeherder, looking for broken builds and/or tests.
... these in
dividuals are known as sheriffs.
Updating NSPR or NSS in mozilla-central
do not check in in
dividual changes.
... if you check in an in
dividual change by mistake, your change will be lost when the nspr and nss teams push a new hg tag to mozilla-central.
Multiple Firefox profiles
if you want in
dividual icons to launch specific profiles, you will need to edit the "target" of each icon.
... if you want in
dividual icons to launch specific profiles, you will need to set the command line for your new launcher.
Communicating with frame scripts
essagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <
div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "
div" } <xul:browser anonid="initialbrowser" ...
... > { target: <
div#searchcontainer> } if your code requires access to a window (for example to run window.opendialog), and your message listener is run from somewhere without access to a window (e.g.
CSS -moz-bool-pref() @supports function
html <
div id="pref-test"> this will have a green background if the <code>test</code> preference is enabled.
... </
div> css @supports -moz-bool-pref("test") { #pref-test { background: green; } } @supports not -moz-bool-pref("test") { #pref-test { background: red; } } result ...
JavaScript-DOM Prototypes in Mozilla
here is a diagram that shows the prototype layout of a html
divelement in mozilla: html
divelement.prototype | |.__proto__ | htmlelement.prototype | |.__proto__ | element.prototype | |.__proto__ | node.prototype | |.__proto__ | object.prototype | |.__prot...
...o__ | null if you have an instance of a html
divelement in javascript, the following will hold true:
div.__proto__ === html
divelement.prototype which means that the following should also be true:
div.__proto__ ===
div.constructor.prototype non standard no browser is required to provide modifiable __proto__, nor a global node, nor provide any way to get at host objects nor their associated prototypes.
Download
you should use the in
dividual state properties instead, since this value may not be updated after the last piece of data is transferred.
...you should use the in
dividual state properties (for example, the succeeded property) instead.
Application Translation with Mercurial
file and text editor for editing in
dividual files a text editor can be a better choice than a file comparion program, e.g.
...this can be done in a text editor or word processor or any other tool in which you can attach different kind of states to the in
dividual texts to translate.
Localization content best practices
note on localizers mozilla localizers are volunteers with very
diverse technical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with vcs systems.
...given the
diversity of tools used by localization teams, this is the only reliable method to ensure that localizers update existing localizations.
Extras
-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:.9;"/> </radialgradient> </defs> <g> <animatemotion path="m0,0 l3,0 l2,5 l5,5 l0,4 l5,2 z" begin="0s" dur="0.5s" repeatcount="indefinite"/> <circle fill="url(#radgrad2)" r="5px" cx="5px" cy="5px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <
div style="width: 300px; margin-left: auto; margin-right: auto;"> <svg width="300px" height="250px"> <defs> <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/> </lineargradient> <lineargradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%...
...eight="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </
div> inline javascript html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlist...
Mozilla MathML Status
mlong
div not implemented.
... original document information author(s): frédéric wang other contributors: copyright information: portions of this content are © 2010 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
NSS API Guidelines
low cert lib/certdb cdbhdl.h, certdb.h, cert.h, certt.h certhi provides high-level certificate-related functions, that do not access the certificate database, nor in
dividual certificate data directly.
...in this same example: struct secmyopaquedatastr { unsigned long myprivatedata1; unsigned long myprivatedata2; char *myname; }; the second task is to determine if in
dividual data fields, within the data structure, are part of the api.
NSS tools : certutil
-s create an in
dividual certificate and add it to a certificate database.
...for example, for an email certificate with two cas in the chain: $ certutil -d sql:/home/my/sharednssdb -o -n "jsmith@example.com" "builtin object token:thawte personal freemail ca" [e=personal-freemail@ thawte.com,cn=thawte personal freemail ca,ou=certification services
divi sion,o=thawte consulting,l=cape town,st=western cape,c=za] "thawte personal freemail issuing ca - thawte consulting" [cn=thawte p ersonal freemail issuing ca,o=thawte consulting (pty) ltd.,c=za] "(null)" [e=jsmith@example.com,cn=thawte freemail member] resetting a token the device which stores certificates -- both external hardware devices and internal software data...
certutil
-s create an in
dividual certificate and add it to a certificate database.
...for example, for an email certificate with two cas in the chain: $ certutil -d sql:/home/my/sharednssdb -o -n "jsmith@example.com" "builtin object token:thawte personal freemail ca" [e=personal-freemail@thawte.com,cn=thawte personal freemail ca,ou=certification services
division,o=thawte consulting,l=cape town,st=western cape,c=za] "thawte personal freemail issuing ca - thawte consulting" [cn=thawte personal freemail issuing ca,o=thawte consulting (pty) ltd.,c=za] "(null)" [e=jsmith@example.com,cn=thawte freemail member] resetting a token the device which stores certificates -- both external hardware devices and internal software databases -- ca...
Necko Architecture
uris (recall that a url is just one implementation of a uri) can be created as in
dividual components independently of necko, or they can be retrieved via the nsiioservice interface.
... dependencies necko requires the following libraries for linking: nspr xpcom original document information author(s): jud valeski last updated date: november 8, 1999 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Hacking Tips
to run these benchmarks localy, you can clone arewefastyet sources and look inside the benchmarks directory to run in
dividual benchmarks with your js shell.
... debugging gc marking/rooting the js::debug namespace contains some functions that are useful for watching mark bits for an in
dividual jsobject* (or any cell*).
Web Replay
logpoints cannot have side-effects or
diverge from the recording in any othe way in this mode.
... threads are in
dividually responsible for restoring their stacks; when they wake up from the idle state they see the main thread has prepared a new stack to restore to, so they longjmp to the new register state and copy in the new stack's contents.
Mozilla Projects
l20n l20n lets localizers reach higher levels of free linguistic expression by sharpening the
divide between localization and application logic.
... anyone can contribute to the onward development of zest, and teams or in
dividuals who develop security tools are especially welcome to join and help shape zest's future.
Secure Development Guidelines
if (!ptr) exit(exit_failure); memcpy(ptr, user_data, size1); } casting issues: sign extension example: int main() { int32_t new_size = 0; int8_t size = 0xff; new_size = size; printf("0x%08x\r\n", new_size); } casting issues: sign extension prevention be careful with signed integers use unsigned integers for sizes, offsets, and indexes denial of service:
divide by zero example: int main() { int a, b; if (argc != 3) return 1; a = atoi(argv[1]); b = atoi(argv[2]); return a/b; } denial of service:
divide int_min by -1 example: int main(int argc, char **argv) { int a, b; if (argc != 3) return 1; a = atoi(argv[1]); b = atoi(argv[2]); return b ?
... ~foo() { if (ptr) free(ptr); } }; constructor/destructor issues: prevention initialize the data members of an object in the constructor writing secure code: miscellaneous file i/o a lot can go wrong because a lot can be done with file input and output filenames permissions file handles and descriptors file i/o: filename
divided in directories, subdirectories, and the file itself ‘/’ is separator; in windows ‘\’ would work too int openfile(char *file) { handle fh; if (strstr(file, “\”)) return -1; fh = createfilea(file, ...); writefile(fh, data, sizeofdata, null, null); } could be a normal file, directory, device, or link directory traversal (../../../../) file i...
Creating the Component Code
use the calculator (after learning long
division) you have to write a fair amount of code to create a component library that gets loaded into xpcom.
...as in grade school when you learned long
division, better tools like calculators come after you figure out what's actually happening.
Mozilla internal string guide
it provides an api for assignment, in
dividual character access, basic manipulation of characters in the string, and string comparison.
... original document information author: alec flett copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Index
accordingly, the book is arranged so that you can follow along and create your own components or learn about different xpcom topics in
dividually, as in a reference work.
...lists are built in real-time during the sequence of build calls, make sure to check for errors on each in
dividual step.
mozIRegistry
i think these things can be
divided into two categories, according to the basic service they provide: identifying the implementers of a given interface.
... original document information author: bill law last updated date: january 21, 1999 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
XPCOM ownership guidelines
special code must be provided and called to break the cycle before the participants can be in
dividually released.
...portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Mail client architecture overview
it manages in
dividual accounts on mail servers and the identity of users as used to send mail.
...this library has the cabability to stream messages to an html renderer such as gecko, manage in
dividual parts of messages, and so forth.
Streams - Plugins
an in
dividual call to npn_requestread can request discontiguous ranges, and you can have many outstanding npn_requestread calls.
...in this case, the browser can write in
dividual ranges in any order, with any number of npp_writeready and npp_write calls.
Introduction to DOM Inspector - Firefox Developer Tools
note that when the dom inspector displays information about a particular node or subtree, it presents in
dividual nodes and their values (in the dom, attributes are subnodes of elements, typically) in an active list.
... you can perform actions on the in
dividual items in this list from the context menu and the edit menu, both of which contain menutimes that allow you edit the values of those attributes.
DOM allocation example - Firefox Developer Tools
(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("
div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbutton = createtoolbarbutton(); toolbar.appendchild(toolbarbutton); } return toolbar; } function createtoolbars() { var container = document.getelementbyid("container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = cre...
...atetoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1
div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200 html
divelement objects, and 4000 htmlspanelement objects.
ANGLE_instanced_arrays - Web APIs
constants this extension exposes one new constant, which can be used in the gl.getvertexattrib() method: ext.vertex_attrib_array_
divisor_angle returns a glint describing the frequency
divisor used for instanced rendering when used in the gl.getvertexattrib() as the pname parameter.
... ext.vertexattrib
divisorangle() modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with ext.drawarraysinstancedangle() and ext.drawelementsinstancedangle().
AnalyserNode - Web APIs
number of inputs 1 number of outputs 1 (but may be left unconnected) channel count mode "max" channel count 2 channel interpretation "speakers" inheritance this interface inherits from the following parent interfaces: <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
.../><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor analysernode() creates a new instance of an analysernode object.
AnimationEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><lin...
...e x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
Attr - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monac...
...e4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods output warning messages to the console.
AudioBufferSourceNode - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fil...
...1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
AudioContext - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
BeforeInstallPromptEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment...
... x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
BeforeUnloadEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde...
...1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); })...
BluetoothDevice - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} interface interface bluetoothdevice { readonly attribute domstring id; readonly attribute domstring?
BroadcastChannel - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor broadcastchannel() creates an object linking to the named channel.
CDATASection - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke=...
...><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cdatasection" target="_top"><rect x="391" y="65" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="451" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cdatasection</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific properties and implements those of its parent text.
CSSCounterStyleRule - Web APIs
inheritance this interface inherits from the following parent interfaces: <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20...
...6" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSPositionValue.CSSPositionValue() - Web APIs
examples the following example positions a container <
div> 5 pixels from the top and 10 pixels from the left of the page.
... let some
div = document.getelementbyid('container'); let position = new csspositionvalue(css.px(5), css.px(10)); some
div.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); // 5 10 ...
CSSPositionValue.x - Web APIs
example the following example positions a container <
div> 5 pixels from the top and 10 pixels from the left of the page.
... let some
div = document.getelementbyid('container'); let position = new csspositionvalue(css.px(5), css.px(10)); some
div.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSPositionValue.y - Web APIs
example the following example positions a container <
div> 5 pixels from the top and 10 pixels from the left of the page.
... let replaceel = document.getelementbyid('container'); let position = new csspositionvalue(css.px(5), css.px(10)); some
div.attributestylemap.set('object-position', position); console.log(position.x.value, position.y.value); ...
CSSPrimitiveValue - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#f...
...1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSStyleDeclaration.setProperty() - Web APIs
in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <
div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </
div> <
div class="box"> <p>box</p> </
div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex;...
... justify-content: space-around; align-items: center; }
div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; background: red; border: 5px solid purple; color: white; transition: all 1s; } javascript const borderbtn = document.queryselector('.border'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { r...
CSSValueList - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff...
..."/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSS Typed Object Model API - Web APIs
cssnumericvalue.
div -
divides a supplied number by other numbers, throwing an error if 0.
...they "contain" one or more csstransformcomponents, which represent in
dividual transform function values.
Applying styles and colors - Web APIs
the globalalpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on in
dividual shapes when setting their colors.
...using rgba() gives you a little more control and flexibility because we can set the fill and stroke style in
dividually.
Optimizing canvas - Web APIs
<
div id="stage"> <canvas id="ui-layer" width="480" height="320"></canvas> <canvas id="game-layer" width="480" height="320"></canvas> <canvas id="background-layer" width="480" height="320"></canvas> </
div> <style> #stage { width: 480px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z...
...-index: 2; } #background-layer { z-index: 1; } </style> use plain css for large background images if you have a static background image, you can draw it onto a plain <
div> element using the css background property and position it under the canvas.
Using images - Web APIs
another advantage is that you don't need to load every image in
dividually, which can improve load performance.
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <
div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </
div> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // draw slice ctx.
CharacterData - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco...
...<line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode and nondocumenttypechildnode interface.
ChildNode.after() - Web APIs
examples inserting an element var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span); console.log(parent.outerhtml); // "<
div><p></p><span></span></
div>" inserting text var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outerhtml); // "<
div><p>...
...</p>text</
div>" inserting an element and text var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span, "text"); console.log(parent.outerhtml); // "<
div><p></p><span></span>text</
div>" childnode.after() is unscopable the after() method is not scoped into the with statement.
ChildNode.before() - Web APIs
examples inserting an element var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span); console.log(parent.outerhtml); // "<
div><span></span><p></p></
div>" inserting text var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.outerhtml); // "<
div>t...
...ext<p></p></
div>" inserting an element and text var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span, "text"); console.log(parent.outerhtml); // "<
div><span></span>text<p></p></
div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
Comment - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size...
...ll="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
CompositionEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="...
...x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor compositionevent() creates a new compositionevent object instance.
DOMRect - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" s...
...ll="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DataTransfer.dropEffect - Web APIs
html content <
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> css content
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript content function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text", ev.target.id); ev.datatransfer.effectallowed = "move"; } function drop_handler(ev) { console.log("drop: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallo...
DataTransfer.effectAllowed - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{dropeffect,effectallowed} properties</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); // add this element's id to the drag payload so the drop handler will /...
...lementbyid(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" } </script> <body> <h1>examples <code>datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standa...
DataTransfer.items - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"...
...ropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standardthe definition of 'items' in that specification.
DataTransfer.setData() - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer's setdata(), getdata() and cleardata()</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; // set the drag's format and data.
...ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standa...
DataTransfer.setDragImage() - Web APIs
demo <!doctype html> <html lang=en> <title>example of datatransfer.setdragimage()</title> <meta name="viewport" content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // set the drag's format and data.
..., 10); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standa...
DataTransfer.types - Web APIs
<!doctype html> <html lang=en> <title>examples of datatransfer.{types,items} properties</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart: target.id = " + ev.target.id); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree ev.datatransfer.setdata("text/plain", ev.target.id); ev.datatransfer.effectallowed = "move"...
...ropeffect to move ev.datatransfer.dropeffect = "move" } </script> <body> <h1>examples of <code>datatransfer</code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standardthe definition of 'types' in that specification.
DataTransferItem.webkitGetAsEntry() - Web APIs
html content the html establishes the drop zone itself, which is a <
div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <
div id="dropzone"> <
div id="boxtitle"> drop files here </
div> </
div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
Document.createElement() - Web APIs
examples basic example this creates a new <
div> and inserts it before the element with the id "
div1".
... html <!doctype html> <html> <head> <title>||working with elements||</title> </head> <body> <
div id="
div1">the text above has been created dynamically.</
div> </body> </html> javascript document.body.onload = addelement; function addelement () { // create a new
div element const new
div = document.createelement("
div"); // and give it some content const newcontent = document.createtextnode("hi there and greetings!"); // add the text node to the newly created
div new
div.appendchild(newcontent); // add the newly created element and its content into the dom const current
div = document.getelementbyid("
div1"); document.body.insertbefore(new
div, current
div); } web component example the following example snippet is taken from our expanding-list-web-component example (...
Document.getElementsByClassName() - Web APIs
here we'll find all
div elements that have a class of 'test': var testelements = document.getelementsbyclassname('test'); var test
divs = array.prototype.filter.call(testelements, function(testelement){ return testelement.nodename === '
div'; }); get the first element whose class is 'test' this is the most commonly used method of operation.
... <html> <body> <
div id="parent-id"> <p>hello world 1</p> <p class="test">hello world 2</p> <p>hello world 3</p> <p>hello world 4</p> </
div> <script> var parentdom = document.getelementbyid("parent-id"); var test = parentdom.getelementsbyclassname("test"); // a list of matching elements, *not* the element itself console.log(test); //htmlcollection[1] var testtarget = parentdom.getelementsbyclassname("test")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.queryselector and document.queryselectorall.
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " <p> elements in this document"); } function
div1paraelems() { var
div1 = document.getelementbyid("
div1") var
div1paras =
div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num =
div1paras.length; alert("there are " + num + " <p> elements in
div1 element"); } function
div2paraelems() { var
div2 = document.getelementbyid("
div2") var
div2paras =
div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "...
...p"); var num =
div2paras.length; alert("there are " + num + " <p> elements in
div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <
div id="
div1" style="border: solid blue 3px"> <p>some
div1 text</p> <p>some
div1 text</p> <p>some
div1 text</p> <
div id="
div2" style="border: solid red 3px"> <p>some
div2 text</p> <p>some
div2 text</p> </
div> </
div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="
div1paraelems();"> show all p elements in
div1 element</button><br /> <button onclick="
div2paraelems();"> show all p elements in
div2 element</button> </body> </html> potential work...
Document: wheel event - Web APIs
<
div>scale me with your mouse wheel.</
div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); if (event.deltay < 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; 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 - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width=...
...ll="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
DocumentFragment - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
DocumentType - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
.../><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, node, and implements the childnode interface.
Element: click event - Web APIs
<
div>) and which also don't have event listeners directly attached to the elements themselves (i.e.
... use a typically interactive element (e.g., <a>) instead of one that isn't typically interactive (e.g., <
div>).
Element.closest() - Web APIs
example html <article> <
div id="
div-01">here is
div-01 <
div id="
div-02">here is
div-02 <
div id="
div-03">here is
div-03</
div> </
div> </
div> </article> javascript var el = document.getelementbyid('
div-03'); var r1 = el.closest("#
div-02"); // returns the element with the id=
div-02 var r2 = el.closest("
div div"); // returns the closest ancestor which is a
div in
div, here it is the
div-03 itself var r3 = el...
....closest("article >
div"); // returns the closest ancestor which is a
div and has a parent article, here it is the
div-01 var r4 = el.closest(":not(
div)"); // returns the closest ancestor which is not a
div, here it is the outmost article polyfill for browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; do { if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el...
Element.getBoundingClientRect() - Web APIs
t : document.body).scrolltop examples this simple example retrieves the domrect object representing the bounding client rect of a simple <
div> element, and prints out its properties below it.
... <
div></
div>
div { width: 400px; height: 200px; padding: 20px; margin: 50px auto; background: purple; } let elem = document.queryselector('
div'); let rect = elem.getboundingclientrect(); for (var key in rect) { if(typeof rect[key] !== 'function') { let para = document.createelement('p'); para.textcontent = `${ key } : ${ rect[key] }`; document.body.appendchild(para); } } notice how the width/height are equal to the equal to its width/height + padding.
Element.getElementsByClassName() - Web APIs
also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the results you can use either the item() method on the returned htmlcollection or standard array syntax to examine in
dividual elements in the collection.
...here we'll find all <
div> elements that have a class of test: var testelements = document.getelementsbyclassname('test'); var test
divs = array.prototype.filter.call(testelements, function(testelement) { return testelement.nodename === '
div'; }); specifications specification status comment domthe definition of 'element.getelementsbyclassname()' in that specification.
Element: mouseenter event - Web APIs
mouseenter the following trivial example uses the mouseenter event to change the border on the
div when the mouse enters the space alloted to it.
... html <
div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </
div> css styling the
div to make it more visible.
Element.querySelector() - Web APIs
html <
div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </
div> <
div> <h5>output</h5> <
div id="output"></
div> </
div> javascript var baseelement = document.queryselector("p"); document.getelementbyid("output").innerhtml = (baseelement.queryselector("
div span").innerhtml); result the result looks like this: notice how the "
div spa...
...n" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the
div element (it is still part of the specified selector).
Element.releasePointerCapture() - Web APIs
example this example sets pointer capture on a <
div> when you press down on it.
... html <
div id="slider">slide me</
div> css
div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(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 – le...
Element.setPointerCapture() - Web APIs
example this example sets pointer capture on a <
div> when you press down on it.
... html <
div id="slider">slide me</
div> css
div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(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 �...
Element: wheel event - Web APIs
<
div>scale me with your mouse wheel.</
div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale tra...
...nsform 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
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...ll="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
ElementCSSInlineStyle.style - Web APIs
for adding specific styles to an element without altering other style values, it is preferred to use the in
dividual properties of style (as in elt.style.color = '...') as using elt.style.csstext = '...' or elt.setattribute('style', '...') sets the complete inline style for the element by overriding the existing inline styles.
... the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcomputedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <
div style="color:red" id="myelement">..</
div> </body> </html> var element = document.getelementbyid("myelement"); var out = ""; var elementstyle = element.style; var computedstyle = window.getcomputedstyle(element, null); for (prop in elementstyle) { if (elementstyle.hasownproperty(prop)) { out += " " + prop + " = '" + elementstyle[prop] + "' > '" + computedstyle[prop] + "'\n"; } } cons...
ErrorEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" ...
...y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
EventTarget.addEventListener() - Web APIs
example of options usage html <
div class="outer"> outer, once & none-once <
div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) ...
...</a> </
div> </
div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decoration: none; } .outer { border: 1px solid red; color: red; } .middle { border: 1px solid green; color: green; width: 460px; } .inner1, .inner2 { border: 1px solid purple; color: purple; width: 400px; } javascript const outer = document.queryselector('.outer'); const middle = document.queryselector('.middle'); const inner1 = document.queryselector('.inner1'); const inner2 = document.queryselector('.inner2'); const capture = { capture : true }; const nonecapture = { capture : false }; const once = { once : true }; const noneonce = { once : false }; const passive = { passive : true }; const nonepassive = { passive ...
EventTarget - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventtarget() creates a new eventtarget object instance.
ExtendableEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" ...
...ne x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
File - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" ...
...de4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file() returns a newly constructed file.
FileSystemDirectoryReader.readEntries() - Web APIs
html content the html establishes the drop zone itself, which is a <
div> element with the id "dropzone", and an unordered list element with the id "listing".
... <p>drag files and/or directories to the box below!</p> <
div id="dropzone"> <
div id="boxtitle"> drop files here </
div> </
div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here.
FocusEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><l...
...one"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor focusevent() creates a focusevent event with the given parameters.
GlobalEventHandlers.ondrag - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.current...
...target.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <
div> <!-- <
div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification stat...
GlobalEventHandlers.ondragend - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id...
...t handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standa...
GlobalEventHandlers.ondragenter - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id...
...t handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living standa...
GlobalEventHandlers.ondragexit - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id...
...t handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living stand...
GlobalEventHandlers.ondragleave - Web APIs
<!doctype html> <html lang=en> <title>examples of using the drag and drop global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's border to signify drag has started ev.currenttarget.style.border = "dashed"; ev.datatransfer.setdata("text", ev.target.id); } func...
...t handlers for the source's enter/leave/end/exit events var el=document.getelementbyid("source"); el.ondragenter = dragenter_handler; el.ondragleave = dragleave_handler; el.ondragend = dragend_handler; el.ondragexit = dragexit_handler; } </script> <body onload="init();"> <h1>examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html living stand...
GlobalEventHandlers.ondragover - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.current...
...target.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <
div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html li...
GlobalEventHandlers.ondragstart - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.current...
...target.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <
div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment html li...
GlobalEventHandlers.ondrop - Web APIs
<!doctype html> <html lang=en> <title>examples of using the ondrag global event attribute</title> <meta content="width=device-width"> <style>
div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <script> function drag_handler(ev) { console.log("drag"); } function dragstart_handler(ev) { console.log("dragstart"); ev.datatransfer.setdata("text", ev.target.id); } function drop_handler(ev) { console.log("drop"); ev.current...
...target.style.background = "lightyellow"; ev.preventdefault(); var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } </script> <body> <h1>examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> <
div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </
div> <
div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</
div> </body> </html> specifications specification status comment ...
GlobalEventHandlers.onpointerdown - Web APIs
html the html is extremely simple: <
div id="target"> tap me, click me, or touch me!
... </
div> css the css simply sets up the appearance of the target, and doesn't affect its functionality at all.
GlobalEventHandlers.ontransitioncancel - Web APIs
html this simply creates a <
div> which we'll style with css below to make into a box that resizes and changes color and such.
... <
div class="box"></
div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
GlobalEventHandlers.ontransitionend - Web APIs
html this simply creates a <
div> which we'll style with css below to make into a box that resizes and changes color and such.
... <
div class="box"></
div> css the css below styles the box and applies a transition effect which makes the box's color and size change, and causes the box to rotate, while the mouse cursor hovers over it.
GlobalEventHandlers.onwheel - Web APIs
html <
div>scale me with your mouse wheel.</
div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; }
div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 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.
HTMLAnchorElement - Web APIs
this interface corresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2p...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlanchorelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlanchorelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAreaElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle"...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlareaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements those from htmlhyperlinkelementutils.
HTMLAudioElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mi...
...1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audio() creates and returns a new htmlaudioelement object, optionally starting the process of loading an audio file into it if the file url is given.
HTMLBRElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><li...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbrelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBaseElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="11...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbaseelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbaseelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLBodyElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbodyelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement and from windoweventhandlers.
HTMLButtonElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlbuttonelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlbuttonelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLCanvasElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor=...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlcanvaselement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcanvaselement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDListElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">even...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldlistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldlistelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldataelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDataListElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldatalistelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement htmldatalistelement.options read only is a htmlcollection representing a collection of the contained option elements.
HTMLDetailsElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailsele...
...ment</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDocument - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
.../><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyl...
...e"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
HTMLEmbedElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-s...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlembedelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlembedelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFieldSetElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlfieldsetelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLFormControlsCollection - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" fon...
..."181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLHRElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a>...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhrelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</tex...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHeadingElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
...09" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHtmlElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,mona...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlhtmlelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlhtmlelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLIFrameElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignm...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmliframeelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmliframeelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLImageElement.crossOrigin - Web APIs
const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <
div class="container"> <p>here's a paragraph.
...thanks for reading me.</p> </
div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } 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.naturalHeight - Web APIs
html <
div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </
div> <
div class="output"> </
div> the html features a 400x398 pixel image which is placed inside a <
div>.
... image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <
div> with the class output.
HTMLImageElement.naturalWidth - Web APIs
html <
div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </
div> <
div class="output"> </
div> the html features a 400x398 pixel image which is placed inside a <
div>.
... image = document.queryselector("img"); window.addeventlistener("load", event => { output.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; output.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <
div> with the class output.
HTMLImageElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25"...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlimageelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlimageelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor image() the image() constructor creates and returns a new htmlimageelement object representing an html <img> element which is not attached to any dom tree.
HTMLInputElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,3...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlinputelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties related to the parent form form read only htmlformelement object: returns a reference to the parent <form> element.
HTMLLIElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle...
...line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllielement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLabelElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllabelelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllabelelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLegendElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 ...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllegendelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllegendelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLLinkElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text ...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmllinkelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmllinkelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and linkstyle.
HTMLMapElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmapelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMarqueeElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a>...
...</svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement.onencrypted - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ...
HTMLMediaElement.onwaitingforkey - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" te...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ...
HTMLMediaElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor=...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmediaelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its ancestors htmlelement, element, node, and eventtarget.
HTMLMenuElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarge...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis 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
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">ev...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} 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
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmetaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmetaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMeterElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmeterelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmeterelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent, htmlelement.
HTMLModElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmodelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOListElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlolistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlolistelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLObjectElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlobjectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlobjectelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptGroupElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptgroupelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLOptionsCollection - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas...
...1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLOrForeignElement.dataset - Web APIs
instead, all writes must be to the in
dividual properties within the dataset, which in turn represent the data attributes.
... examples <
div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>john doe</
div> const el = document.queryselector('#user'); // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; /...
HTMLOutputElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline poi...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloutputelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloutputelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement.
HTMLParagraphElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline ...
...y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparagraphelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLParamElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlparamelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlparamelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLPictureElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" str...
...09" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent, htmlelement.
HTMLPreElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-base...
...ne x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpreelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLQuoteElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-ancho...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlquoteelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlquoteelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLScriptElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke=...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlscriptelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlscriptelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSelectElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><pol...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlselectelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlselectelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement, and of element and node.
HTMLShadowElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlshadowelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlshadowelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLSourceElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text><...
..."509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlsourceelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlsourceelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLSpanElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlspanelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties, but inherits properties from: htmlelement.
HTMLStyleElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4"...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlstyleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlstyleelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement, and implements linkstyle.
HTMLTableCaptionElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
..." x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecaptionelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableCellElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,...
...y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecellelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableColElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablecolelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="midd...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltableelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableRowElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablerowelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTableSectionElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fil...
..." x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltablesectionelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTemplateElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltemplateelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of htmlelement.
HTMLTextAreaElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
..." y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltextareaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties accesskey string: returns / sets the element's accesskey attribute.
HTMLTimeElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polylin...
... x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltimeelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTitleElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 ...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltitleelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltitleelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLTrackElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alig...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmltrackelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmltrackelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUListElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="m...
...1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlulistelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlulistelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLUnknownElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline p...
...09" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htmlelement.
HTMLVideoElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fil...
...1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its ancestor interfaces, htmlmediaelement, and htmlelement.
Drag Operations - Web APIs
<
div ondragover="return false"> <
div ondragover="event.preventdefault()"> calling the preventdefault() method during both a dragenter and dragover event will indicate that a drop is allowed at that location.
...this has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or
div element.
File drag and drop - Web APIs
the following code snippet shows how this is done with a <
div> element: <
div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </
div> typically, an application will include a dragover event handler on the drop target element and that handler will turn off the browser's default drag behavior.
... to add this handler, you need to include a ondragover global event handler: <
div id="drop_zone" ondrop="drophandler(event);" ondragover="dragoverhandler(event);"> <p>drag one or more files to this drop zone ...</p> </
div> lastly, an application may want to style the drop target element to visually indicate the element is a drop zone.
HashChangeEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middl...
...ne x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
IDBCursorWithValue - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#...
...101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
IDBDatabase - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
IDBOpenDBRequest - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,...
...x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits methods from its parents idbrequest and eventtarget.
IDBRequest - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...one"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from eventtarget.
IDBTransaction - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...ine x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.put("2", "k...
InputEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86"...
...one"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor inputevent() creates an inputevent object.
InstallEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width...
.../><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor installevent.installevent() creates a new installevent object.
Intersection Observer API - Web APIs
threshold example <template id="boxtemplate"> <
div class="samplebox"> <
div class="label topleft"></
div> <
div class="label topright"></
div> <
div class="label bottomleft"></
div> <
div class="label bottomright"></
div> </
div> </template> <main> <
div class="contents"> <
div class="wrapper"> </
div> </
div> </main> .contents { position: absolute; width: 700px; height: 1725px; } .wrapper { position: relative; top: ...
... <
div id="box"> <
div class="vertical"> welcome to <strong>the box!</strong> </
div> </
div> css the css isn't terribly important for the purposes of this example; it lays out the element and establishes that the background-color and border attributes can participate in css transitions, which we'll use to affect the changes to the element as it becomes more or less obscured.
Key Values - Web APIs
kvk_ansi_keypadclear (0x47) gdk_key_clear (0xff0b) qt::key_clear (0x0100000b) keycode_clear (28) "
divide" [1] the numeric keypad's
division key, /.
... vk_
divide (0x6f) kvk_ansi_keypad
divide (0x4b) gdk_key_kp_
divide (0xffaf) qt::key_slash (0x2f) keycode_numpad_
divide (154) "subtract" [1] the numeric keypad's subtraction key, -.
KeyboardEvent.key - Web APIs
html <
div class="fx"> <
div> <textarea rows="5" name="test-target" id="test-target"></textarea> <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> </
div> <
div class="flex"> <pre id="console-log"></pre> </
div> </
div> css .fx { -webkit-display: flex; display: flex; margin-left: -20px; margin-right: -20px; } .fx >
div { padding-left: 2...
...0px; padding-right: 20px; } .fx >
div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); });...
KeyboardEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
...<line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor keyboardevent() creates a new keyboardevent object.
MediaKeySession.onkeystatuseschange - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,m...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" t...
...e x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaSource - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" a...
...e"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediasource() constructs and returns a new mediasource object with no associated source buffers.
MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <
div id="startbutton" class="button"> start </
div> <audio id="audio" autoplay controls></audio><br> <
div id="log"></
div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; p...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <
div id="startbutton" class="button"> start </
div> <audio id="audio" autoplay controls></audio><br> <
div id="log"></
div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; p...
MediaStreamConstraints.video - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <
div id="startbutton" class="button"> start </
div> <video id="video" width="160" height="120" autoplay></video><br> <
div id="log"></
div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; p...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <
div id="startbutton" class="button"> start </
div> <video id="video" width="160" height="120" autoplay></video><br> <
div id="log"></
div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; p...
MediaStreamTrackEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" tex...
...1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the autogaincontrol constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the in
dividual device supports automatic gain control as well; it's typically a feature provided by microphones.
... 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 med...
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the noisesuppression constraint indicates whether or not the browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the in
dividual device supports automatic gain control as well.
... 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 me...
MessageEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
..."/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor messageevent() creates a new messageevent.
MouseEvent.pageX - Web APIs
html <
div class="box"> <p> move the mouse around in this box to watch its coordinates change.
... </p> <p> <code>pagex</code>: <span id="x">n/a</span> </p> <p> <code>pagey</code>: <span id="y">n/a</span> </p> </
div> the html is simple; the box we'll be watching for mouse events on is given the class "box".
MouseEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
...one"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mouseevent() creates a mouseevent object.
Using Navigation Timing - Web APIs
html <
div class="output"> </
div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... html <
div class="output"> </
div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the result looks like this: the values listed are for the <iframe> in which the sample is presented.
Node.getRootNode() - Web APIs
(see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <
div class="js-parent"> <
div class="js-child"></
div> </
div> <
div class="js-shadowhost"></
div> <script> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(child.getrootnode().no...
...dename); // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.innerhtml = '<style>
div{background:#2bb8aa;}</style>' + '<
div class="js-shadowchild">content</
div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({composed:true}).nodename); // #document </script> specifications specification status comment domthe definition of 'getrootnode()' in that specification.
Node.nodeName - Web APIs
cument-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="d1">hello world</
div> <input type="text" id="t"> and the following script: var
div1 = document.getelementbyid("d1"); var text_field = document.getelementbyid("t"); text_field.value =
div1.nodename; in xhtml (or any other xml format), text_field's value would read "
div".
... however, in html, text_field's value would read "
div", because nodename and tagname return in upper case on html elements in doms flagged as html documents.
Node.removeChild() - Web APIs
examples simple examples given this html: <
div id="top"> <
div id="nested"></
div> </
div> to remove a specified element when knowing its parent node: let d = document.getelementbyid("top"); let d_nested = document.getelementbyid("nested"); let throwawaynode = d.removechild(d_nested); to remove a specified element without having to specify its parent node: let node = document.getelementbyid("nested"); if (node.parentnode) { node.parent...
...node.removechild(node); } to remove all children from an element: let element = document.getelementbyid("top"); while (element.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample html code--> <
div id="top"> </
div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample html code--> <
div id="top"> <
div id="nested"></
div> </
div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaug...
Node.replaceChild() - Web APIs
example // given: // <
div> // <span id="childspan">foo bar</span> // </
div> // create an empty element node // without an id, any attributes, or any content var sp1 = document.createelement("span"); // give it an id attribute called 'newspan' sp1.id = "newspan"; // create some content for the new element.
... var sp1_content = document.createtextnode("new replacement span element."); // apply that content to the new element sp1.appendchild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getelementbyid("childspan"); var parent
div = sp2.parentnode; // replace existing node sp2 with the new span element sp1 parent
div.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.
OfflineAudioContext - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text...
...1" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor offlineaudiocontext.offlineaudiocontext() creates a new offlineaudiocontext instance.
PageTransitionEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 8...
...6" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
ParentNode.append() - Web APIs
examples appending an element let parent = document.createelement("
div") let p = document.createelement("p") parent.append(p) console.log(parent.childnodes) // nodelist [ <p> ] appending text let parent = document.createelement("
div") parent.append("some text") console.log(parent.textcontent) // "some text" appending an element and text let parent = document.createelement("
div") let p = document.createelement("p") parent.append("some text", p) console.log(pa...
... let parent = document.createelement("
div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array...
ParentNode.replaceChildren() - Web APIs
this html might look something like this: <h2>party food option list</h2> <main> <
div> <label for="no">no thanks!</label> <select id="no" multiple size="10"> <option>apples</option> <option>oranges</option> <option>grapes</option> <option>bananas</option> <option>kiwi fruits</option> <option>chocolate cookies</option> <option>peanut cookies</option> <option>chocolate bars</option> <option>ham sandwiches</option> ...
...<option>cheese sandwiches</option> <option>falafel sandwiches</option> <option>ice cream</option> <option>jelly</option> <option>carrot sticks and houmous</option> <option>margherita pizza</option> <option>pepperoni pizza</option> <option>vegan veggie pizza</option> </select> </
div> <
div class="buttons"> <button id="to-yes">transfer to "yes" --></button> <button id="to-no"><-- transfer to "no"</button> </
div> <
div> <label for="yes">yes please!</label> <select id="yes" multiple size="10"> </select> </
div> </main> it would make sense to use some simple css to lay out the two select lists in a line alongside one another, with the control buttons in between them: main { display: flex; }
div { margin-right...
PaymentAddress.region - Web APIs
the read-only region property of the paymentaddress interface returns a string containing the top-level administrative sub
division of the country in which the address is located.
... syntax var paymentregion = paymentaddress.region; value a domstring specifying the top-level administrative sub
division within the country in which the address is located.
PaymentAddress - Web APIs
paymentaddress.region read only a domstring containing the top level administrative sub
division of the country, for example a state, province, oblast, or prefecture.
... paymentaddress.regioncode read only a domstring specifying the region of the address, represented as a "code element" of an iso3166-2 country sub
division name (e.g.
PerformanceFrameTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceframetiming" target="_top"><rect x="1" y="1" width="220" heigh...
...t="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceframetiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".
PerformanceLongTaskTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d...
...2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
PerformanceMark - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
...e x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monac...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono...
...01" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformancePaintTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50"...
..."25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
PerformanceResourceTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50"...
...2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in web workers.
ProcessingInstruction - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="...
...1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: 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
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middl...
...><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monac...
...1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
RTCDTMFSender - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...<line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).
RTCDtlsTransport - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/rtcdtlstransport" target="_top"><rect x="1" y="1" width="160" height="50"...
... fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtlstransport</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesicetransport read only the read-only rtcdtlstransport property icetransport contains a reference to the underlying rtcicetransport.state read only the state read-only property of the rtcdtlstransport interface provides information which describes a datagram transport layer security (dtls) transport state.methodsthis interface has no methods.
RTCPeerConnection - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d...
...="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a bo...
RadioNodeList - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="no...
...><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
Resize Observer API - Web APIs
resize-observer-text.html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <
div> to change width.
...min(100, (entry.contentboxsize.inlinesize/10) + (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.
SVGAnimateElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateMotionElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
...9" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimateTransformElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><l...
..."251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svganimationelement.
SVGAnimationElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
..." y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimationelement" target="_top"><rect x="291" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGCircleElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y...
...x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcircleelement" target="_top"><rect x="-119" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-39" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGClipPathElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30...
...99" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgclippathelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGComponentTransferFunctionElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 1...
...e="#d4dde4"/><a xlink:href="/docs/web/api/svgcomponenttransferfunctionelement" target="_top"><rect x="131" y="65" width="350" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined types.
SVGCursorElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 11...
...1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcursorelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcursorelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement, and implements properties from svgurireference.
SVGDefsElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
...ne x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggraphicselement.
SVGDescElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
...ne x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgdescelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdescelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,...
...one"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes at...
SVGEllipseElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><...
...="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgellipseelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgellipseelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggeometryelement.
SVGExternalResourcesRequired - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="mid...
...dle">svgexternalresourcesrequired</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGFEBlendElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
..."499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeblendelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeblendelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_feblend_mode_unknown 0 the type is not one of predefined types.
SVGFEColorMatrixElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1...
..." x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecolormatrixelement" target="_top"><rect x="251" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecolormatrixelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecolormatrix_type_unknown 0 the type is not one of predefined types.
SVGFEComponentTransferElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="non...
...2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecomponenttransferelement" target="_top"><rect x="191" y="65" width="290" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecomponenttransferelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes.
SVGFECompositeElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="12...
...="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfecompositeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfecompositeelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_fecomposite_operator_unknown 0 the type is not one of predefined types.
SVGFEDiffuseLightingElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
...2" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfediffuselightingelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfediffuselightingelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEDisplacementMapElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/>...
...2" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedisplacementmapelement" target="_top"><rect x="211" y="65" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedisplacementmapelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_channel_unknown 0 the type is not one of predefined types.
SVGFEDistantLightElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedistantlightelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedistantlightelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEDropShadowElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfedropshadowelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfedropshadowelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEFloodElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
..."499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefloodelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefloodelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement, and implements properties from svgfilterprimitivestandardattributes.
SVGFEFuncAElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncBElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncGElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEFuncRElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
...x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgcomponenttransferfunctionelement.
SVGFEGaussianBlurElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
...x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfegaussianblurelement" target="_top"><rect x="241" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="361" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfegaussianblurelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_edgemode_unknown 0 the type is not one of predefined types.
SVGFEImageElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
..."499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeimageelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeimageelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and implements properties of svgfilterprimitivestandardattributes and svgurireference.
SVGFEMergeElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
..."499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergeelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergeelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface not provide any specific properties, but inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEMergeNodeElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="12...
...="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemergenodeelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemergenodeelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFEMorphologyElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfemorphologyelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfemorphologyelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_morphology_operator_unknown 0 the type is not one of predefined types.
SVGFEOffsetElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
...99" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeoffsetelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFEPointLightElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfepointlightelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfepointlightelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFESpecularLightingElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"...
... y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="280" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFESpotLightElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="12...
...="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespotlightelement" target="_top"><rect x="271" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespotlightelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGFETileElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
...1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfetileelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfetileelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement, and also implements properties of svgfilterprimitivestandardattributes.
SVGFETurbulenceElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="...
...90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeturbulenceelement" target="_top"><rect x="261" y="65" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfeturbulenceelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants turbulence types name value description svg_turbulence_type_unknown 0 the type is not one of predefined types.
SVGFilterElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 11...
...1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfilterelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterelement.filterunits read only an svganimatedenumeration that corresponds to the filterunits attribute of the given <filter> element.
SVGFilterPrimitiveStandardAttributes - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfilterprimitivestandardattributes" target="_top"><rect x="1" y="1" width="360" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestand...
...ardattributes</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterprimitivestandardattributes.x read only an svganimatedlength corresponding to the x attribute of the given element.
SVGFontElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontelement</text><...
.../a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgexternalresourcesrequired and svgstylable.
SVGFontFaceElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgf...
...ontfaceelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceFormatElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceformatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" align...
...ment-baseline="middle">svgfontfaceformatelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceNameElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-bas...
...eline="middle">svgfontfacenameelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceSrcElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
...e="middle">svgfontfacesrcelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGFontFaceUriElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...
...e="middle">svgfontfaceurielement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGForeignObjectElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,...
...9" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and implements properties from svgurireference.
SVGGElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" ...
..."/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement.
SVGGeometryElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="...
...291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were originally part of the svgpathelement interface.
SVGGlyphElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</tex...
...t></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGGradientElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4...
...99" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod_unknown 0 the type is not one of predefined types.
SVGGraphicsElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4d...
...99" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtransformable interfaces from svg 1.1.
SVGHKernElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</t...
...ext></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
SVGImageElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
... x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement.
SVGLineElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
...line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGLinearGradientElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
... x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGMPathElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
... x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmpathelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmpathelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMaskElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
...ne x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmaskelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmaskelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement.
SVGMetadataElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
...99" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmetadataelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGMissingGlyphElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">svgmissingglyphelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement and implements properties from svgstylable.
SVGPathElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
...line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpathelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} note: in svg 2 the getpathsegatlength() and createsvgpathseg* methods were removed and the pathlength property and the gettotallength() and getpointatlength() methods were moved to svggeometryelement.
SVGPatternElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="2...
..."499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpatternelement" target="_top"><rect x="311" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpatternelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgelement and implements the ones from svgfittoviewbox and svgurireference.
SVGPolygonElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 ...
...="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolygonelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolygonelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGPolylineElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30...
...71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolylineelement" target="_top"><rect x="-139" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-49" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolylineelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent, svggeometryelement and also implements properties from svganimatedpoints.
SVGRadialGradientElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line ...
... x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggradientelement.
SVGRect - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text ...
...x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the exact effect of this coordinate depends on each element.
SVGRectElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25...
...line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgrectelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggeometryelement.
SVGSVGElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-...
...line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsvgelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svggraphicselement and also implements the ones from svgzoomandpan, svgfittoviewbox, and windoweventhandlers.
SVGScriptElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
...1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgscriptelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgscriptelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgscriptelement.type read only a domstring corresponding to the type attribute of the given <script> element.
SVGSetElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="1...
...line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svganimationelement.
SVGStopElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2=...
...ne x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstopelement" target="_top"><rect x="341" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstopelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement.
SVGStyleElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/...
... x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgstyleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgstyleelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svgelement and implements properties from linkstyle.
SVGSwitchElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
...1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement.
SVGSymbolElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25"...
...1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgsymbolelement" target="_top"><rect x="321" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsymbolelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggraphicselement, and implements properties from svgfittoviewbox.
SVGTRefElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text><...
.../a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgtextpositioningelement and implements properties from svgurireference.
SVGTSpanElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke...
..."-249" y1="89" x2="-279" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtspanelement" target="_top"><rect x="-429" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-354" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtspanelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't provide any specific properties, but inherits the properties from its parent, svgtextpositioningelement.
SVGTextContentElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53"...
...1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants constant value description lengthadjust_unknown 0 some other value.
SVGTextElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2...
...1="-249" y1="89" x2="-279" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextelement" target="_top"><rect x="-419" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-349" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgtextpositioningelement.
SVGTextPathElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1=...
...41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpathelement" target="_top"><rect x="-169" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constants method types name value description textpath_methodtype_unknown 0 the type is not one of predefined types.
SVGTitleElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x...
... x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtitleelement" target="_top"><rect x="331" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtitleelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svgelement.
SVGUseElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line...
...line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interface, svggraphicselement and implements properties from svgurireference.
SVGVKernElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</t...
...ext></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from its parent, svgelement.
Selection.setBaseAndExtent() - Web APIs
<h1>setbaseandextent example</h1> <
div> <p class="one"><span>fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>middle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </
div> <
div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id=...
..."foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </
div> <p><strong>output</strong>: <span class="output"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'); var button = document.queryselector('button'); var output = document.queryselector('.output'); var selection; button.onclick = function() { try { selection = document.getselection(); selection.setbaseandextent(one, aoffset.value, two, foffset.value); var text = selection.tostring(); output.textcontent = text; } catch(e) { output.textcontent = e.message; } } play with the live exampl...
ServiceWorkerGlobalScope - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
... x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties serviceworkerglobalscope.clients read only contains the clients object associated with the service worker.
SourceBuffer - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtar...
.../><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
StaticRange - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="3...
...e"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor staticrange() creates a new staticrange object given the staticrangeinit dictionary specifying the default values for its properties.
StorageEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dd...
..."/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key chang...
StylePropertyMap - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/stylepropertymap" target="_top"><rect x="1" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">stylepropertym...
...ap</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, stylepropertymapreadonly.
SyncEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a...
...="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor syncevent.syncevent() creates a new syncevent object.
TaskAttributionTiming - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="conso...
...1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
Text - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill...
...e4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
TimeEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4...
...l="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
Touch.radiusX - Web APIs
<
div id="src"> ...
... </
div> var src = document.getelementbyid("src"); src.addeventlistener('touchstart', rotate); src.addeventlistener('touchmove', rotate); src.addeventlistener('touchend', rotate); function rotate (e) { var touch = e.changedtouches.item(0); // turn off default event handling e.preventdefault(); // rotate element 'src'.
UIEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
...ill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
WebGLContextEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospac...
...1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits properties from its parent interface, event.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
either way, since attributes cannot be used unless enabled, and are disabled by default, you need to call enablevertexattribarray() to enable in
dividual attributes so that they can be used.
... example this code — a snippet taken from the full example a basic 2d webgl animation example — shows the use of enablevertexarray() to activate the attribute that will be used by the webgl layer to pass in
dividual vertexes from the vertex buffer into the vertex shader function.
WebGLRenderingContext.getVertexAttrib() - Web APIs
gl.vertex_attrib_array_
divisor: returns a glint describing the frequency
divisor used for instanced rendering.
... when using the angle_instanced_arrays extension: ext.vertex_attrib_array_
divisor_angle: returns a glint describing the frequency
divisor used for instanced rendering.
WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmask() method of the webgl api controls enabling and disabling of both the front and back writing of in
dividual bits in the stencil planes.
... syntax void gl.stencilmask(mask); parameters mask a gluint specifying a bit mask to enable or disable writing of in
dividual bits in the stencil planes.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method of the webgl api controls enabling and disabling of front and/or back writing of in
dividual bits in the stencil planes.
...the possible values are: gl.front gl.back gl.front_and_back mask a gluint specifying a bit mask to enable or disable writing of in
dividual bits in the stencil planes.
WebGLRenderingContext - Web APIs
webglrenderingcontext.stencilmask() controls enabling and disabling of both the front and back writing of in
dividual bits in the stencil planes.
... webglrenderingcontext.stencilmaskseparate() controls enabling and disabling of front and/or back writing of in
dividual bits in the stencil planes.
A basic 2D WebGL animation example - Web APIs
once the shader program is built, we compute the aspect ratio of our context by
dividing its width by its height.
... compiling an in
dividual shader the compileshader() function, below, is called by buildshaderprogram() to compile a single shader.
WebGL constants - Web APIs
float_mat4x3 0x8b6a unsigned_int_vec2 0x8dc6 unsigned_int_vec3 0x8dc7 unsigned_int_vec4 0x8dc8 unsigned_normalized 0x8c17 signed_normalized 0x8f9c vertex attributes constant name value description vertex_attrib_array_integer 0x88fd vertex_attrib_array_
divisor 0x88fe transform feedback constant name value description transform_feedback_buffer_mode 0x8c7f max_transform_feedback_separate_components 0x8c80 transform_feedback_varyings 0x8c83 transform_feedback_buffer_start 0x8c84 transform_feedback_buffer_size 0x8c85 transfor...
... dynamic_copy 0x88ea depth_component32f 0x8cac depth32f_stencil8 0x8cad invalid_index 0xffffffff timeout_ignored -1 max_client_wait_timeout_webgl 0x9247 constants defined in webgl extensions angle_instanced_arrays constant name value description vertex_attrib_array_
divisor_angle 0x88fe describes the frequency
divisor used for instanced rendering.
WebRTC API - Web APIs
more details and links to relevant guides and tutorials needed webrtc reference because webrtc provides interfaces that work together to accomplish a variety of tasks, we have
divided up the reference by category.
... rtcstatsreport provides information detailing statistics for a connection or for an in
dividual track on the connection; the report can be obtained by calling rtcpeerconnection.getstats().
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the value of w is applied by
dividing each of the other three components by it to get the final position or vector; that is, for a coordinate given as (x, y, z, w), the point in the 3d space is actually (x/w, y/w, z/w, 1) or simply (x/w, y/w, z/w).
...
dividing this into two parts—half for each eye—results in each eye's view being drawn at a resolution of 1280x1440 pixels.
Geometry and reference spaces in WebXR - Web APIs
you can learn more about the in
dividual operations in matrix math for the web.
...no matter how powerful or simple the in
dividual xr device is, code written using webxr will still work, within the limitations of the available hardware.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
but webxr goes beyond that by adding the ability to track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of in
dividual parts of the viewer's body (with appropriate equipment).
... note: this article presumes that you are familiar with the concepts introduced in geometry and reference spaces in webxr: that is, the basics of 3d coordinate systems, as well as webxr spaces, reference spaces, and how reference spaces are used to create local coordinate systems for in
dividual objects or movable components within a scene.
WebXR Device API - Web APIs
foundations and basics fundamentals of webxr before
diving into the details of how to create content using webxr, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.
...this article serves as an introduction to the basics of what's involved in creating a webxr experience without
diving into the code in detail.
Basic concepts behind Web Audio API - Web APIs
note: to get a time in seconds from a frame count, simply
divide the number of frames by the sample rate.
... to get a number of frames from a number of samples, simply
divide by the channel count.
Background audio processing using AudioWorklet - Web APIs
a single audio worklet processor module may define multiple processor classes, registering each of them with in
dividual calls to registerprocessor().
...fundamentally, the audio for a single audio channel (such as the left speaker or the subwoofer, for example) is represented as a float32array whose values are the in
dividual audio samples.
Visualizations with Web Audio API - Web APIs
aindata(dataarray); next, fill the canvas with a solid colour to start canvasctx.fillstyle = 'rgb(200, 200, 200)'; canvasctx.fillrect(0, 0, width, height); set a line width and stroke colour for the wave we will draw, then begin drawing a path canvasctx.linewidth = 2; canvasctx.strokestyle = 'rgb(0, 0, 0)'; canvasctx.beginpath(); determine the width of each segment of the line to be drawn by
dividing the canvas width by the array length (equal to the frequencybincount, as defined earlier on), then define an x variable to define the position to move to for drawing each segment of the line.
... function draw() { drawvisual = requestanimationframe(draw); analyser.getbytefrequencydata(dataarray); canvasctx.fillstyle = 'rgb(0, 0, 0)'; canvasctx.fillrect(0, 0, width, height); now we set our barwidth to be equal to the canvas width
divided by the number of bars (the buffer length).
WheelEvent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff"...
...one"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
Window.devicePixelRatio - Web APIs
<
div class="container"> <
div class="inner-container"> <p>this example demonstrates the effect of zooming the page in and out (or moving it to a screen with a different scaling factor) on the value of the property <code>window.devicepixelratio</code>.
... try it and watch what happens!</p> </
div> <
div class="pixel-ratio"></
div> </
div> css body { font: 22px arial, sans-serif; } .container { top: 2em; width: 22em; 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.pageYOffset - Web APIs
html the html is extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <
div> into which we'll output the value of pageyoffset when we've finished the scroll.
... <iframe id="frame"> </iframe> <
div id="info"> </
div> javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <
div> element into which we'll output the result of our scroll position check.
Window - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f...
...7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
XMLDocument - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-a...
...e"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
XMLHttpRequest.getAllResponseHeaders() - Web APIs
the code shows how to obtain the raw header string, as well as how to convert it into an array of in
dividual headers and then how to take that array and create a mapping of header names to their values.
... var request = new xmlhttprequest(); request.open("get", "foo.txt", true); request.send(); request.onreadystatechange = function() { if(this.readystate == this.headers_received) { // get the raw header string var headers = request.getallresponseheaders(); // convert the header string into an array // of in
dividual headers var arr = headers.trim().split(/[\r\n]+/); // create a map of header names to values var headermap = {}; arr.foreach(function (line) { var parts = line.split(': '); var header = parts.shift(); var value = parts.join(': '); headermap[header] = value; }); } } once this is done, you can, for example: var contenttype = headermap["content-type"]; this obtains the value of the content-type header into the vari...
XMLHttpRequest - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consola...
...ine x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} despite its name, xmlhttprequest can be used to retrieve any type of data, not just xml.
XMLHttpRequestEventTarget - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
Using the log role - Accessibility
<
div id="liveregion" class="region" role="log"></
div> example 2: snippet from an example application this snippet creates the chat log in an ajax chat application.
... <
div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </
div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
Using the progressbar role - Accessibility
examples example 1: basic progressbar with percentage values <
div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</
div> example 2: using aria-valuetext <
div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="step 2: copying files...
...</
div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemin aria-valuemax aria-valuetext related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources ...
ARIA: banner role - Accessibility
<
div role="banner"> <img src="companylogo.svg" alt="my company name" /> <h1>title</h1> <h2>subtitle</h2> </
div> by default, the html5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>.
... <
div role="banner"> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </
div> we could also have written the above with the html header element: <header> <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</...
ARIA: button role - Accessibility
<
div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</
div> the above example creates a simple button which is first in the focus order, though <button> or <input> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <input type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space k...
...if the button role is added to an element that is not focusable by itself (such as <span>, <
div> or <p>) then, the tabindex attribute has to be used to make the button focusable.
ARIA: listbox role - Accessibility
<p id="listbox1label" role="label">select a color:</p> <
div role="listbox" tabindex="0" id="listbox1" aria-labelledby="listbox1label" onclick="return listitemclick(event);" onkeydown="return listitemkeyevent(event);" onkeypress="return listitemkeyevent(event);" aria-activedescendant="listbox1-1"> <
div role="option" id="listbox1-1" class="selected" aria-selected="true">green</
div> <
div role="option" id="listbox1-2">orange</
div> <
div rol...
...e="option" id="listbox1-3">red</
div> <
div role="option" id="listbox1-4">blue</
div> <
div role="option" id="listbox1-5">violet</
div> <
div role="option" id="listbox1-6">periwinkle</
div> </
div> this could have more easily been handled with the native html <select> and <label> elements <label for="listbox1">select a color:</label> <select id="listbox1"> <option selected>green</option> <option>orange</option> <option>red</option> <option>blue</option> <option>violet</option> <option>periwinkle</option> </select> more examples scrollable listbox example: single-select listbox that scrolls to reveal more options, similar to html select with size attribute greater than one.
Cognitive accessibility - Accessibility
though there is a lot of
diversity within clinical definitions of cognitive impairments, people with them experience a common set of functional problems.
...-to-speech or by video; providing easily-understood content, such as text written using plain-language standards; focusing attention on important content; minimizing distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited;
dividing processes into logical, essential steps with progress indicators; making website authentication as easy as possible without compromising security; and making forms easy to complete, such as with clear error messages and simple error recovery.
Accessibility Information for Web Authors - Accessibility
dive into accessibility by mark pilgrim an excellent, easy-to-understand resource (available in english and in 9 other languages) on accessible website authoring, which goes into greater depth.
... dynamic web content is not accessible, because it uses vanilla <
div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views.
Keyboard-navigable JavaScript widgets - Accessibility
these widgets are typically composed of <
div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
... authors can also make a <
div> or <span> keyboard accessible by adding a tabindex of 0.
Web Accessibility: Understanding Colors and Luminance - Accessibility
for example, if you have blue text within a gray "highlighted" area, your eyes will perceive that same blue text with a gray highlight differently if it is in a black
div, or a white one.
... for example, calling window.getcomputedstyle() on a
div with a background-color: #990000; set returns the computed background color as rgb(153, 0, 0) -- the rgb decimal reference.
Color contrast - Accessibility
examples let's have a look at some simple html and css code: <
div class="good">good contrast</
div> <
div class="bad">bad contrast</
div>
div { /* general
div styles here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color.
... the "good" <
div> has a light purple background, which makes the text easy to read: example1 <
div class="good"> good contrast </
div>
div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .good { background-color: #fae6fa; } the "bad" <
div> on the other hand has a very dark purple background, which makes the text much harder to read: example2 <
div class="bad"> bad contrast </
div>
div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when...
-webkit-border-before - CSS: Cascading Style Sheets
the -webkit-border-before css property is a shorthand property for setting the in
dividual logical block start border property values in a single place in the style sheet.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> 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-rl; -webkit-border-before: 5px dashed blue; } result specifications not part of any standard, but it relates to the standards-track border-block-start property.
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | touch examples html <
div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </
div> <
div class="scroll-auto"> <p> this paragraph does not.
... </p> </
div> css
div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling immediately */ } results specifications not part of any standard.
::slotted() - CSS: Cascading Style Sheets
in this demo we use a simple template with three slots: <template id="person-template"> <
div> <h2>personal id card</h2> <slot name="person-name">name missing</slot> <ul> <li><slot name="person-age">age missing</slot></li> <li><slot name="person-occupation">occupation missing</slot></li> </ul> </
div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends htmlelement { constructor...
...() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = '
div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + 'h2 { margin: 0 0 10px; }' + 'ul { margin: 0; }' + 'p { margin: 10px 0; }' + '::slotted(*) { color: gray; font-family: sans-serif; } '; shadowroot.appendchild(style); shadowroot.appendchild(templatecontent.clonenode(true)); } }) you'll see that when filling the style element with content, we select all slotted elements (::slotte...
:checked - CSS: Cascading Style Sheets
syntax :checked examples basic example html <
div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </
div> <
div> <input type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </
div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <optio...
...n value="opt3">pears</option> </select> css
div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
:only-of-type - CSS: Cascading Style Sheets
syntax :only-of-type examples styling elements with no siblings of the same type html <main> <
div>i am `
div` #1.</
div> <p>i am the only `p` among my siblings.</p> <
div>i am `
div` #2.</
div> <
div>i am `
div` #3.
... <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.
unicode-range - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <
div> element, including an ampersand, that we want to style with a different font.
... 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.
-webkit-transform-2d - CSS: Cascading Style Sheets
examples basic example @media (-webkit-transform-2d) {
div { -webkit-transform: translate(100px, 100px); } } this media feature is only supported by webkit.
... if possible, use an @supports feature query instead: @supports (-webkit-transform: translate(100px, 100px)) {
div { -webkit-transform: translate(100px, 100px); } } specifications not part of any standard.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
html content first, let's define the html for a <
div> we wish to animate and a button that will play (or replay) the animation.
... <
div class="box"> </
div> <
div class="runbutton">click me to run the animation</
div> css content now we'll define the animation itself using css.
Using multiple backgrounds - CSS: Cascading Style Sheets
specifying multiple backgrounds is easy: .myclass { background: background1, background 2, ..., backgroundn; } you can do this with both the shorthand background property and the in
dividual properties thereof except for background-color.
... example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <
div class="multi-bg-example"></
div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, ...
CSS Box Alignment - CSS: Cascading Style Sheets
this fallback alignment is specified in
dividually for each layout method and detailed on the page for that method.
... pages detailing in
dividual alignment properties as the css box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it: box alignment in flexbox box alignment in css grid layout box alignment in multiple-column layout box alignment for block, absolutely positio...
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
align-self allows this default alignment to be overridden for in
dividual flex items.
...value; @if $value == flex-start { -ms-flex-item-align: start; } @else if $value == flex-end { -ms-flex-item-align: end; } @else { -ms-flex-item-align: $value; } align-self: $value; } flexbox align content the align-content property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns in
dividual items within the main axis.
Variable fonts guide - CSS: Cascading Style Sheets
standard (or static) fonts in the past, a typeface would be produced as a number of in
dividual fonts, and each font would represent one specific width/weight/style combination.
...you can work around this limitation by using css custom properties (css variables) for the in
dividual values, and simply modifying the value of an in
dividual custom property.
CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at
dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from html primitives.
... * {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper >
div { border: 2px solid rgb(233,171,88); border-radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d9480f; } html <
div class="wrapper"> <
div class="one">one</
div> <
div class="two">two</
div> <
div class="three">three</
div> <
div class="four">four</
div> <
div class="five">five</
div> <
div class="six">six</
div> </
div> css .wrapper { display: grid; grid-t...
Using z-index - CSS: Cascading Style Sheets
source code for the example html <
div id="abs1"> <b>
div #1</b> <br />position: absolute; <br />z-index: 5; </
div> <
div id="rel1"> <b>
div #2</b> <br />position: relative; <br />z-index: 3; </
div> <
div id="rel2"> <b>
div #3</b> <br />position: relative; <br />z-index: 2; </
div> <
div id="abs2"> <b>
div #4</b> <br />position: absolute; <br />z-index: 1; </
div> <
div id="sta1"> <b>
div #5</b> <br />no positioni...
...ng <br />z-index: 8; </
div> css
div { padding: 10px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #rel2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #696; background-color: #cfc; margin: 0px 50px 0px 50px; } #abs2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #900; background-color: #fdd; } #sta1 { z-ind...
Stacking without the z-index property - CSS: Cascading Style Sheets
source code for the example html <
div id="abs1" class="absolute"> <b>
div #1</b><br />position: absolute;</
div> <
div id="rel1" class="relative"> <b>
div #2</b><br />position: relative;</
div> <
div id="rel2" class="relative"> <b>
div #3</b><br />position: relative;</
div> <
div id="abs2" class="absolute"> <b>
div #4</b><br />position: absolute;</
div> <
div id="sta1" class="static"> <b>
div #5</b><br />position: static;</
div> css b...
... { font-family: sans-serif; }
div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height: 80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #rel2 { top: 15px; left: 20px; margin: 0px 50px 0px 50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-color: #ffc; margin: 0px 50px 0px 50px; } ...
CSS selectors - CSS: Cascading Style Sheets
syntax: a, b example:
div, span will match both <span> and <
div> elements.
... syntax: a b example:
div span will match all <span> elements that are inside a <
div> element.
Child combinator - CSS: Cascading Style Sheets
syntax selector1 > selector2 { style properties } examples css span { background-color: white; }
div > span { background-color: dodgerblue; } html <
div> <span>span #1, in the
div.
... <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.
Column layouts - CSS: Cascading Style Sheets
the columns must all be the same size, and you are unable to target an in
dividual column or the content of an in
dividual column.
... you do not need to target in
dividual column boxes for styling.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
html <
div class="animation">animated box</
div> css .animation { -webkit-animation: vibrate 0.3s linear infinite both; animation: vibrate 0.3s linear infinite both; } @media (prefers-reduced-motion: reduce) { .animation { animation: none; } } high contrast mode the -ms-high-contrast css media feature is a microsoft extension that describes whether the application is being displayed in ...
... @media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) {
div { background-image: url('image-wb.png'); } } ...
Using media queries - CSS: Cascading Style Sheets
note: in level 3, the not keyword can't be used to negate an in
dividual media feature expression, only an entire media query.
...(thus, it will not apply to every media query in a comma-separated list of media queries.) the not keyword can't be used to negate an in
dividual feature query, only an entire media query.
Visual formatting model - CSS: Cascading Style Sheets
in the next example i have a string inside a <
div>; in the middle of my string is a <p> element containing part of the text.
... in the following example, the line boxes following the floated <
div> are shortened to wrap around the float.
background-blend-mode - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <
div id="
div"></
div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusio...
...n</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #
div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: 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-image - CSS: Cascading Style Sheets
html <
div> <p class="catsandstars"> this paragraph is full of cats<br />and stars.
... </p> <p>and no more.</p> </
div> css p { font-size: 1.5em; color: #fe7f88; background-image: none; background-color: 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-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocomputed valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <
div class="one"></
div> </li> <li>repeat <
div class="two"></
div> </li> <li>repeat-x <
div class="three"></
div> </li> <li>repeat-y <
div class="four"></
div> </li> <li>space <
div class="five"></
div> </li> <li>round <
div class="six"></
div> </li> <li>repeat-x, repeat-y (multiple images) <
div class="seven"></
div> </li> </ol> css /* shared for all
divs in ex...
...ample */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; }
div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is mat...
border-block-end - CSS: Cascading Style Sheets
the border-block-end css property is a shorthand property for setting the in
dividual logical block-end border property values in a single place in the style sheet.
...)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 - CSS: Cascading Style Sheets
the border-block-start css property is a shorthand property for setting the in
dividual logical block-start border property values in a single place in the style sheet.
...)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 - CSS: Cascading Style Sheets
the border-block css property is a shorthand property for setting the in
dividual logical block border property values in a single place in the style sheet.
...)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
it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples a simple
div with a border html <
div class="mybox"> <p>this is a box with a border around it.
... 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 - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a bottom border html <
div> this box has a border on the bottom side.
... </
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-image - CSS: Cascading Style Sheets
the source for the border image is a ".png" file of 81 by 81 pixels, with three diamonds going vertically and horizontally: html <
div id="bitmap">this element is surrounded by a bitmap-based border image!</
div> css to match the size of a single diamond, we will use a value of 81
divided by 3, or 27, for slicing the image into corner and edge regions.
...th: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <
div id="gradient">this element is surrounded by a gradient-based border image!</
div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' in tha...
border-inline-end - CSS: Cascading Style Sheets
the border-inline-end css property is a shorthand property for setting the in
dividual logical inline-end border property values in a single place in the style sheet.
...)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 - CSS: Cascading Style Sheets
the border-inline-start css property is a shorthand property for setting the in
dividual logical inline-start border property values in a single place in the style sheet.
...)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 - CSS: Cascading Style Sheets
the border-inline css property is a shorthand property for setting the in
dividual logical inline border property values in a single place in the style sheet.
...)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
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple
div with a border html <
div class="mybox"> <p>this is a box with a border around it.
... 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 - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a left border html <
div> this box has a border on the left side.
... </
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
note: as with any shorthand property, in
dividual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions.
... instead, the in
dividual longhand properties have to be used.
border-right-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple
div with a border html <
div class="mybox"> <p>this is a box with a border around it.
... 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 - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a right border to a
div html <
div> this box has a border on the right side.
... </
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-top-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples a simple
div with a border html <
div class="mybox"> <p>this is a box with a border around it.
... 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
es to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of ellipse is used as the border
div { border-top-left-radius: 40px 40px; } an arc of ellipse is used as the border
div { border-top-left-radius: 40px 20px; } the box is a square: an arc of circle is used as the border
div { border-top-left-radius: 40%; } the box is not a square: an arc of ellipse is used as the border
div { borde...
...r-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
ies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of circle is used as the border
div { border-top-right-radius: 40px 40px; } an arc of ellipse is used as the border
div { border-top-right-radius: 40px 20px; } the box is a square: an arc of circle is used as the border
div { border-top-right-radius: 40%; } .
... 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 - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a top border html <
div> this box has a border on the top side.
... </
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 - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a pink outset border html <
div>i have a border, an outline, and a box shadow!
... 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.
box-flex-group - CSS: Cascading Style Sheets
when
dividing up the box's extra space, the browser first considers all elements within the first flex group.
...once there are no more flex groups, and there is still space remaining, the extra space is
divided within the containing box according to the box-pack property.
box-flex - CSS: Cascading Style Sheets
formal definition initial value0applies toelements that are direct children of an element with a css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style>
div.example { display: -moz-box; display: -webkit-box; border: 1px solid black; width: 100%; }
div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla */ -webkit-box-flex: 1; /* webkit */ border: 1px solid black; }
div.example > p:nth-child(2) { -moz-box-flex: 0; /* mozilla */ -webkit-bo...
...x-flex: 0; /* webkit */ border: 1px solid black; } </style> </head> <body> <
div class="example"> <p>i will expand to fill extra space</p> <p>i will not expand</p> </
div> </body> </html> specifications not part of any standard.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
s, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <
div id="flexbox"> <
div></
div> <
div></
div> <
div></
div> </
div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox >
div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout html <
div id="grid"> <
div></
div> <
div></
div> <
div></
div> </
div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: ...
...100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid >
div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css `column-gap` property.
column-rule - CSS: Cascading Style Sheets
it is a shorthand property that sets the in
dividual column-rule-* properties in a single, convenient declaration: column-rule-width, column-rule-style, and column-rule-color.
... note: as with all shorthand properties, any in
dividual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties).
conic-gradient() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples gradient at 40-degrees
div { width: 100px; height: 100px; } <
div></
div>
div { background-image: conic-gradient(from 40deg, #fff, #000); } off-centered gradient
div { width: 100px; height: 100px; } <
div></
div>
div { background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); } gradient pie-chart this example uses multi-position color stops, with adjacent colors having the ...
...
div { width: 100px; height: 100px; } <
div></
div>
div { background: conic-gradient( red 36deg, orange 36deg 170deg, yellow 170deg); border-radius: 50% } checkerboard
div { width: 100px; height: 100px; } <
div></
div>
div { background: conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) top left / 25% 25% repeat; border: 1px solid; } more conic-gradient examples please see using css gradients for more examples.
content - CSS: Cascading Style Sheets
</p> <h1>6</h1> <p>according to the mozilla manifesto, <q cite="http://www.mozilla.org/about/manifesto/">in
dividuals must have the ability to shape the internet and their own experiences on the internet.</q> therefore, we can infer that contributing to the open web can protect our own in
dividual experiences on it.
... 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.
fit-content() - CSS: Cascading Style Sheets
examples sizing grid columns with fit-content html <
div id="container"> <
div>item as wide as the content.</
div> <
div> item with more text in it.
... </
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-direction - CSS: Cascading Style Sheets
li mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <
div id="content"> <
div class="box" style="background-color:red;">a</
div> <
div class="box" style="background-color:lightblue;">b</
div> <
div class="box" style="background-color:yellow;">c</
div> </
div> <h4>this is a row-reverse</h4> <
div id="content1"> <
div class="box1" style="background-color:red;">a</
div> <
div class="box1" style="background-color:lightblue;">b</
div> <
div class="box1" style...
...="background-color:yellow;">c</
div> </
div> css #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-wrap - CSS: Cascading Style Sheets
formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <
div class="content"> <
div class="red">1</
div> <
div class="green">2</
div> <
div class="blue">3</
div> </
div> <h4>this is an example for flex-wrap:nowrap </h4> <
div class="content1"> <
div class="red">1</
div> <
div class="green">2</
div> <
div class="blue">3</
div> </
div> <h4>this is an example for flex-wrap:wrap-reverse </h4> <
div class="content2"> <
div class="red">1</
div> <
div class="green">...
...2</
div> <
div class="blue">3</
div> </
div> css /* common styles */ .content, .content1, .content2 { color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; } .content
div, .content1
div, .content2
div { height: 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.
float - CSS: Cascading Style Sheets
html <section> <
div class="left">1</
div> <
div class="left">2</
div> <
div class="right">3</
div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...phasellus feugiat est vel leo finibus congue.</p> </section> css section { border: 1px solid blue; width: 100%; float: left; }
div { margin: 5px; width: 50px; height: 150px; } .left { float: left; background: pink; } .right { float: right; background: cyan; } result clearing floats sometimes you may want to force an item to move below any floated elements.
font-kerning - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <
div id="kern"></
div> <
div id="nokern"></
div> <textarea id="input">av t.
... ij</textarea> css
div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let input = document.getelementbyid('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-variant-alternates - CSS: Cascading Style Sheets
stylistic() this function enables stylistic alternates for in
dividual characters.
...it is similar to styleset(), but doesn't create coherent glyphs for a set of characters; in
dividual characters will have independent and not necessarily coherent styles.
gap (grid-gap) - CSS: Cascading Style Sheets
examples flex layout html <
div id="flexbox"> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> </
div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox >
div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result grid layout html <
div id="grid"> <
div></
div> <
div></
div> <
div...
...></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> </
div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid >
div { border: 1px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
grid-column-end - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting column end for a grid item html <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> <
div class="box5">five</
div> </
div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-colum...
...n-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .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
] | [ span && [ <integer> | <custom-ident> ] ] examples setting column start for a grid item html <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> <
div class="box5">five</
div> </
div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-colum...
...n-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .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-row-end - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting row end for a grid item html <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> <
div class="box5">five</
div> </
div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-colum...
...n-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .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
] | [ span && [ <integer> | <custom-ident> ] ] examples setting row start for a grid item html <
div class="wrapper"> <
div class="box1">one</
div> <
div class="box2">two</
div> <
div class="box3">three</
div> <
div class="box4">four</
div> <
div class="box5">five</
div> </
div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-colum...
...n-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .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.
height - CSS: Cascading Style Sheets
e height on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <
div id="taller">i'm 50 pixels tall.</
div> <
div id="shorter">i'm 25 pixels tall.</
div> <
div id="parent"> <
div id="child"> i'm half the height of my parent.
... </
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.
left - CSS: Cascading Style Sheets
mal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <
div id="wrap"> <
div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the only containing element for this
div is the main window, so it positions itself in relation to it.</p> </
div> <
div id="example_2"> <pre> position: relative; top: 0; right: 0; </pre> <p>relative position in relation to its siblings.</p> ...
... </
div> <
div id="example_3"> <pre> float: right; position: relative; top: 20px; left: 20px; </pre> <p>relative to its sibling
div above, but removed from flow of content.</p> <
div id="example_4"> <pre> position: absolute; bottom: 10px; right: 20px; </pre> <p>absolute position inside of a parent with relative position</p> </
div> <
div id="example_5"> <pre> position: absolute; right: 0; left: 0; top: 200px; </pre> <p>absolute position with both left and right declared</p> </
div> </
div> </
div> css #wrap { width: 700px; margin: 0 auto; background: #5c5c5c; } pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap...
line-break - CSS: Cascading Style Sheets
html <
div lang="ja"> <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox normal">normal:<br>そこは湖のほとり�...
...��景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</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 '...
margin-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <
div class="container"> <
div class="box0">box 0</
div> <
div class="box1">box 1</
div> <
div class="box2">box one's negative margin pulls me up</
div> </
div> css css for
divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some defi...
...nitions 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.
mask-type - CSS: Cascading Style Sheets
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <
div class="redsquare"></
div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; ...
... width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <
div class="redsquare"></
div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 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 definitio...
max-width - CSS: Cascading Style Sheets
html <
div id="parent"> <
div id="child"> fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
... </
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
the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and
division without using the calc() function itself.
... the expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and
division ( / ) operators, using standard operator precedence rules.
min() - CSS: Cascading Style Sheets
the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and
division without using the calc() function itself.
... the expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and
division ( / ) operators, using standard operator precedence rules.
orphans - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax <integer> examples setting a minimum orphan size of three lines html <
div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
...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.
overflow-inline - CSS: Cascading Style Sheets
and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <
div id="
div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </
div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <
div id="
div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </
div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <
div id="
div3"> abcdefghijklmopqrstuvwxyzab...
...cdefghijklmopqrstuvwxyz </
div> </li> <li><code>overflow-inline:auto</code> — on most browsers, equivalent to <code>scroll</code> <
div 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-x - CSS: Cascading Style Sheets
s toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <
div id="
div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </
div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <
div id="
div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </
div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <
div id="
div3"> abcdefghijklmopqrstuvwxyzabcdefghijkl...
...mopqrstuvwxyz </
div> </li> <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</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.
overscroll-behavior-block - CSS: Cascading Style Sheets
html <main> <
div> <
div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </
div> </
div> </main> css main { height: 3000px; width: 500px; background-color: white; 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); } main >
div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-block: contain; }
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
html <main> <
div> <
div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </
div> </
div> </main> css main { height: 400px; width: 3000px; background-color: white; 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); } main >
div { height: 300px; width: 400px; overflow: auto; position: relative; top: 50px; left: 50px; overscroll-behavior-inline: contain; }
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.
page-break-after - CSS: Cascading Style Sheets
it won't apply on an empty <
div> that won't generate a box.
...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
it won't apply on an empty <
div> that won't generate a box.
...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
user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <
div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph.
... it has a little bit more text than the 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.
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <
div style="background-color:navy;"> <
div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </
div> <
div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </
div> </
div> the above html will 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.
place-content - CSS: Cascading Style Sheets
examples placing content in a flex container html <
div id="container"> <
div class="small">lorem</
div> <
div class="small">lorem<br/>ipsum</
div> <
div class="large">lorem</
div> <
div class="large">lorem<br/>impsum</
div> <
div class="large"></
div> <
div class="large"></
div> </
div> <code>writing-mode:</code><select id="writingmode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</optio...
...ocument.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in 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.
repeating-conic-gradient() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples black and white starburst
div { width: 200px; height: 200px; } <
div></
div>
div { background-image: repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); } off-centered gradient this gradient repeats 18 times, but since we only see the right half, we only see 9 repeats.
...
div { width: 200px; height: 200px; } <
div></
div>
div { background: repeating-conic-gradient( from 3deg at 25% 25%, green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); } more repeating-conic-gradient examples please see using css gradients for more examples.
right - CSS: Cascading Style Sheets
alueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <
div id="relative">relatively positioned</
div> <
div id="absolute">absolutely positioned</
div> css #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and right whe...
... html <
div id="parent">parent <
div id="nowidth">no width</
div> <
div id="width">width: 100px</
div> </
div> 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 */ #...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <
div id="flexbox"> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> <
div></
div> </
div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox >
div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; } result 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.
scroll-snap-coordinate - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting scroll snap coordinates html <
div id="container"> <
div> <p>at coordinate (0, 0)</p> <
div class="scrollcontainer coordinate0"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> <
div> <p>at coordinate (25, 0)</p> <
div class="scrollcontainer coordinate25"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> <
div> <p>at coordinate (50, 0)</p> <
div cla...
...ss="scrollcontainer coordinate50"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> </
div> </
div> css #container { display: flex; } #container >
div:nth-child(-n+2) { margin-right: 20px; } .scrollcontainer { width: 100px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer >
div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 >
div { scroll-snap-coordinate: 0 0; } .coordinate25 >
div { scroll-snap-coordinate: 25px 0; } .coordinate50 >
div { scroll-snap-coordinate: 50px 0; } .scrollcontainer >
div:nth-child(even) { background-color: #87ea87; } .scrollcontainer >
div:nth-child(odd) { background-color: #87...
scroll-snap-points-x - CSS: Cascading Style Sheets
initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <
div id="container"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> css #container { width: 200px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container >
div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container >
div:nth-ch...
...ild(even) { background-color: #87ea87; } #container >
div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
n initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <
div id="container"> <
div>1</
div> <
div>2</
div> <
div>3</
div> </
div> css #container { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container >
div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #con...
...tainer >
div:nth-child(even) { background-color: #87ea87; } #container >
div:nth-child(odd) { background-color: #87ccea; } result specifications not part of any standard.
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <
div> block with a gradient background image.
... html <
div id="gradient-shape"></
div> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit.
shape-outside - CSS: Cascading Style Sheets
| <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text html <
div class="main"> <
div class="left"></
div> <
div class="right"></
div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
... </p> </
div> css .main { width: 530px; } .left, .right { width: 40%; height: 12ex; background-color: lightgray; } .left { -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 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...
Specified value - CSS: Cascading Style Sheets
examples html <p>my specified color is given explicitly in the css.</p> <
div>the specified values of all my properties default to their initial values, because none of them are given in the css.</
div> <
div class="fun"> <p>the specified value of my font family is not given explicitly in the css, so it is inherited from my parent.
... 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.
perspective() - CSS: Cascading Style Sheets
10000100001000−1/d1 examples html <p>without perspective:</p> <
div class="no-perspective-box"> <
div class="face front">a</
div> <
div class="face top">b</
div> <
div class="face left">c</
div> </
div> <p>with perspective (9cm):</p> <
div class="perspective-box-far"> <
div class="face front">a</
div> <
div class="face top">b</
div> <
div class="face left">c</
div> </
div> <p>with perspective (4cm):</p> <
div class="perspective-box-closer"> <
div class="face front...
...">a</
div> <
div class="face top">b</
div> <
div class="face left">c</
div> </
div> css .face { position: absolute; width: 100px; height: 100px; line-height: 100px; font-size: 100px; text-align: center; } p +
div { width: 100px; height: 100px; transform-style: preserve-3d; margin-left: 100px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { 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: ...
rotate() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <
div>normal</
div> <
div class="rotated">rotated</
div> css
div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transfor...
... html <
div>normal</
div> <
div class="rotate">rotated</
div> <
div class="rotate-translate">rotated + translated</
div> <
div class="translate-rotate">translated + rotated</
div> css
div { position: absolute; left: 40px; top: 40px; width: 100px; 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 lev...
translate3d() - CSS: Cascading Style Sheets
100tx010ty001tz0001 examples using a single axis translation html <
div>static</
div> <
div class="moved">moved</
div> <
div>static</
div> css
div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; } result combining z-axis and x-axis translation html <
div>static</
div> <
div class="moved">moved</
div> ...
...<
div>static</
div> css
div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'translate3d()' in that specification.
<transform-function> - CSS: Cascading Style Sheets
html <main> <section id="example-element"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </section> <
div class="select-form"> <label>select a transform function</label> <select> <option selected>choose a function</option> <option>rotate(360deg)</opt...
... <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1, 80, 80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </
div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100...
unset - CSS: Cascading Style Sheets
examples color html <p>this text is red.</p> <
div class="foo"> <p>this text is also red.</p> </
div> <
div class="bar"> <p>this text is green (default inherited value).</p> </
div> css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { 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.
Used value - CSS: Cascading Style Sheets
example this example computes and displays the used width value of three elements (updates on resize): html <
div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <
div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <
div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </
div> </
div> </
div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: ...
...inherit; } /* make results easier to see */
div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var
div = document.queryselector(`#${id}`); var par =
div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(
div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50"); updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths); result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
vertical-align - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <
div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</
div> <
div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</
div> <
div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" a...
...lt="link" width="32" height="32" /> 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.
white-space - CSS: Cascading Style Sheets
ition initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <
div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </
div> <
div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dol...
... excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </
div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var results = document.querysel...
widows - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax <integer> examples controlling column widows html <
div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
...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.
CSS: Cascading Style Sheets
css building blocks this module carries on where css first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to
dive a bit deeper.
...we have covered the necessary prerequisites so we can now
dive deep into css layout, looking at different display settings, modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
Audio and video manipulation - Developer guides
/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edi...
...; // configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), ...
DOM onevent handlers - Developer guides
</p> <
div></
div> javascript then this javascript demonstrates that the value of the html attribute is unaffected by changes to the javascript object's property.
... let logelement = document.queryselector('
div'); let el = document.queryselector("a"); function log(msg) { logelement.innerhtml += `${msg}<br>` }; function anchoronclick(event) { log("changed onclick handler") }; // original handler log(`element's onclick as a javascript property: <code> ${el.onclick.tostring()} </code>`); //changing handler using .onclick log('<br>changing onclick handler using <strong> onclick property </strong> '); el.onclick = anchoronclick; log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`but the html attribute is unchanged: <code> ${el.getattribute("onclick")} </code><br>`); //changing handler using .setattribute log('<hr/><br> changing onclick handler using <strong> setattribute method </strong> '); el.setattribute("onclick", 'anchor...
HTML5 Parser - Developer guides
(there are also some element whose end tags can be omitted in some cases, such as <p> in the example below, but it's simpler to always use end tags for those elements than to make sure that the end tags are only omitted when they aren't necessary.) for example, the following code writes a balanced sub-tree: <script> document.write("<
div>"); document.write("<p>some content goes here.</p>"); document.write("</
div>"); </script> <!-- non-script html goes here.
... <script>document.write("<
div>");</script> <p>some content goes here.</p> <script>document.write("</
div>");</script> for more information, see optimizing your pages for speculative parsing.
HTML5 - Developer guides
it is a new version of the language html, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more
diverse and powerful web sites and applications.
... 2d/3d graphics and effects: allowing a much more
diverse range of presentation options.
A hybrid approach - Developer guides
this hybrid approach centers around breaking down mobile development into its three goals, and then applying the best techniques available to tackle each goal in
dividually.
... when it is right to choose this option combining server-side and client-side techniques is something that is always worth considering; there are so many options that one must just weigh the pros and cons of each in
dividual technique employed.
Writing forward-compatible websites - Developer guides
for example, if you have this markup: <
div onclick="alert(ownerdocument)">click me</
div> then clicking on the text alerts the ownerdocument of the
div.
... to avoid this, fully qualify global variable access using "window.", like so: <script> function localname() { alert('function localname has been called'); } </script> <
div onclick="window.localname()">clicking me should show an alert<
div> don't concatenate scripts you don't control the "use strict;" directive in ecmascript, when used on the file level, applies to everything in the file.
HTML attribute: accept - HTML: Hypertext Markup Language
for example, a file picker that needs content that can be presented as an image, including both standard image formats and pdf files, might look like this: <input type="file" accept="image/*,.pdf"> using file inputs a basic example <form method="post" enctype="multipart/form-data"> <
div> <label for="file">choose file to upload</label> <input type="file" id="file" name="file" multiple> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; } this produces the following output: note: you can find this example on github too — see the source code, and also see it running live.
... let's look at a more complete example: <form method="post" enctype="multipart/form-data"> <
div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; } specifications specification status html living standardthe definition of 'accept attribute' in that specification.
HTML attribute: readonly - HTML: Hypertext Markup Language
example html <
div class="group"> <input type="textbox" value="some value" readonly="readonly"/> <label>textbox</label> </
div> <
div class="group"> <input type="date" value="2020-01-01" readonly="readonly"/> <label>date</label> </
div> <
div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </
div> <
div class="group"> <input type="password" value="some value"...
... readonly="readonly"/> <label>password</label> </
div> <
div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </
div> result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <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> <in...
Date and time formats used in HTML - HTML: Hypertext Markup Language
leap years a leap year is any year which is
divisible by 400 or the year is
divisible by 4 but not by 100.
... the adjustments to the algorithm (taking a leap year when the year can be
divided by 400, and skipping leap years when the year is
divisible by 100) help to bring the average even closer to the correct number of days (365.2425 days).
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
<html> <head></head> <body> <!-- the original content accessed by <content> --> <
div> <h4>my content heading</h4> <p>my content text</p> </
div> <script> // get the <
div> above.
... var mycontent = document.queryselector('
div'); // create a shadow dom on the <
div> var shadowroot = mycontent.createshadowroot(); // insert into the shadow dom a new heading and // part of the original content: the <p> tag.
<input type="date"> - HTML: Hypertext Markup Language
html the html looks like so: <form> <
div class="nativedatepicker"> <label for="bday">enter your birthday:</label> <input type="date" id="bday" name="bday"> <span class="validity"></span> </
div> <p class="fallbacklabel">enter your birthday:</p> <
div class="fallbackdatepicker"> <span> <label for="day">day:</label> <select id="day" name="day"> </select> </span> <span> ...
... <option>june</option> <option>july</option> <option>august</option> <option>september</option> <option>october</option> <option>november</option> <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 { conte...
<input type="hidden"> - HTML: Hypertext Markup Language
the edit form's html might look a little bit like this: <form> <
div> <label for="title">post title:</label> <input type="text" id="title" name="title" value="my excellent blog post"> </
div> <
div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
... </textarea> </
div> <
div> <button type="submit">update post</button> </
div> <input type="hidden" id="postid" name="postid" value="34657"> </form> let's also add some simple css: html { font-family: sans-serif; } form { width: 500px; }
div { display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's browser and would use that information when the form is returned to know which database record to update with modifi...
<input type="reset"> - HTML: Hypertext Markup Language
a simple reset button we'll begin by creating a simple reset button: <form> <
div> <label for="example">type in some sample text</label> <input id="example" type="text"> </
div> <
div> <input type="reset" value="reset the form"> </
div> </form> this renders like so: try entering some text into the text field, and then pressing the reset button.
... <form> <
div> <label for="example">type in some sample text</label> <input id="example" type="text"> </
div> <
div> <input type="reset" value="reset the form" accesskey="r"> </
div> </form> the problem with the above example is that there's no way for the user to know what the access key is!
<input type="submit"> - HTML: Hypertext Markup Language
a simple submit button we'll begin by creating a form with a simple submit button: <form> <
div> <label for="example">let's submit some text</label> <input id="example" type="text" name="text"> </
div> <
div> <input type="submit" value="send"> </
div> </form> this renders like so: try entering some text into the text field, and then submitting the form.
... here's the previous example with the s access key added: <form> <
div> <label for="example">let's submit some text</label> <input id="example" type="text" name="text"> </
div> <
div> <input type="submit" value="send" accesskey="s"> </
div> </form> for example, in firefox for mac, pressing control-option-s triggers the send button, while chrome on windows uses alt+s.
<input type="url"> - HTML: Hypertext Markup Language
let's see how:
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; } 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="mycomment">what is the problem?</label> <input id="mycomment" name="mycomment" 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.
<menuitem> - HTML: Hypertext Markup Language
example html content <!-- a <
div> element with a context menu --> <
div contextmenu="popup-menu"> right-click to see the adjusted context menu </
div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
... </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.
<section>: The Generic Section element - HTML: Hypertext Markup Language
do not use the <section> element as a generic container; this is what <
div> is for, especially when the sectioning is only for styling purposes.
... example before <
div> <h1>heading</h1> <p>bunch of awesome content</p> </
div> after <section> <h1>heading</h1> <p>bunch of awesome content</p> </section> specifications specification status comment html living standardthe definition of '<section>' in that specification.
<shadow>: The obsolete Shadow Root element - HTML: Hypertext Markup Language
<html> <head></head> <body> <!-- this <
div> will hold the shadow roots.
... --> <
div> <!-- this heading will not be displayed --> <h4>my original heading</h4> </
div> <script> // get the <
div> above with its content var origcontent = document.queryselector('
div'); // create the first shadow root var shadowroot1 = origcontent.createshadowroot(); // create the second shadow root var shadowroot2 = origcontent.createshadowroot(); // insert something into the older shadow root shadowroot1.innerhtml = '<p>older shadow root inserted by <shadow></p>'; // insert into younger shadow root, including <shadow>.
<template>: The Content Template element - HTML: Hypertext Markup Language
consider the following html and javascript: html <
div id="container"></
div> <template id="template"> <
div>click me</
div> </template> javascript const container = document.getelementbyid("container"); const template = document.getelementbyid("template"); function clickhandler(event) { alert("clicked a
div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstc...
...secondclone is an html
divelement instance, clicking on it works as one would expect.
itemtype - HTML: Hypertext Markup Language
simple example html <
div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme</span> <span itemprop="name">executive anvil</span> </
div> structured data itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <
div itemscope itemtype="http://schema.org/product"> ...
...</span> </
div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looki...
tabindex - HTML: Hypertext Markup Language
if you set the tabindex attribute on a <
div>, then its child content cannot be scrolled with the arrow keys unless you set tabindex on the content, too.
...an example of this would be using a <
div> element to describe a button, instead of the <button> element.
HTML documentation index - HTML: Hypertext Markup Language
it is useful for writing a poem or an address, where the
division of lines is significant.
... 93 <
div>: the content
division element content
division, element, html, html grouping content, html:flow content, layout, reference, web,
div the html content
division element (<
div>) is the generic container for flow content.
Microdata - HTML: Hypertext Markup Language
example html <
div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <
div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.6</span> (...
... <span itemprop="ratingcount">8864</span> ratings ) </
div> <
div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<span itemprop="price">1.00</span> <meta itemprop="pricecurrency" content="usd" /> </
div> </
div> structured data itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop name angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1...
Evolution of HTTP - HTTP
http/1.1 – the standardized protocol in parallel to the somewhat chaotic use of the
diverse implementations of http/1.0, and since 1995, well before the publication of http/1.0 document the next year, proper standardization was in progress.
... during the same time, the need for an encrypted transport layer raised: the web left the relative trustiness of a mostly academic network, to a jungle where advertisers, random in
dividuals or criminals compete to get as much private information about people, try to impersonate them or even to replace data transmitted by altered ones.
MIME types (IANA media types) - HTTP
a multipart type is one which represents a document that's comprised of multiple component parts, each of which may have its own in
dividual mime type; or, a multipart type may encapsulate multiple files being sent together in one transaction.
... multipart list at iana data that is comprised of multiple components which may in
dividually have different mime types.
Feature Policy - HTTP
writing a policy a policy is described using a set of in
dividual policy directives.
...see in
dividual directive pages for details.
An overview of HTTP - HTTP
clients and servers communicate by exchanging in
dividual messages (as opposed to a stream of data).
... each in
dividual request is sent to a server, which handles it and provides an answer, called the response.
A typical HTTP session - HTTP
a client request consists of text directives, separated by crlf (carriage return, followed by line feed),
divided into three blocks: the first line contains a request method followed by its parameters: the path of the document, i.e.
...similar to a client request, a server response is formed of text directives, separated by crlf, though
divided into three blocks: the first line, the status line, consists of an acknowledgment of the http version used, followed by a status request (and its brief meaning in human-readable text).
JavaScript data types and data structures - JavaScript
however, you are able to notice this when you
divide by zero: > 42 / +0 infinity > 42 / -0 -infinity although a number often represents only its value, javascript provides binary (bitwise) operators.
...for example: a substring of the original by picking in
dividual letters or using string.substr().
JavaScript modules - JavaScript
the modules directory's two modules are described below: canvas.js — contains functions related to setting up the canvas: create() — creates a canvas with a specified width and height inside a wrapper <
div> with a specified id, which is itself appended inside a specified parent element.
...inside shapes.js, we include the following lines: export { square } from './shapes/square.js'; export { triangle } from './shapes/triangle.js'; export { circle } from './shapes/circle.js'; these grab the exports from the in
dividual submodules and effectively make them available from the shapes.js module.
Text formatting - JavaScript
you can't change in
dividual characters because strings are immutable array-like objects: const hello = 'hello, world!'; const hellolength = hello.length; hello[0] = 'l'; // this has no effect, because strings are immutable hello[0]; // this returns "h" characters whose unicode scalar values are greater than u+ffff (such as some rare chinese/japanese/korean/vietnamese characters and some emoji) are stored in utf-16 w...
...accessing the in
dividual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the unicode standard.
Memory Management - JavaScript
var d = new date(); // allocates a date object var e = document.createelement('
div'); // allocates a dom element some methods allocate new values or objects: var s = 'azerty'; var s2 = s.substr(0, 3); // s2 is a new string // since strings are immutable values, // javascript may decide to not allocate memory, // but just store the [0, 3] range.
...cycles are a common mistake that can generate memory leaks: var
div; window.onload = function() {
div = document.getelementbyid('my
divelement');
div.circularreference =
div;
div.lotsofdata = new array(10000).join('*'); }; in the above example, the dom element "my
divelement" has a circular reference to itself in the "circularreference" property.
Date - JavaScript
in addition to methods to read and alter in
dividual components of the local date and time (such as getday() and sethours()), there are also versions of the same methods that read and manipulate the date and time using utc (such as getutcday() and setutchours()).
... get the number of seconds since the ecmascript epoch let seconds = math.floor(date.now() / 1000) in this case, it's important to return only an integer—so a simple
division won't do.
Promise - JavaScript
" + successmessage) }); example with
diverse situations this example shows
diverse techniques for using promise capabilities, and
diverse situations that can occur.
...=> { console.log("got: ",info.thenumber," , ", info.wordevenodd); return info; }) .catch((reason) => { if(reason === -999) { console.error("had previously handled error"); } else { console.error(`trouble with promisegetword(): ${reason}`); } }) .finally((info) => console.log("all done")); advanced example <button id="btn">make a promise!</button> <
div id="log"></
div> this small example shows the mechanism of a promise.
String.prototype.charAt() - JavaScript
var str = 'a \ud87e\udc04 z'; // we could also use a non-bmp character directly for (var i = 0, chr; i < str.length; i++) { if ((chr = getwholechar(str, i)) === false) { continue; } // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // in
dividual character console.log(chr); } function getwholechar(str, i) { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd800 <= code && code <= 0xdbff) { ...
... let str = 'a\ud87e\udc04z' // we could also use a non-bmp character directly for (let i = 0, chr; i < str.length; i++) { [chr, i] = getwholecharandi(str, i) // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning an array with the in
dividual character // and 'i' value (only changed if a surrogate pair) console.log(chr) } function getwholecharandi(str, i) { let code = str.charcodeat(i) if (number.isnan(code)) { return '' // position not found } if (code < 0xd800 || code > 0xdfff) { return [str.charat(i), i] // normal character, keeping 'i' the same } // high surrogate (could change last hex to 0xdb7f...
String - JavaScript
character access there are two ways to access an in
dividual character in a string.
... the first is the charat() method: return 'cat'.charat(1) // returns "a" the other way (introduced in ecmascript 5) is to treat the string as an array-like object, where in
dividual characters correspond to a numerical index: return 'cat'[1] // returns "a" when using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed.
Web audio codec guide - Web media technologies
of course, in
dividual browsers may or may not choose to support all of these codecs, and their support for which container types can use them may vary as well.
...at a theoretical level, the maximum frequency a codec can represent is the sample rate
divided by two; this frequency is called the nyquist frequency.
Digital video concepts - Web media technologies
rgb most computer graphics models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an in
dividual pixel, and an image is comprised of a two-dimensional array of these pixels.
...there are four luma samples in each row and four chroma samples in each row as well, so that every pixel represented by the block is in
dividually colored.
Populating the page: how browsers work - Web Performance
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>my simple page</title> <link rel="stylesheet" src="styles.css"/> <script src="myscript.js"></script> </head> <body> <h1 class="heading">my page</h1> <p>a paragraph with a <a href="https://example.com/about">link</a></p> <
div> <img src="myimage.jpg" alt="image description"/> </
div> <script src="anotherscript.js"></script> </body> </html> this response for this initial request contains the first byte of data received.
... paint the last step in the critical rendering path is painting the in
dividual nodes to the screen, the first occurence of which is called the first meaningful paint.
Navigation and resource timings - Web Performance
compression to get the compression savings percentage, we
divide the transfersize by the decodedbodysize, and subtract that from 100%.
... resource timing whereas navigation timing is for measuring the performance of the main page, generally the html file via which all the other assets are requested, resource timing measures timing for in
dividual resources, the assets called in by the main page, and any assets that those resources request.
in - SVG: Scalable Vector Graphics
html <
div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
...--> <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.
textLength - SVG: Scalable Vector Graphics
html the html is also simple, with only two displayed elements contained inside a grouping <
div>: <
div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </
div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.
...note that we have to
dive into textlength to get its baseval property; textlength is stored as an svglength object, so we can't treat it like a plain number.
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style>
div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <
div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscin...
... </
div> </foreignobject> </svg> attributes height the height of the foreignobject.
<text> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each in
dividual glyph.
... can rotate glyphs in
dividually.
<tspan> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: none; animatable: yes rotate rotates orientation of each in
dividual glyph.
... can rotate glyphs in
dividually.
Example - SVG: Scalable Vector Graphics
</p> <
div> (c) 2006 <a id='emailme' href='#'>nick johnson</a> <script type='text/javascript'> <![cdata[ // foil spam bots var email = '@riovia.net'; email ='nick' + email; document.getelementbyid('emailme').href = 'mailto:'+email; ]]> </script> this software is free for you to use in any way whatsoever, and comes with no warranty at all.
... </
div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>max.
How to turn off form autocompletion - Web security
this means that the criterion can be passed (by adding the relevant autocomplete attributes to in
dividual form fields) even when autocompletion for the form itself has been turned off.
... disabling autocompletion to disable autocompletion in forms, you can set the autocomplete attribute to "off": autocomplete="off" you can do this either for an entire form, or for specific input elements in a form: <form method="post" action="/form" autocomplete="off"> […] </form> <form method="post" action="/form"> […] <
div> <label for="cc">credit card:</label> <input type="text" id="cc" name="cc" autocomplete="off"> </
div> </form> setting autocomplete="off" on fields has two effects: it tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
Index - XSLT: Extensible Stylesheet Language Transformations
6 advanced example xslt this advanced example sorts several
divs based on their content.
...the structure of an xml document is designed to reflect and clarify important relationships among the in
dividual aspects of the content itself, unhindered by a need to provide any indication about how this data should eventually be presented.
Cross-domain Content Scripts - Archive of obsolete content
eight: 50, contenturl: data.url("panel.html"), contentscriptfile: data.url("panel-script.js") }); forecast_panel.on("show", function(){ forecast_panel.port.emit("show"); }); require("sdk/ui/button/action").actionbutton({ id: "get-forecast", label: "get the forecast", icon: "./icon-16.png", onclick: function() { forecast_panel.show(); } }); the "panel.html" just includes a <
div> block for the forecast: <!doctype html> <!-- panel.html --> <html> <head></head> <body> <
div id="forecast_summary"></
div> </body> </html> the "panel-script.js" uses xmlhttprequest to fetch the latest forecast: // panel-script.js var url = "http://datapoint.metoffice.gov.uk/public/data/txt/wxfcs/regionalforecast/json/500?key=your-api-key"; self.port.on("show", function () { var...
passwords - Archive of obsolete content
so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <
div>please log in.</
div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" formsubmiturl: "http://login.example.com" usernamefield: "uname" passwordfield: "pword" note that for bot...
private-browsing - Archive of obsolete content
check whether a given object is private, so an add-on can respect private browsing usage per-window private browsing private browsing status is a property of an in
dividual browser window.
tabs - Archive of obsolete content
in particular, you can enumerate it: var tabs = require('sdk/tabs'); for (let tab of tabs) console.log(tab.title); you can also access in
dividual tabs by index: var tabs = require('sdk/tabs'); tabs.on('ready', function () { console.log('first: ' + tabs[0].title); console.log('last: ' + tabs[tabs.length-1].title); }); you can access the currently active tab: var tabs = require('sdk/tabs'); tabs.on('activate', function () { console.log('active: ' + tabs.activetab.url); }); track a single tab given a tab, you can register ev...
url - Archive of obsolete content
gettld(url) returns the top-level domain for the given url: that is, the highest-level domain under which in
dividual domains may be registered.
places/history - Archive of obsolete content
data events are emitted for every in
dividual search result found, whereas end events are emitted as an aggregate of an entire search, passing in an array of all results into the handler.
ui/button/action - Archive of obsolete content
the reason for using this, rather than setting properties in
dividually, is that you can define an object with the properties to set in one place, then apply it to the global state with a single line: const defaultstate = { "label": "default label", "icon": "./default.png", } const differentstate = { "label": "different label", "icon": "./different.png", } var { actionbutton } = require("sdk/ui/button/action"); var button = actionbutton({ id: "...
ui/button/toggle - Archive of obsolete content
the reason for using this, rather than setting state properties in
dividually, is that you can define an object with the properties to set in one place, then apply it to the global state with a single line: const defaultstate = { "label": "default label", "icon": "./default.png", } const differentstate = { "label": "different label", "icon": "./different.png", } var { togglebutton } = require("sdk/ui/button/toggle"); var button = togglebutton({ id: "...
Displaying annotations - Archive of obsolete content
annotation panel html <!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" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; }
div { text-align:left; } </style> </head> <body> <
div id="annotation"> </
div> </body> </html> save this in data/annotation as annotation.html.
Storing annotations - Archive of obsolete content
annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <
div id="annotation-list"> </
div> <
div id="template"> <
div class="annotation-details"> <a class="url"></a> <
div class="selection-text"></
div> <
div class="annotation-text"></
div> </
div> </
div> </body> </html> here's the corresponding css: #annotation-list .annotation-details { padding: 10px; margin: 10px; border: solid 3px #eee; background-color: white; } #annotation-...
Creating Event Targets - Archive of obsolete content
dded: " + uri); } function logvisited(uri) { console.log("visited: " + uri); } exports.main = function() { bookmarks.on("added", logadded); bookmarks.on("visited", logvisited); }; exports.onunload = function() { bookmarks.removelistener("added", logadded); bookmarks.removelistener("visited", logvisited); } classes as event targets sometimes we want to emit events at the level of in
dividual objects, rather than at the level of the module.
Signing an XPI - Archive of obsolete content
many issuers will not provide a software developer certificate to in
dividuals (how ridiculous) so you may have to search hard to find one that will, and who also has a ca root authority installed in mozilla firefox.
Tabbed browser - Archive of obsolete content
rong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<
div>hello world</
div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
XML data - Archive of obsolete content
in the document's stylesheet, you specify how info elements are to be displayed: info { display: block; margin: 1em 0; } the most common values for the display property are: block displayed like html's
div (for headings, paragraphs) inline displayed like html's span (for emphasis within text) add your own style rules that specify the font, spacing and other details in the same way as for html.
CSS3 - Archive of obsolete content
in order to accelerate the standardization of non-problematic features, the css working group of the w3c, in a decision referred as the beijing doctrine,
divided css in smaller components called modules .
No Proxy For configuration - Archive of obsolete content
original document information author(s): benjamin chuang last updated date: november 2, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Using XML Data Islands in Mozilla - Archive of obsolete content
the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> <object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object> <
div id="output-box">demo did not run</
div> </body> </html> ...
Visualizing an audio spectrum - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <
div><canvas id="fft" width="512" height="200"></canvas></
div> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlengt...
Autodial for Windows NT - Archive of obsolete content
original document information author(s): benjamin chuang last updated date: october 2, 2002 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Bonsai - Archive of obsolete content
original document information author(s): jamie zawinski last updated date: september 8, 2004 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Creating a Mozilla Extension - Archive of obsolete content
he behavior - updating the status bar panel enabling the behavior - updating the status periodically making it into a static overlay making it into a dynamic overlay and packaging it up for distribution conclusion next » original document information author(s): myk melez last updated date: september 19, 2006 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Creating a hybrid CD - Archive of obsolete content
original document information author(s): dawn endico last updated date: may 1, 2001 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Creating a Release Tag - Archive of obsolete content
-name cvs | xargs -l -p10 cvs tag -l mozilla_0_9_4_1_release >& ../taglog original document information author(s): dawn endico last updated date: november 1, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Developing New Mozilla Features - Archive of obsolete content
original document information author(s): mitchell baker last updated date: october 30, 2004 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Editor Embedding Guide - Archive of obsolete content
commandparam->setcstringvalue("state_attribute","left"); reading for reading you may go after in
dividual name/value pairs you know are there or you may iterate through all the name/value pairs and programatically pull off data.
Layout FAQ - Archive of obsolete content
@035ffa8c[0,4,t] next=035ffb1c {0,0,330,285} [state=41600020] sc=035ffa3c pst=:-moz-non-element< "\nabc" > frame(br)(1)@035ffb1c {330,225,0,0} [state=00000020] [content=035aebf0] > > the linebox is used to contain everything on a single line: example how do you fix inconsistent float behavior in firefox involving a two column layout using display:table and floating
div elements?
Style System Overview - Archive of obsolete content
(but beware didsetstylecontext) the style system style sheets & rules ↓ rule tree ↓ style context interface original document information author(s): david baron last updated date: june 6, 2003 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Code snippets - Archive of obsolete content
esource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, recordtype); coll.full = true; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); console.log(item.cleartext); }; coll.get(); print an in
dividual record let collection = "history"; let id = "guid_goes_here"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, recordtype); coll.full = true; coll.ids = [id]; coll.recordhandler = function(item...
Gecko Coding Help Wanted - Archive of obsolete content
original document information author(s): fantasai last updated date: may 4, 2004 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
HTTP Class Overview - Archive of obsolete content
als for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original document information author(s): darin fisher last updated date: august 5, 2002 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Helper Apps (and a bit of Save As) - Archive of obsolete content
original document information author(s): boris zbarsky last updated date: september 12, 2002 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Introducing the Audio API extension - Archive of obsolete content
we can extend the previous example to visualize the timestamp and the first two samples in a <
div> element: <!doctype html> <html> <head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { channels = audio.mozchannels; rate = aud...
Makefile.mozextension.2 - Archive of obsolete content
either remove (clean it), or choose in
dividual targets to build."; exit 1; } @echo $(mkdir) $(project) $(mkdir) $(project)/content $(project)/locale $(project)/locale/en-us $(project)/components/ $(project)/defaults/ $(project)/defaults/preferences/ $(project)/locale/de-de $(project)/skin make_xpi: $(mkdir) $(project)/chrome && \ cd $(project) && \ $(zipprog) -r chrome/$(project).jar content locale skin && \ $(zipprog) -r $(pr...
Summary of Changes - Archive of obsolete content
r align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed html 4.01 object deprecated applet html 4.01 object non-standard marquee html 4.01
div plus scripting non-standard bgsound html 4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.getelementbyid(id_attribute_value) ie5+ formname.inputname.value dom level 1: document.forms[...
Using the W3C DOM - Archive of obsolete content
for example, the following short sample dynamically sets the left margin of a <
div> element with an id of "inset" to half an inch: // in the html: <
div id="inset">sample text</
div> document.getelementbyid("inset").style.marginleft = ".5in"; note: internet explorer 5 through 7 have a flawed implementation of getelementbyid(), which returns the first element with a matching name or id (id versus name when using getelementbyid, msdn: getelementbyid method).
Using Web Standards in your Web Pages - Archive of obsolete content
ur page using web standards - how to using the w3c dom developing cross browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright information: portions of this content are © 1998–2008 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
-moz-border-bottom-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <
div id="example">example</
div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c...
-moz-border-left-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <
div id="example">example</
div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c...
-moz-border-right-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <
div id="example">example</
div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c...
-moz-border-top-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <
div id="example">example</
div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c...
Writing JavaScript for XHTML - Archive of obsolete content
for example: var string = '<
div xmlns="http://www.w3.org/999/xhtml"><h1>hello world!</h1></
div>'; var parser = new domparser(); var documentfragment = parser.parsefromstring(string, "text/xml"); body.appendchild(documentfragment); // assuming 'body' is the body element but be aware that if your string is not well-formed xml (e.g., you have an & where it should not be), then this method will crash, leaving you with a parser er...
Displaying a graphic with audio samples - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <
div><canvas id="fft" width="512" height="200"></canvas></
div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; ...
The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for web designers: addressing more customers, a broader audience, more
diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site.
Index - Game development
70 2d maze game with device orientation canvas, device orientation api, game development, html5, phaser, vibration api i hope this tutorial will help you
dive into 2d game development and inspire you to create awesome games on your own.
Introduction to game development for the Web - Game development
.0) input touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an in
dividual or a large game studio, you want to know why it makes sense to target the web with your next game project.
Game distribution - Game development
you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to
diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels.
Explaining basic 3D theory - Game development
vertex processing vertex processing is about combining the information about in
dividual vertices into primitives and setting their coordinates in the 3d space for the viewer to see.
Building up a basic demo with Babylon.js - Game development
n.mesh.createcylinder("cylinder", 2, 2, 2, 12, 1, scene); cylinder.position.x = 5; cylinder.rotation.x = -0.2; var cylindermaterial = new babylon.standardmaterial("material", scene); cylindermaterial.emissivecolor = new babylon.color3(1, 0.58, 0); cylinder.material = cylindermaterial; the cylinder parameters are: name, height, diameter at the top, diameter at the bottom, tessellation, height sub
divisions and the scene to add it to.
3D games on the Web - Game development
there are some advanced concepts which you should
dive into and learn more about — like shaders, collision detection, or the latest hot topic: virtual reality on the web.
Unconventional controls - Game development
first, we add a <script> tag with the url pointing at this file, and add <
div id="output"></
div> just before the closing </body> tag for outputting diagnostic information.
Efficient animation for web games - Game development
measure performance there are some popular animation-related libraries and ui toolkits with animation functions that still do things like using settimeout to drive their animations, drive all their animations completely in
dividually, or other similar things that aren’t conducive to maintaining a high frame-rate.
Animations and tweens - Game development
the spritesheet() method's two extra paremeters determine the width and height of each single frame in the given spritesheet file, indicating to the program how to chop it up to get the in
dividual frames.
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper >
div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #fff8f8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <
div class="wrapper"> <
div>one</
div> <
div>two</
div> <
div>three</
div> <
div>four</
div> <
div>five</
div> </
div> ...
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
s (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most prominently for javascript iso (international organization for standardization): standards governing a
diverse array of aspects, including character encodings, website management, and user-interface design learn more general knowledge web standards on wikipedia ...
Property (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
here's an example of a css rule: /* "
div" is a selector indicating that all the
div elements */ /* in the document will be styled by that rule */
div { /* the property "color" with the value "black" indicates */ /* that the text will have the color black */ color: black; /* the property "background-color" with the value "white" indicates */ /* that the background color of the elements will be white */ background-color: white; } learn more general knowledge learn css technical reference the css reference on mdn the css working group current work ...
Mobile accessibility - Learn web development
this occurs because we are using code such as the following:
div.onmousedown = function() { initialboxx =
div.offsetleft; initialboxy =
div.offsettop; movepanel(); } document.onmouseup = stopmove; to enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:
div.ontouchstart = function(e) { initialboxx =
div.offsetleft; initialboxy =
div.offsettop; positionhandler(e)...
Accessible multimedia - Learn web development
here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> <
div class="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> <
div class="time">00:00</
div> </
div> </section> javascript basic setup we've inserted some simple control buttons below our video.
What is a URL? - Learn web development
deeper
dive basics: anatomy of a url here are some examples of urls: https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource).
What is a Domain Name? - Learn web development
deeper
dive structure of domain names a domain name has a simple structure made of several parts (it might be one part only, two, three...), separated by dots and read from right to left: each of those parts provides specific information about the whole domain name.
Example 3 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* ---...
Example 4 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </
div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles *...
Example 5 - Learn web development
change states html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <
div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </
div> </form> css content .widget select, .no-widget .select { p...
Example - Learn web development
abel> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; }
div+
div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-ali...
Other form controls - Learn web development
this value is visually rendered as a bar, and to know how this bar looks, we compare the value to some other set values: the low and high values
divide the range in three parts: the lower part of the range is between the min and low values, inclusive.
Example - Learn web development
a simple form html content <form action="/my-handling-form-page" method="post"> <
div> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </
div> <
div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </
div> <
div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </
div> <
div class="button"> <button type="submit">send your message</button> </
div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; }
div +
div { margin-top:...
Web performance - Learn web development
measuring performance now that you understand a few performance metrics, we take a deeper
dive into performance tools, metrics, and apis and how we can make performance part of the web development workflow.
Adding a new todo form: Vue events, methods, and models - Learn web development
m './components/todoform'; you also need to register the new component in your app component — update the components property of the component object so that it looks like this: components: { todoitem, todoform } finally for this section, render your todoform component inside your app by adding the <to-do-form /> element inside your app's <template>, like so: <template> <
div id="app"> <h1>my to-do list</h1> <to-do-form></to-do-form> <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> </
div> </template> now when you view your running site, you should see the new form displayed.
Rendering a list of Vue components - Learn web development
your app.vue template should now look like this: <template> <
div id="app"> <h1>my to-do list</h1> <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done" :id="item.id"></to-do-item> </li> </ul> </
div> </template> when you look at your rendered site, it should look the same, but our refactor now means that our id is being taken from the data inside app.vue and passed into todoitem a...
Setting up your own test automation environment - Learn web development
you can use any url to point to your resource, including a file:// url to test a local document: driver.get('file:///users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-
div-buttons.html'); or driver.get('http://localhost:8888/fake-
div-buttons.html'); but it is better to use a remote server location so the code is more flexible — when you start using a remote server to run your tests (see later on), your code will break if you try to use local paths.
Git and GitHub - Learn web development
git is an example of a vcs, and github is a web site + infrastructure that provides a git server plus a number of really useful tools for working with git repositories in
dividually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.
Introducing a complete toolchain - Learn web development
if this is the case, install it using the following command: npm install prettier -g now that prettier is installed, running and tidying your code can be done on the command line on an in
dividual file basis from anywhere on your computer, for example: prettier --write ./src/index.html note: in the command above, i use prettier with the --write flag.
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with in
dividual tools.
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(
div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
Gecko Logging
you can set an overall logging level, though it could be quite verbose: set rust_log="debug" you can also target in
dividual modules by path: set rust_log="style::style_resolver=debug" for linux/macos users, you need to use export rather than set.
Contributing to the Mozilla code base
mozilla is a large project and we are thrilled to have contributors with very
diverse skills below is a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.
Frame script environment
this can be used if a framescript needs to interact with in
dividual dom windows instead of simply listening for events bubbling up from content.
Frame script environment
this can be used if a framescript needs to interact with in
dividual dom windows instead of simply listening for events bubbling up from content.
overflow-clip-box-block
examples padding-box html <
div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <
div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></
div> </
div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scr...
overflow-clip-box-inline
examples padding-box html <
div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <
div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></
div> </
div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function sc...
overflow-clip-box
formal syntax padding-box | content-box examples padding-box html <
div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <
div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></
div> </
div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelement...
MozBeforePaint
<!doctype html> <html> <body> <
div id="d" style="width:100px; height:100px; background:lime; position:relative;"></
div> <script> var d = document.getelementbyid("d"); var start = window.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("m...
Embedding the editor
the editing session will forward commands to the in
dividual editors depending on focus, and mediate undo/redo between them.
How to add a build-time test
you can of course just use the onetests_type directory here, but if you want to sub
divide your tests by functionality, separate directories is the way to go.
Implementing QueryInterface
original document information author(s): scott collins last updated date: may 8, 2003 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Integrated Authentication
original document information author(s): darin fisher last updated date: december 27, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Introduction to Layout in Mozilla
original document information author(s): chris waterson last updated date: june 10, 2002 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Mozilla Development Tools
original document information author(s): myk melez last updated date: november 8, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Mozilla Style System Documentation
david baron last updated date: june 6, 2003 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
BloatView
reading in
dividual bloat logs full bloatview output contains per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class.
Gecko Profiler FAQ
in this view, the timestamps of in
dividual samples / stacks will not be meaningful.
Leak-hunting strategies and tips
strategy for finding leaks when trying to make a particular testcase not leak, i recommend focusing first on the largest object graphs (since these entrain many smaller objects), then on smaller reference-counted object graphs, and then on any remaining in
dividual objects or small object graphs that don't entrain other objects.
Memory reporting
two ways to measure memory reporters can be
divided into the two following kinds.
Profiling with the Firefox Profiler
for example, on b2g, when profiling the homescreen app, you might start the profiler with: ./profile.sh start -p b2g -t compositor && ./profile.sh start -p homescreen having gotten a profile this way, the layer tree for a composite can be seen by clicking on a composite in the "frames" section of cleopatra (you may need to a sub-range of samples to make in
dividual composites large enough to be clicked).
about:memory
finally, at the end of this section are in
dividual measurements, as the following example shows.
tools/power/rapl
the package estimate is
divided into three parts: cores, gpu, and "other".
Profile Manager
an in
dividual profile can be linked to a specific installation of firefox, so that version of firefox will be launched when that profile is selected.
L20n
l20n lets localizers reach higher levels of free linguistic expression by sharpening the
divide between localization and application logic.
Midas
formatblock h1, h2, h3, h4, h5, h6, p,
div, address, blockquote (more?) the selection surrounded by the given block element.
Creating a Cookie Log
original document information author(s): mike connor last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Interval Timing
printervaltime interval functions interval timing functions are
divided into three groups: getting the current interval and ticks per second converting standard clock units to platform-dependent intervals converting platform-dependent intervals to standard clock units getting the current interval and ticks per second pr_intervalnow pr_tickspersecond converting standard clock units to platform-dependent intervals pr_secondstointerval pr_millisecon...
PR_Calloc
elsize the size of an in
dividual element.
HTTP delegation
for each in
dividual http request, nss will request the creation of a "http request object" (sec_httprequest_createfcn).
HTTP delegation
for each in
dividual http request, nss will request the creation of a "http request object" (sec_httprequest_createfcn).
NSS 3.19.2.4 release notes
security fixes in nss 3.19.2.4 the following security fixes from nss 3.21 have been backported to nss 3.19.2.4: bug 1185033 / cve-2016-1979 - use-after-free during processing of der encoded keys in nss bug 1209546 / cve-2016-1978 - use-after-free in nss during ssl connections in low memory bug 1190248 / cve-2016-1938 - errors in mp_
div and mp_exptmod cryptographic functions in nss compatibility nss 3.19.2.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.45 release notes
2a99f5bc1174b73cbb1d620884e01c34e51ccb3978da125f0e33268883bf4158 bugs fixed in nss 3.45 bug 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) bug 1515342 - more thorough input checking (cve-2019-11729) bug 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) bug 1227090 - fix a potential
divide-by-zero in makepfromqandseed from lib/freebl/pqg.c (static analysis) bug 1227096 - fix a potential
divide-by-zero in pqg_verifyparams from lib/freebl/pqg.c (static analysis) bug 1509432 - de-duplicate code between mp_set_long and mp_set_ulong bug 1515011 - fix a mistake with chacha20-poly1305 test code where tags could be faked.
PKCS11 FAQ
can this kind of
division lead to problems?
NSS functions
section headings are links to the in
dividual pages where you can edit them.
NSS tools : pk12util
id encryption algorithm: pkcs #12 v2 pbe with sha-1 and 3key triple des-cbc parameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services
division,o=thawte consulting,l=cape t own,st=western cape,c=za" alternatively, the -r prints the certificates and then exports them into separate der binary files.
sslerr.html
possible causes include: (a) both ssl2 and ssl3 are disabled, (b) all the in
dividual ssl cipher suites are disabled, or (c) the socket is configured to handshake as a server, but the certificate associated with that socket is inappropriate for the key exchange algorithm selected.
sslintro.html
configuration functions control the configuration of an in
dividual socket.
NSS Tools certutil
-s create an in
dividual certificate and add it to a certificate database.
NSS tools : pk12util
rameters: salt: 45:2e:6a:a0:03:4d:7b:a1:63:3c:15:ea:67:37:62:1f iteration count: 1 (0x1) certificate: data: version: 3 (0x2) serial number: 13 (0xd) signature algorithm: pkcs #1 sha-1 with rsa encryption issuer: "e=personal-freemail@thawte.com,cn=thawte personal freemail c a,ou=certification services
division,o=thawte consulting,l=cape t own,st=western cape,c=za" ....
Necko FAQ
todo original document information author(s): gagan saksena last updated date: december 21, 2001 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
The Necko HTTP module
original document information last updated date: may 12, 2003 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details ...
Necko Interfaces Overview
er implementations (as well as by mailnews and chatzilla) synchronous i/o methods: openinputstream, openoutputstream asynchronous i/o methods: asyncread, asyncwrite nsitransport::asyncread takes a nsistreamlistener parameter original document information author(s): darin fisher last updated date: december 10, 2001 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Multithreading in Necko
original document information author(s): darin fisher last updated date: december 10, 2001 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Proxies in Necko
original document information author(s): christian biesinger last updated date: april 8, 2005 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Rhino serialization
original document information author: norris boyd last updated date: november 15, 2006 copyright information: portions of this content are © 1998–2006 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Bytecode Descriptions
format: jof_ic mul,
div, mod stack: lval, rval ⇒ (lval op rval) the multiplicative operators (*, /, %).
Garbage collection
zones mainly serve as boundaries for gcs: the garbage collector collects at the level of a zone, not an in
dividual compartment.
JSAPI Cookbook
/* jsapi */ bool found; assert(y.isobject()); js::rootedobject yobj(cx, &y.toobject()); if (!js_hasproperty(cx, yobj, "myprop", &found)) return false; if (found) { // then do something } defining a constant property this is the first of three examples involving the built-in function object.defineproperty(), which gives javascript code fine-grained control over the behavior of in
dividual properties of any object.
JSAPI User Guide
you have two choices: 1.) compile and execute a script with a single call to js_evaluatescript, js_evaluateucscript or 2.) compile the script once with a call to js_compilescript or js_compileucscript, and then execute it repeatedly with in
dividual calls to js_executescript.
JS::CallArgs
the value may or may not be an object: it is the in
dividual function's responsibility to box the value if needed.
JSObjectOps.getProperty
each of these callbacks is responsible for everything involved with an in
dividual property access operation, including: any locking necessary for thread safety; security checks; finding the property, including walking the prototype chain if needed; calling the lower-level jsclass hooks; calling getters or setters; and actually getting, setting, or deleting the property once it is found.
JSPropertyOp
a jspropertyop may be installed on an in
dividual property as a getter or setter; or it may be installed on a jsclass to hook property gets, sets, or adds.
nsIJetpack
in
dividual lines of the form //@line 1 "foo.js" can be used to specify filename and line number information for debugging purposes.
nsIJumpListBuilder
lists are built in real-time during the sequence of build calls, make sure to check for errors on each in
dividual step.
Using nsILoginManager
o( hostname, formsubmiturl, httprealm, username, password, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ); this login would correspond to a html form such as: <form action="http://login.example.com/foo/authenticate.cgi"> <
div>please log in.</
div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> creating a site authentication login var authlogininfo = new nslogininfo( 'http://www.example.com', null, 'exampleco login', 'alice', 'secret321', "", "" ); this would correspond to a login on http://www.example.com when the server send...
nsIMemoryReporter
note: the amount field should be given a value 100 times the actual percentage; this number will be
divided by 100 when shown.
nsINavHistoryObserver
if your code only cares about whole entries being deleted instead of in
dividual visits, you can simply act only when awholeentry is true.
nsIPropertyElement
xpcom/ds/nsipersistentproperties2.idlscriptable this interface provides access to in
dividual entries within a stringbundle.
nsISHistory
to access in
dividual history entries of the enumerator, perform the following steps: call getshistoryenumerator() to obtain handle the nsisimpleenumerator object.
nsISupports proxies
ns_release(ptestobj); pproxy->bar(); ns_release(pproxy); original document information author: doug turner last updated date: january 27, 2007 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Using nsCOMPtr
portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Using nsIClassInfo
original document information authors: mike shaver, justin lebar last updated date: july 25, 2011 copyright information: portions of this content are © 1998–2011 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Using nsIDirectoryService
related pages code_snippets:file_i/o original document information authors: conrad carlen, doug turner last updated date: september 26, 2000 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Weak reference
see also the source xpcom/base/nsiweakreference.idl xpcom/glue/nsweakreference.h xpcom/glue/nsweakreference.cpp xpcom ownership guidelines using nscomptr original document information author: scott collins last updated date: september 23, 2000 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
XPCOM tasks
original document information author(s): unknown last updated date: may 8, 2003 copyright information: portions of this content are © 1998–2007 by in
dividual mozilla.org contributors; content available under a creative commons license | details.
Edit fonts - Firefox Developer Tools
you can adjust the axes in
dividually or, if the font designer has included defined instances, you can select one from the "instance" drop-down list and view the updates live on your page.
Examine and edit the box model - Firefox Developer Tools
viewing the box model with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each in
dividual line box that together make up the element: the box model view when an element's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the bo...
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <
div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </
div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#sele...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <
div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </
div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100...
Work with animations - Firefox Developer Tools
right-click in the box and select "inspect element" make sure the selected element is the <
div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized timeline for every animation applied to the selected element or its children.
Paint Flashing Tool - Firefox Developer Tools
<body> <
div id="container"> <
div class="moving-box" id="moving-box-left-margin">transition using margin-left</
div> <
div class="moving-box" id="moving-box-transform">transition using transform</
div> </
div> </body> #container { border: 1px solid; } .moving-box { height: 20%; width:20%; margin: 2%; padding: 2%; background-color: blue; color: white; font-size: 24px; } #moving...
Waterfall - Firefox Developer Tools
it's based on the idea that the things a browser does when running a site can be
divided into various types - running javascript, updating layout, and so on - and that at any given point in time, the browser is doing one of those things.
Shader Editor - Firefox Developer Tools
you'll now see a window
divided into three panes: a list of all the glsl programs on the left, the vertex shader for the currently selected program in the middle, and the fragment shader for the currently selected program on the right: managing programs the left hand pane lists all programs currently in use by a webgl context.
Style Editor - Firefox Developer Tools
the toolbox will appear at the bottom of the browser window, with the style editor activated: the style editor is
divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar.
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 specifica...
Animation.startTime - Web APIs
*/ function addcat(){ var newcat = document.createelement("
div"); newcat.classlist.add("cat"); return newcat; } /* this is the function that adds a cat to the waapi column */ function animatenewcatwithwaapi() { // make a new cat var newcat = addcat(); // animate said cat with the waapi's "animate" function var newanimationplayer = newcat.animate(keyframes, timing); // set the animation's start time to be the same as the original .cat#withwaa...
Attr.prefix - Web APIs
<
div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
AudioTrack - Web APIs
usage notes to get an audiotrack for a given media element, use the element's audiotracks property, which returns an audiotracklist object from which you can get the in
dividual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.audiotracks; you can then access the media's in
dividual tracks using either array syntax or functions such as foreach().
BaseAudioContext.createChannelSplitter() - Web APIs
the createchannelsplitter() method of the baseaudiocontext interface is used to create a channelsplitternode, which is used to access the in
dividual channels of an audio stream and process them separately.
BaseAudioContext.createDynamicsCompressor() - Web APIs
it is especially important in games and musical applications where large numbers of in
dividual sounds are played simultaneously, where you want to control the overall signal level and help avoid clipping (distorting) of the audio output.
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <
div> <button class="mute">mute button</button> </
div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success ca...
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 definiti...
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
example html content <
div id="level">(battery level unknown)</
div> <
div id="chargingtime">(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 ...
BatteryManager.onchargingtimechange - Web APIs
example html content <
div id="level">(battery level unknown)</
div> <
div id="chargingtime">(charging time 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 s...
BatteryManager.ondischargingtimechange - Web APIs
example html content <
div id="level">(battery level unknown)</
div> <
div id="chargingtime">(charging time unknown)</
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 ...
BatteryManager.onlevelchange - Web APIs
example html <
div id="level">(battery level unknown)</
div> <
div id="statebaterry">(charging state unknown)</
div> javascript navigator.getbattery().then(function(battery) { battery.onlevelchange = function(){ document.queryselector('#level').textcontent = battery.level; if(battery.charging) { document.queryselector('#statebaterry').textcontent = "charging time: " + (battery.chargingtime / 60); } else { document.queryse...
CSSKeywordValue.CSSKeywordValue() - Web APIs
#myelement { 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 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 sp...
CSSKeywordValue - Web APIs
#myelement { 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 ty...
CSSMathSum - Web APIs
<
div>has width</
div> we assign a width
div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('
div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // c...
CSSMathValue.operator - Web APIs
<
div>my width has a <code>calc()</code> function</
div> we assign a width with a calculation
div { width: calc(50% - 0.5vw); } we add the javascript const stylemap = document.queryselector('
div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').values ); // cssnumeri...
CSSMathValue - Web APIs
<
div>has width</
div> we assign a width with a calculation
div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('
div').computedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').value...
CSSPositionValue - Web APIs
examples the following example positions a container <
div> 5 pixels from the top and 10 pixels from the left of the page.
CSSPrimitiveValue.getRectValue() - Web APIs
example var cs = window.getcomputedstyle(document.getelementbyid("clipped
div")); 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.
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 my
div = document.getelementbyid('
div1'); var
divstyle = my
div.style; var len =
divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
CSSStyleDeclaration - Web APIs
a cssstyledeclaration object can be exposed using three different apis: via htmlelement.style, which deals with the inline styles of a single element (e.g., <
div style="...">).
CSSStyleSheet.cssRules - Web APIs
examples in
dividual rules within the stylesheet can then be accessed by index: let rulelist = document.stylesheets[0].cssrules; for (let i=0; i < rulelist.length; i++) { processrule(rulelist[i]); } rules can also be accessed using for...of: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { processrule(rule); } however, because cssrule is not a proper array, you can't use ...
CSSStyleSheet - Web APIs
this is normally used to access in
dividual rules like this: stylesheet.cssrules[i] // where i = 0..cssrules.length-1 to add or remove items in cssrules, use the cssstylesheet's insertrule() and deleterule() methods.
CSSUnitValue.unit - Web APIs
examples the following creates a csspositionvalue from in
dividual cssunitvalue constructors, then queries the cssunitvalue.unit.
CSSUnitValue.value - Web APIs
examples the following creates a csspositionvalue from in
dividual cssunitvalue constructors, then queries the cssunitvalue.value.
CSSUnitValue - Web APIs
examples the following shows a method of creating a csspositionvalue from in
dividual cssunitvalue constructors.
CanvasPattern.setTransform() - Web APIs
support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(mat...
CanvasRenderingContext2D.addHitRegion() - Web APIs
(if you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi,...
CanvasRenderingContext2D.arcTo() - Web APIs
html <
div> <label for="radius">radius: </label> <input name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-output">50</label> </
div> <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.getelementbyid('radius-output'); const control = document.ge...
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <
div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </
div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> <
div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/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...
CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyi...
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset ...
A basic ray-caster - Web APIs
=) the ray-caster the nice people here have manually copied my files up so you can take a look, and for your hacking enjoyment i've posted the in
dividual file contents as code listings (see below).
Compositing example - Web APIs
dark parts on the base layer become darker, and light parts become lighter.', 'retains the darkest pixels of both layers.', 'retains the lightest pixels of both layers.', '
divides the bottom layer by the inverted top layer.', '
divides the inverted bottom layer by the top layer, and then inverts the result.', 'a combination of multiply and screen like overlay, but with top and bottom layer swapped.', 'a softer version of hard-light.
Drawing text - Web APIs
a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <
div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </
div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelemen...
Canvas API - Web APIs
html5 canvas deep
dive a hands-on, book-length introduction to the canvas api and webgl.
ChildNode.remove() - Web APIs
syntax node.remove(); example using remove() <
div id="
div-01">here is
div-01</
div> <
div id="
div-02">here is
div-02</
div> <
div id="
div-03">here is
div-03</
div> var el = document.getelementbyid('
div-02'); el.remove(); // removes the
div with the '
div-02' id childnode.remove() is unscopable the remove() method is not scoped into the with statement.
ChildNode.replaceWith() - Web APIs
examples using replacewith() var parent = document.createelement("
div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.replacewith(span); console.log(parent.outerhtml); // "<
div><span></span></
div>" childnode.replacewith() is unscopable the replacewith() method is not scoped into the with statement.
ContentIndex.getAll() - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('
div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelemen...
ContentIndex - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('
div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelemen...
Content Index API - Web APIs
async function createreadinglist() { // access our service worker registration const registration = await navigator.serviceworker.ready; // get our index entries const entries = await registration.index.getall(); // create a containing element const readinglistelem = document.createelement('
div'); // test for entries if (!array.length) { // if there are no entries, display a message const message = document.createelement('p'); message.innertext = 'you currently have no articles saved for offline reading.' readinglistelem.append(message); } else { // if entries are present, display in a list of links to the content const listelem = document.createelemen...
ConvolverNode.normalize - Web APIs
its default value is true in order to achieve a more uniform output level from the convolver, when loaded with
diverse impulse responses.
DataTransfer.clearData() - Web APIs
</span> <span class="tweaked" id="target">drop zone</span> <
div>status: <span id="status">drag to start</span></
div> <
div>data is: <span id="data">uninitialized</span></
div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var drag...
DataTransfer.getData() - Web APIs
html content <
div id="
div1" ondrop="drop(event)" ondragover="allowdrop(event)"> <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span> </
div> <
div id="
div2" ondrop="drop(event)" ondragover="allowdrop(event)"></
div> css content #
div1, #
div2 { width:100px; height:50px; padding:10px; border:1px solid #aaaaaa; } javascript content function allowdrop(allowdr...
DataTransferItemList.DataTransferItem() - Web APIs
drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <
div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css
div { margin: 0em; padding: 2em; } #source { color: blue; ...
DataTransferItemList.add() - Web APIs
html <
div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css
div { margin: 0em; padding: 2em; } #source { color: blue; borde...
DataTransferItemList.clear() - Web APIs
html <
div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css
div { margin: 0em; padding: 2em; } #source { ...
DataTransferItemList.length - Web APIs
drop: uri = " + s); }); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; // clear any remaining drag data datalist.clear(); } html <
div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css
div { margin: 0em; padding: 2em; } #source { color: blue; ...
DataTransferItemList.remove() - Web APIs
ault(); // 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(); } html <h1>example uses of <code>datatransferitemlist</code> methods and property</h1> <
div> <p id="source" ondragstart="dragstart_handler(event);" ondragend="dragend_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> css
div { margin: 0em; padding: 2em; } #source { ...
Detecting device orientation - Web APIs
so let's imagine a ball in a garden: <
div class="garden"> <
div class="ball"></
div> </
div> <pre class="output"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; ...
Document: DOMContentLoaded event - Web APIs
function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <
div class="controls"> <button id="reload" type="button">reload</button> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </
div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event...
Document.cookie - Web APIs
each browser's implementation maximum will necessarily be different, so consult in
dividual browser documentation.
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: drag event - Web APIs
html <
div class="dropzone"> <
div id="draggable" draggable="true" ondragstart="event.datatransfer.setdata('text/plain',null)"> this
div is draggable </
div> </
div> <
div class="dropzone"></
div> <
div class="dropzone"></
div> <
div class="dropzone"></
div> css #draggable { width: 200px; height: 20px; text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blue...
Document: fullscreenerror event - Web APIs
examples const requestor = document.queryselector('
div'); document.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Document.getBoxObjectFor() - Web APIs
example var my
div = document.getelementbyid("my
div"), boxobj = document.getboxobjectfor (my
div); alert ( "x:" + boxobj.x + ", y:" + boxobj.y + ", width:" + boxobj.width + ", height:" + boxobj.height ); notes specified in nsixuldocument.idl ...
Document.queryCommandState() - Web APIs
example html <
div contenteditable="true">select a part of this text!</
div> <button onclick="makebold();">test the state of the 'bold' command</button> javascript function makebold() { var state = document.querycommandstate("bold"); switch (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: a...
Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <
div class="controls"> <button id="reload" type="button">reload</button> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </
div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } ...
DocumentFragment.querySelector() - Web APIs
to match id or selectors that do not follow the css syntax (by using semicolon or space inappropriately for example), it's mandatory to escape the wrong character with a 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 selector...
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.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
example html <
div> <p>some text</p> </
div> <p>elements at point 30, 20:</p> <
div id="output"></
div> javascript let output = document.getelementbyid("output"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { output.textcontent += elements[i].localname; if (i < elements.length - 1) { output.textcontent += " < "; ...
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
examples html content <
div> <p>some text</p> </
div> <p>top node at point 30, 20:</p> <
div id="output"></
div> javascript content var output = document.getelementbyid("output"); if (document.nodefrompoint) { var node = document.nodefrompoint(30, 20); output.textcontent += node.localname; } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.nodefrompoint()</co...
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
example html content <
div> <p>some text</p> </
div> <p>nodes at point 30, 20:</p> <
div id="output"></
div> javascript content var output = document.getelementbyid("output"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.length - 1) { output.textcontent += " < "; } } } els...
Using the W3C DOM Level 1 Core - Web APIs
david baron <dbaron at dbaron dot org> copyright information: © 1998-2005 by in
dividual mozilla.org contributors; content available under a creative commons license ...
Element.attachShadow() - Web APIs
the following is a list of elements you can attach a shadow root to: any autonomous custom element with a valid name <article> <aside> <blockquote> <body> <
div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields: mode a string specifying the encapsulation mode for the shadow dom tree.
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <
div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </
div> css bod...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <
div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </
div> css bod...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <
div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> <button class="clear-log">clear</button> </
div> css bod...
Element: copy event - Web APIs
examples live example html <
div class="source" contenteditable="true">try copying text from this box...</
div> <
div class="target" contenteditable="true">...and pasting it into this one</
div> css
div.source,
div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('
div.source'); source.addeventlistener('copy...
Element: cut event - Web APIs
examples live example html <
div class="source" contenteditable="true">try cutting text from this box...</
div> <
div class="target" contenteditable="true">...and pasting it into this one</
div> css
div.source,
div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('
div.source'); source.addeventlistener('cut'...
Element: error event - Web APIs
examples live example html <
div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </
div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: c...
Element: fullscreenerror event - Web APIs
examples const requestor = document.queryselector('
div'); requestor.addeventlistener('fullscreenerror', (event) => { console.error('an error occurred changing into fullscreen'); console.log(event); }); requestor.requestfullscreen(); specifications specification status fullscreen api living standard ...
Element.getAttribute() - Web APIs
examples const
div1 = document.getelementbyid('
div1'); const align =
div1.getattribute('align'); alert(align); // shows the value of align for the element with id="
div1" description lower casing when called on an html element in a dom flagged as an html document, getattribute() lower-cases its argument before proceeding.
Element.getAttributeNode() - Web APIs
example // html: <
div id="top" /> let t = document.getelementbyid("top"); let idattr = t.getattributenode("id"); alert(idattr.value == "top") notes when called on an html element in a dom flagged as an html document, getattributenode lower-cases its argument before proceeding.
Element.getAttributeNodeNS() - Web APIs
== example == tbd the example needs to be fixed pre> // html: <
div id="top" /> t = document.getelementbyid("top"); specialnode = t.getattributenodens( "http://www.mozilla.org/ns/specialspace", "id"); // inode.value = "full-top" </pre notes getattributenodens is more specific than getattributenode in that it allows you to specify attributes that are part of a particular namespace.
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d = document.getelementbyid("
div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "center"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for ...
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.insertAdjacentHTML() - Web APIs
example // <
div id="one">one</
div> var d1 = document.getelementbyid('one'); d1.insertadjacenthtml('afterend', '<
div id="two">two</
div>'); // at this point, the new structure is: // <
div id="one">one</
div><
div id="two">two</
div> notes security considerations when inserting html into a page by using insertadjacenthtml(), be careful not to use user input that hasn't been escaped.
Element: keypress event - Web APIs
<
div> <label for="sample">focus the input and type something:</label> <input type="text" name="text" id="sample"> </
div> <p id="log"></p> const log = document.getelementbyid('log'); const input = document.queryselector('input'); input.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent input.onkeypress = logkey; specificatio...
Element: mouseout event - Web APIs
when you try this out, you'll find that mouseout is delivered to the in
dividual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>.
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <
div id="wrapper"> <
div id="child"></
div> </
div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid...
Element: paste event - Web APIs
examples live example html <
div class="source" contenteditable="true">try copying text from this box...</
div> <
div class="target" contenteditable="true">...and pasting it into this one</
div> css
div.source,
div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const target = document.queryselector('
div.target'); target.addeventlistener('past...
Element.prefix - Web APIs
<x:
div onclick="console.log(this.prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
Element.removeAttribute() - Web APIs
r nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) 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
example // given: // <
div id="
div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.getelementbyid("
div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <
div id="
div1" width="200px" /> notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 metho...
Element.removeAttributeNode() - Web APIs
example // given: <
div id="top" align="center" /> var d = document.getelementbyid("top"); var d_align = d.getattributenode("align"); d.removeattributenode(d_align); // align is now removed: <
div id="top" /> notes if the removed attribute has a default value, it is immediately replaced.
Element.scrollLeft - Web APIs
example html <
div id="container"> <
div id="content">click the button to slide right!</
div> </
div> <button id="slide" type="button">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...
Element.setAttributeNode() - Web APIs
html <
div id="one" align="left">one</
div> <
div id="two">two</
div> javascript let d1 = document.getelementbyid('one'); let d2 = document.getelementbyid('two'); let a = d1.getattributenode('align'); d2.setattributenode(a.clonenode(true)); // returns: 'left' alert(d2.attributes[1].value); notes if the attribute named already exists on the element, that attribute is replaced with the new one and the replaced one is returned.
Element.setAttributeNodeNS() - Web APIs
example // <
div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</
div> // <
div id="two">two</
div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.getelementbyid("one"); var d2 = document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced w...
Element.setCapture() - Web APIs
arget.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <
div id="output">no events yet</
div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
Element.shadowRoot - Web APIs
from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { const shadow = elem.shadowroot; const childnodes = 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: show event - Web APIs
bubbles no cancelable no interface event event handler property onshow examples <
div contextmenu="test"></
div> <menu type="context" id="test"> <menuitem label="alert" onclick="alert('the alert label has been clicked')" /> </menu> <script> document.getelementbyid("test").addeventlistener("show", function(e){ alert("the context menu will be displayed"); }, false); </script> specifications specification status html5the definition of 'show event' in that specification.
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <
div id="wrapper"> <
div id="child"></
div> </
div> <br/> <label><input type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelemen...
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 my
div.dispatchevent(evt); specifications specification status comment domthe definition of 'event()' in that specification.
Event - Web APIs
event-handlers are usually connected (or "attached") to various html elements (such as <button>, <
div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes.
FeaturePolicy.allowedFeatures() - Web APIs
the allowedfeatures() method of the featurepolicy interface returns a list of directive names of all features allowed by the feature policy.enables introspection of in
dividual directives of the feature policy it is run on.
FileReader: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onabort examples live example html <
div class="example"> <
div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </
div> <img src="" class="preview" height="200" alt="image preview..."> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css img.preview { margin: 1rem 0; } .event-...
FileReader: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onload examples live example html <
div class="example"> <
div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </
div> <img src="" class="preview" height="200" alt="image preview..."> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; bor...
FileReader: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadend examples live example html <
div class="example"> <
div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </
div> <img src="" class="preview" height="200" alt="image preview..."> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; ...
FileReader: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <
div class="example"> <
div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </
div> <img src="" class="preview" height="200" alt="image preview..."> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5re...
FileReader: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <
div class="example"> <
div class="file-select"> <label for="avatar">choose a profile picture:</label> <input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </
div> <img src="" class="preview" height="200" alt="image preview..."> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: ...
FileReader.readAsDataURL() - Web APIs
ocument.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <input id="browse" type="file" onchange="previewfiles()" multiple> <
div id="preview"></
div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load...
FormData() - Web APIs
example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you could add a key/value pair to this using formdata.append: formdata.append('username', 'chris'); or you can specify the optional form argument when creating the formdata object, to prepopulate it with values from the specified form: <form id="myform" name="myform"> <
div> <label for="username">enter name:</label> <input type="text" id="username" name="username"> </
div> <
div> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </
div> <
div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </
div> <input type="submit" value="submit!"> </form>...
Using FormData Objects - Web APIs
>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <input type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stash:</label> <input type="file" name="file" required /> <input type="submit" value="stash the file!" /> </form> <
div></
div> then you can send it using code like the following: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("
div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function...
GainNode.gain - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <
div> <button class="mute">mute button</button> </
div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success ca...
GainNode - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <
div> <button class="mute">mute button</button> </
div> var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success ca...
Gamepad - Web APIs
the gamepad interface of the gamepad api defines an in
dividual gamepad or other controller, allowing access to information such as button presses, axis positions, and id.
GamepadButton - Web APIs
the gamepadbutton interface defines an in
dividual button of a gamepad or other controller, allowing access to the current state of different types of buttons available on the control device.
GlobalEventHandlers.onanimationcancel - Web APIs
example html <
div class="main"> <
div id="box" onanimationcancel="handlecancelevent(event);"> <
div id="text">box</
div> </
div> </
div> <
div class="button" id="togglebox"> hide the box </
div> <pre id="log"></pre> css :root { --boxwidth: 50px; } .main { width: 300px; height: 300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16...
GlobalEventHandlers.onanimationend - Web APIs
example html content <
div class="main"> <
div id="box"> <
div id="text">box</
div> </
div> </
div> <
div class="button" id="play"> play animation </
div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0;...
GlobalEventHandlers.onanimationiteration - Web APIs
html <
div class="main"> <
div id="box"> <
div id="text">box</
div> </
div> </
div> <
div class="button" id="play"> begin demonstration </
div> css :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0; padding-top: 2px; pa...
GlobalEventHandlers.onanimationstart - Web APIs
example html content <
div class="main"> <
div id="box"> <
div id="text">box</
div> </
div> </
div> <
div class="button" id="play"> play animation </
div> <pre id="log"></pre> css content :root { --boxwidth:50px; } .main { width: 300px; height:300px; border: 1px solid black; } .button { cursor: pointer; width: 300px; border: 1px solid black; font-size: 16px; text-align: center; margin-top: 0;...
GlobalEventHandlers.onclick - Web APIs
html <
div id="demo">click here</
div> javascript document.getelementbyid('demo').onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; } result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
GlobalEventHandlers.oncontextmenu - Web APIs
html <
div class="shape">spinning</
div> <p class="note" hidden>click to unpause.</p> css @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } .shape { width: 8em; height: 8em; display: flex; align-items: center; justify-content: center; animation: spin 18s linear infinite; background: lightsalmon; border-radius: 42%; margin: 1em; } .paused...
GlobalEventHandlers.onmousedown - Web APIs
html <
div class="container"> <
div class="view" hidden></
div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </
div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.rem...
GlobalEventHandlers.onmousemove - Web APIs
html <p><a href="#" data-tooltip="first link">see a tooltip here …</a></p> <p><a href="#" data-tooltip="second link">… or here!</a></p> css .tooltip { position: absolute; z-index: 9999; padding: 6px; background: #ffd; border: 1px #886 solid; border-radius: 5px; } javascript const tooltip = new (function() { const node = document.createelement('
div'); node.classname = 'tooltip'; node.setattribute('hidden', ''); document.body.appendchild(node); this.follow = function(event) { node.style.left = event.clientx + 20 + 'px'; node.style.top = event.clienty + 10 + 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { ...
GlobalEventHandlers.onmouseup - Web APIs
html <
div class="container"> <
div class="toaster"></
div> <
div class="toast">hello world!</
div> </
div> css .container { position: absolute; left: 50%; bottom: 20px; transform: translate(-50%); } .toaster { width: 160px; height: 110px; background: #bbb; border-radius: 10px 10px 0 0; } .toast { position: absolute; left: 50%; top: 50%; z-index: -1; width: 100px; height: 50px...
HTMLAnchorElement.referrerPolicy - Web APIs
examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var
div = document.getelementbyid("
divaround");
div.appendchild(elt); // when clicked, the link will not send a referrer header.
HTMLCollection.item - Web APIs
note: because the contents of an htmlcollection are live, changes to the underlying dom can and will cause the position of in
dividual nodes in the collection to change, so the index value will not necessarily remain constant for a given node.
HTMLDetailsElement: toggle event - Web APIs
html <aside id="log"> <b>open chapters:</b> <
div data-id="ch1" hidden>i</
div> <
div data-id="ch2" hidden>ii</
div> <
div data-id="ch3" hidden>iii</
div> </aside> <section id="summaries"> <b>chapter summaries:</b> <details id="ch1"> <summary>chapter i</summary> philosophy reproves boethius for the foolishness of his complaints against fortune.
HTMLDialogElement: cancel event - Web APIs
bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <
div class="result"></
div> css button,
div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dia...
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <
div class="result"></
div> css button,
div { margin: .5rem; } js const result = document.queryselector('.result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialo...
HTMLDialogElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmldialogelement" target="_top"><rect x="1" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="86" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldialogelement</text></a></svg></
div>...
HTMLElement: animationcancel event - Web APIs
animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example html <
div class="animation-example"> <
div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </
div> <button class="activate" type="button">activate animation</button> <
div class="event-log"></
div> </
div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2r...
HTMLElement: animationend event - Web APIs
ed and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example html <
div class="animation-example"> <
div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </
div> <button class="activate" type="button">activate animation</button> <
div class="event-log"></
div> </
div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem...
HTMLElement: animationiteration event - Web APIs
ion', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live example html <
div class="animation-example"> <
div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </
div> <button class="activate" type="button">activate animation</button> <
div class="event-log"></
div> </
div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2r...
HTMLElement: animationstart event - Web APIs
animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example html <
div class="animation-example"> <
div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </
div> <button class="activate" type="button">activate animation</button> <
div class="event-log"></
div> </
div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2r...
HTMLElement: change event - Web APIs
examples <select> element html <label>choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <
div class="result"></
div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; });...
HTMLElement.lang - Web APIs
note that this attribute, though valid at the in
dividual element level described here, is most often specified for the root element of the document.
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: transitioncancel event - Web APIs
'.transition'); transition.addeventlistener('transitioncancel', () => { console.log('transition canceled'); }); the same, but using the ontransitioncancel property instead of addeventlistener(): const transition = document.queryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <
div> element, styled with a transition that includes a delay: <
div class="transition"></
div> <
div class="message"></
div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add so...
HTMLElement: transitionend event - Web APIs
nend event: const transition = document.queryselector('.transition'); transition.addeventlistener('transitionend', () => { console.log('transition ended'); }); the same, but using the ontransitionend: const transition = document.queryselector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <
div> element, styled with a transition that includes a delay: <
div class="transition">hover over me</
div> <
div class="message"></
div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this,...
HTMLElement: transitionrun event - Web APIs
itionrun', () => { console.log('transition is running but hasn\'t necessarily started transitioning yet'); }); the same, but using the ontransitionrun property instead of addeventlistener(): el.ontransitionrun = () => { console.log('transition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <
div> element, styled with a transition that includes a delay: <
div class="transition">hover over me</
div> <
div class="message"></
div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this...
HTMLElement: transitionstart event - Web APIs
tionstart examples this code adds a listener to the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <
div> element, styled with a transition that includes a delay: <
div class="transition">hover over me</
div> <
div class="message"></
div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this...
HTMLImageElement.loading - Web APIs
function addimagetolist(url) { 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 ...
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.srcset - Web APIs
<
div class="box"> <img src="/files/16797/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 1x, /files/16797/clock-demo-400px.png 2x"> </
div> css the css simply specifies that the image and its surrounding box should be 200 pixels square and should have a simple border around it.
HTMLInputElement.stepDown() - Web APIs
example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is
divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="decrementer" min="-2" max="15"> </label> </p> <input type="button" value="decrement" id="thebutton"> javascript /* make the button call the function */ let button = docu...
HTMLInputElement.stepUp() - Web APIs
example click the button in this example to increment the number input type: html <p> <label>enter a number between 0 and 400 that is
divisible by 5: <input type="number" step="5" id="thenumber" min="0" max="400"> </label> </p> <p> <label>enter how many values of step you would like to increment by or leave it blank: <input type="number" step="1" id="incrementer" min="0" max="25"> </label> </p> <input type="button" value="increment" id="thebutton"> javascript /* make the button call the function */ let button = docum...
HTMLMediaElement: loadstart event - Web APIs
bubbles no cancelable no interface event event handler property onloadstart examples live example html <
div class="example"> <button type="button">load video</button> <video controls width="250"></video> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } v...
HTMLMediaElement: progress event - Web APIs
bubbles no cancelable no interface event event handler property onprogress examples live example html <
div class="example"> <button type="button">load video</button> <video controls width="250"></video> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </
div> </
div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video ...
HTMLElement.focus() - Web APIs
ybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="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.
HTMLTableElement.cellSpacing - Web APIs
while you should instead use the css border-spacing property, the obsolete htmltableelement interface's cellspacing property represents the spacing around the in
dividual <th> and <td> elements representing a table's cells.
HTMLTableElement.rows - Web APIs
example myrows = mytable.rows; firstrow = mytable.rows[0]; lastrow = mytable.rows.item(mytable.rows.length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.item() method (line 3) to obtain in
dividual rows in the table.
Dragging and Dropping Multiple Items - Web APIs
types.length; t++) { output(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); output("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { output("<<error>>\n"); dump(ex); } } } } function output(text) { document.getelementbyid("output").textcontent += text; dump(text); } </script> </head> <body> <
div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <
div> fix</
div> </
div> </body> </html> this ex...
HTML Drag and Drop API - Web APIs
ault(); ev.datatransfer.dropeffect = "move" } function drop_handler(ev) { ev.preventdefault(); // get the id of the target and add the moved element to the target's dom const data = ev.datatransfer.getdata("application/my-app"); ev.target.appendchild(document.getelementbyid(data)); } </script> <p id="p1" draggable="true" ondragstart="dragstart_handler(event)">this element is draggable.</p> <
div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">drop zone</
div> for more information, see: performing a drop drag end at the end of a drag operation, the dragend event fires at the source element — the element that was the target of the drag start.
ImageData() - Web APIs
the imagedata constructor specifies a width of 200 for the new object, so its height defaults to 10,000
divided by 200, which is 50.
KeyboardEvent.code - Web APIs
examples exercising keyboardevent html <p>press keys on the keyboard to see what the keyboardevent's key and code values are for each one.</p> <
div id="output"> </
div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.innerhtml = str + "<br/>"; document.getelementbyid("output").appendchild(el);...
KeyframeEffect.getKeyframes() - Web APIs
examples in the red queen race example, we can inspect alice and the redqueen's animation to see its in
dividual 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.target - Web APIs
examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: 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.
LocalMediaStream - Web APIs
however, control over playback of media has been moved to the in
dividual mediastreamtrack objects, so this is no longer necessary.
MediaDevices.ondevicechange - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <
div id="startbutton" class="button"> start </
div> <video id="video" width="160" height="120" autoplay></video><br> <
div class="left"> <h2>audio devices:</h2> <ul class="devicelist" id="audiolist"></ul> </
div> <
div class="right"> <h2>video devices:</h2> <ul class="devicelist" id="videolist"></ul> </
div> <
div id="log"></
div> css content body { font: 14px "open sans", "arial", sans-serif...
MediaElementAudioSourceNode - Web APIs
when the mouse pointer is moved, the updatepage() function is invoked, which calculates the current gain as a ratio of mouse y position
divided by overall window height.
MediaKeyMessageEvent() - Web APIs
syntax var mediakeymessageevent = new mediakeymessageevent(typearg, options) parameters typearg a domstring containing one of may be one of license-request, license-renewal, license-renewal, or in
dividualization-request.
MediaTrackConstraints.displaySurface - Web APIs
later code can use this flag to determine whether or not to perform special processing, such as to remove or replace the backdrop, or to "cut" the in
dividual display areas out of the received frames of video.
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 c...
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 capt...
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 ...
MediaTrackSupportedConstraints.echoCancellation - 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().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media ...
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 stream...
MediaTrackSupportedConstraints.frameRate - Web APIs
javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <
div id="result"> </
div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your browser supports the framerate constraint, is: while this example is trivial, you can replace the simple output of "supported" vs.
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 a...
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 an...
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 a...
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 captur...
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 captur...
MediaTrackSupportedConstraints.volume - 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().volume) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result ...
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...
MouseEvent.initMouseEvent() - Web APIs
example html <
div style="background:red; width:180px; padding:10px;"> <
div id="out"></
div> <input type="text"> </
div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, ...
MouseEvent.relatedTarget - Web APIs
html <body id="body"> <
div id="outer"> <
div id="red"></
div> <
div id="blue"></
div> </
div> <p id="log"></p> </body> css #outer { width: 250px; height: 125px; display: flex; } #red { flex-grow: 1; background: red; } #blue { flex-grow: 1; background: blue; } #log { max-height: 120px; overflow-y: scroll; } javascript const mouseoutlog = document.getelementbyid('log'), red = document.ge...
Navigator - Web APIs
this value is an approximation given by rounding to the nearest power of 2 and
dividing that number by 1024.
Online and offline events - Web APIs
nestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <
div id="status"></
div> <
div id="log"></
div> <p>this is a test</p> here's the live result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using service workers and responses from xmlhttprequest.
NavigatorPlugins.plugins - Web APIs
the returned value is not a javascript array, but has the length property and supports accessing in
dividual items using bracket notation (plugins[2]), as well as via item(index) and nameditem("name") methods.
Node.nodeType - Web APIs
constants node type constants constant value description node.element_node 1 an element node like <p> or <
div>.
Node.normalize() - Web APIs
syntax element.normalize(); example let wrapper = document.createelement("
div"); wrapper.appendchild( document.createtextnode("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 t...
Node.prefix - Web APIs
<x:
div onclick="console.log(this.prefix)"/> notes this will only work when a namespace-aware parser is used, i.e.
NodeList.entries() - Web APIs
example var node = document.createelement("
div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); } results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...
NodeList.prototype.forEach() - Web APIs
example let node = document.createelement("
div"); let kid1 = document.createelement("p"); let kid2 = document.createtextnode("hey"); let kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above cod...
NodeList.keys() - Web APIs
example var node = document.createelement("
div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var key of list.keys()) { console.log(key); } the result is: 0 1 2 ...
NodeList.values() - Web APIs
example var node = document.createelement("
div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var value of list.values()) { console.log(value); } the result is: <p> #text "hey" <span> ...
NodeList - Web APIs
for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(document.createelement('
div')); console.log(child_nodes.length); // outputs "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
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.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.compareNode() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname("
div").item(0)); returnvalue = range.comparenode(document.getelementsbytagname("p").item(0)); notes this method is obsolete; you should use the w3c dom range.compareboundarypoints() method.
Range.comparePoint() - Web APIs
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.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 ...
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.extractContents() - Web APIs
syntax documentfragment = range.extractcontents(); example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("
div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers.
Range.getBoundingClientRect() - Web APIs
syntax boundingrect = range.getboundingclientrect() example html <
div id="highlight"></
div> <p>this example positions a "highlight" rectangle behind the contents of a range.
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
example range = document.createrange(); referencenode = document.getelementsbytagname("
div")[0]; range.selectnodecontents(referencenode); live sample this example lets the user select and deselect a paragraph with buttons.
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.
ReadableStream.getReader() - Web APIs
undefined (or not specified at all — this is the default), which results in a readablestreamdefaultreader being created that can read in
dividual chunks from a stream.
ResizeObserver() - Web APIs
boxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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.observe() - Web APIs
boxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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); 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
boxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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); 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.
ResizeObserverEntry.borderBoxSize - Web APIs
100, (entry.borderboxsize[0].inlinesize/10) + (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
min(100, (entry.contentboxsize.inlinesize/10) + (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
boxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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
min(100, (entry.contentboxsize.inlinesize/10) + (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
boxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.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.
SVGAltGlyphDefElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphdefelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphdefelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;...
SVGAltGlyphItemElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgaltglyphitemelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgaltglyphitemelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: ...
SVGAnimateColorElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svganimatecolorelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatecolorelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events:...
SVGGlyphRefElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
SVGMeshElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;}...
SVGRenderingIntent - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></
div> a:hover...
SVGSolidcolorElement - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></
div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGURIReference - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></
div> a:hover text { fill: #0095dd; poin...
SVGUnitTypes - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></
div> ...
SVGZoomAndPan - Web APIs
<
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgzoomandpan" target="_top"><rect x="1" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgzoomandpan</text></a></svg></
div...
ShadowRoot - Web APIs
from here we use standard dom traversal techniques to find the <style> element inside the shadow dom and then update the css found inside it: function updatestyle(elem) { var shadow = elem.shadowroot; var childnodes = shadow.childnodes; 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.
SpeechGrammarList.item() - Web APIs
the item getter of the speechgrammarlist interface is a standard getter — it allows in
dividual speechgrammar objects to be retrieved from the speechgrammarlist using array syntax.
SpeechGrammarList - Web APIs
methods speechgrammarlist.item() standard getter — allows in
dividual speechgrammar objects to be retrieved from the speechgrammarlist using array syntax.
USBEndpoint - Web APIs
usbendpoint.packetsize returns the size of the packets that data sent through this endpoint will be
divided into.
ValidityState.stepMismatch - Web APIs
if the remainder of the form control's value less the min value,
divided by the step value (which defaults to 1 if ommitted) is not zero, there is a mismatch.
ValidityState - Web APIs
stepmismatch read only a boolean that is true if the value does not fit the rules determined by the step attribute (that is, it's not evenly
divisible by the step value), or false if it does fit the step rule.
VideoTrack - Web APIs
usage notes to get a videotrack for a given media element, use the element's videotracks property, which returns a videotracklist object from which you can get the in
dividual tracks contained in the media: var el = document.queryselector("video"); var tracks = el.videotracks; you can then access the media's in
dividual tracks using either array syntax or functions such as foreach().
VideoTrackList - Web APIs
the in
dividual tracks can be accessed using array syntax or functions such as foreach() for example.
WebGL2RenderingContext - Web APIs
drawing buffers webgl2renderingcontext.vertexattrib
divisor() modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawarraysinstanced() and gl.drawelementsinstanced().
WebGLRenderingContext.getContextAttributes() - Web APIs
se, powerpreference: "default", premultipliedalpha: true, preservedrawingbuffer: false, stencil: false, desynchronized: false } the context attributes can be set when creating the context using the htmlcanvaselement.getcontext() method: canvas.getcontext('webgl', { antialias: false, depth: false }); see getcontext() for more information about the in
dividual attributes.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
examples const a_foobar = gl.getattriblocation(shaderprogram, 'foobar'); //either set each component in
dividually: gl.vertexattrib3f(a_foobar, 10.0, 5.0, 2.0); //or provide a float32array: const floatarray = new float32array([10.0, 5.0, 2.0]); gl.vertexattrib3fv(a_foobar, floatarray); // 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, ...
Creating 3D objects using WebGL - Web APIs
to do this efficiently, we're going to switch from drawing using the vertices directly by calling the gl.drawarrays() method to using the vertex array as a table, and referencing in
dividual vertices in that table to define the positions of each face's vertices, by calling gl.drawelements().
WebGL best practices - Web APIs
(window.innerwidth * devicepixelratio) * (window.innerheight * window.devicepixelratio) 3) the per-pixel vram budget is (1)
divided by (2), and is a constant.
WebRTC coding guide - Web APIs
this coding guide will explain in depth how webrtc works, and will
dive into actual code that uses webrtc to do useful things.
WebRTC connectivity - Web APIs
see the in
dividual articles on these properties and methods for more specifics, and codecs used by webrtc for information about codecs supported by webrtc and which are compatible with which browsers.
Lifetime of a WebRTC session - Web APIs
the problem for users is that each in
dividual computer on the internet no longer necessarily has a unique ip address, and, in fact, each device’s ip address may change not only if they move from one network to another, but if their network’s address is changed by nat and/or dhcp.
Using WebRTC data channels - Web APIs
at a fundamental level, the in
dividual network packets can't be larger than a certain value (the exact number depends on the network and the transport layer being used).
WebRTC Statistics API - Web APIs
candidate recommendation compatibility for in
dividual statistic types webrtc 1.0: real-time communication between browsersthe definition of 'rtcstatsreport' in that specification.
Writing a WebSocket server in C# - Web APIs
et"); console.writeline(); } } } } client.html <!doctype html> <style> textarea { vertical-align: bottom; } #output { overflow: auto; } #output > p { overflow-wrap: break-word; } #output span { color: blue; } #output span.error { color: red; } </style> <h2>websocket test</h2> <textarea cols=60 rows=6></textarea> <button>send</button> <
div id=output></
div> <script> // http://www.websocket.org/echo.html var button = document.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = "ws://echo.websocket.org/", wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbut...
Fundamentals of WebXR - Web APIs
the vast majority of headsets use a single display whose frame is
divided in half, with one half focused onto each of the user's eyes.
Inputs and input sources - Web APIs
properties of input sources each in
dividual xrinputsource has a set of properties that describe the input's available axes and buttons, which hand the user's holding it in, and how the input source is used to handle targeting within the 3d space.
WebXR performance guide - Web APIs
while an in
dividual vector or matrix doesn't occupy an inordinate amount of memory, the sheer number of vectors and matrices and other structures that are used to build each frame of a 3d scene means the memory management becomes a problem eventually if you keep allocating and de-allocating memory objects.
Controlling multiple parameters with ConstantSourceNode - Web APIs
<
div class="controls"> <
div class="left"> <
div id="playbutton" class="button"> ▶️ </
div> </
div> <
div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </
div> </
div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e...
Window.content - Web APIs
syntax var windowobject = window.content; example executing the following code in a chrome xul window with a <browser type="content-primary"/> element in it draws a red border around the first
div on the page currently displayed in the browser: content.document.getelementsbytagname("
div")[0].style.border = "solid red 1px"; specification none.
Window: error event - Web APIs
examples live example html <
div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </
div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-item...
Window.getDefaultComputedStyle() - Web APIs
example simple example var elem1 = document.getelementbyid("elemid"); var style = window.getdefaultcomputedstyle(elem1); longer example <style> #elem-container { position: absolute; left: 100px; top: 200px; height: 100px; } </style> <
div id="elem-container">dummy</
div> <
div id="output"></
div> <script> var elem = document.getelementbyid("elem-container"); var thecssprop = window.getdefaultcomputedstyle(elem).position; document.getelementbyid("output").innerhtml = thecssprop; // will output "static" </script> use with pseudo-elements the getdefaultcomputedstyle() method can pull style info from pseudo-elements (e.g., ::bef...
Window: load event - Web APIs
o cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <
div class="controls"> <button id="reload" type="button">reload</button> </
div> <
div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </
div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event...
self.createImageBitmap() - Web APIs
example creating sprites from a sprite sheet this example loads a sprite sheet, extracts in
dividual sprites, and then renders each sprite to the canvas.
XMLHttpRequest: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property onabort examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; ...
XMLHttpRequest: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property onerror examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = docume...
XMLHttpRequest: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property onload examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbutt...
XMLHttpRequest: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { wi...
XMLHttpRequest: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsucces...
XMLHttpRequest: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <
div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </
div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttons...
XPathEvaluator.createExpression() - Web APIs
html <
div>xpath example</
div> <
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 specific...
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 (do...
XPathEvaluator - Web APIs
html <
div>xpath example</
div> <
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 specific...
XPathExpression.evaluate() - Web APIs
html <
div>xpath example</
div> <
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 specific...
XPathExpression - Web APIs
html <
div>xpath example</
div> <
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 specificat...
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...
XPathResult.invalidIteratorState - Web APIs
html <
div>xpath example</
div> <p>iterator state: <output></output></p> javascript var xpath = "//
div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); // invalidates the iterator state document.queryselector("
div").remove(); document.queryselector("output").textcontent = result.invaliditeratorstate ?
XPathResult.iterateNext() - Web APIs
html <
div>xpath example</
div> <
div>tag names of the 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 specificatio...
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 specific...
XPathResult.resultType - Web APIs
html <
div>xpath example</
div> <
div>is xpath 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 ...
XPathResult.singleNodeValue - Web APIs
html <
div>xpath example</
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 specificatio...
XPathResult.snapshotItem() - Web APIs
html <
div>xpath example</
div> <
div>tag names of the matched nodes: <output></output></
div> javascript var xpath = "//
div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("o...
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 xp...
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...
XSL Transformations in Mozilla FAQ - Web APIs
original document information author(s): axel hecht last updated date: february 2, 2005 copyright information: portions of this content are © 1998–2006 by in
dividual mozilla.org contributors; content available under a creative commons license ...
Web APIs
tes geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement html
divelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelemen...
Using the alertdialog role - Accessibility
<
div role="alertdialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <
div role="document" tabindex="0"> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </
div> </
div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describ...
Using the aria-invalid attribute - Accessibility
} else { elem.setattribute("aria-invalid", "false"); updatealert(); } } the snippet below shows the alert functions, which add (or remove) the error message: function updatealert(msg) { var oldalert = document.getelementbyid("alert"); if (oldalert) { document.body.removechild(oldalert); } if (msg) { var newalert = document.createelement("
div"); newalert.setattribute("role", "alert"); newalert.setattribute("id", "alert"); var content = document.createtextnode(msg); newalert.appendchild(content); document.body.appendchild(newalert); } } note that the alert has the aria role attribute set to "alert." working examples: alert role example (uses the aria-invalid attribute) notes when ari...
Using the aria-valuemax attribute - Accessibility
<
div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additiona...
Using the aria-valuemin attribute - Accessibility
<
div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support information for common ua and at product combinations additiona...
Using the aria-valuenow attribute - Accessibility
<
div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuemin aria-valuetext compatibility tbd: add support information for common ua and at product combinations additiona...
Using the aria-valuetext attribute - Accessibility
<
div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-valuetext="sunday"> working examples: notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuenow compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for the aria-valuetext attri...
Using the article role - Accessibility
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-aria specificat...
Using the slider role - Accessibility
<label id="day-label">days</label> <
div class="day-slider"> <
div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </
div> </
div> the code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesd...
x-ms-aria-flowfrom - Accessibility
example <
div tabindex="0" class="foo" id="element2" role="option" aria-posinset="1" aria-setsize="15" aria-flowto="element8" x-ms-aria-flowfrom="element5"> see also aria relationship attributes microsoft api extensions ...
ARIA: tabpanel role - Accessibility
<
div role="tablist"> <
div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</
div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.
ARIA: List role - Accessibility
<section role="list"> <
div role="listitem">list item 1</
div> <
div role="listitem">list item 2</
div> <
div role="listitem">list item 3</
div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
ARIA: Listitem role - Accessibility
<section role="list"> <
div role="listitem">list item 1</
div> <
div role="listitem">list item 2</
div> <
div role="listitem">list item 3</
div> </section> description any content that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively.
ARIA: Mark role - Accessibility
<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".
ARIA: Suggestion role - Accessibility
</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.
Architecture - Accessibility
example take the following html code: <
div>hello<a href="http://www.mozilla.org/access">my link<img src="image.gif">is cool</a>bye</
div> both the <a> and <img> are hyperlinks also, both the <
div> and <a> are hypertexts so the <a> is both a hypertext and a hyperlink, because it contains text and is contained within text.
HTML To MSAA - Accessibility
d if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element
div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more ...
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <
div id="container"> <p id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </
div> css :root { --first-color: #488cff; --second-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: #...
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <
div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </
div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications not part of any standard.
:-moz-only-whitespace - CSS: Cascading Style Sheets
examples html <
div> </
div> css :root { overflow: hidden; max-width: 100vw; max-height: 100vh; }
div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; }
div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged i...
:-moz-window-inactive - CSS: Cascading Style Sheets
html <
div id="mybox"> <p>this is a box!</p> </
div> css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; } result the result of this code is shown below.
::cue-region - CSS: Cascading Style Sheets
the only exception is that background and its shorthand properties apply to each cue in
dividually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
::cue - CSS: Cascading Style Sheets
the only exception is that background and its longhand properties apply to each cue in
dividually, to avoid creating boxes and obscuring unexpectedly large areas of the media.
::part() - CSS: Cascading Style Sheets
custom-element::part(foo) { /* styles to apply to the `foo` part */ } syntax ::part( <ident>+ ) examples html <template id="tabbed-custom-element"> <style type="text/css"> *, ::before, ::after { box-sizing: border-box; padding: 1rem; } :host { display: flex; } </style> <
div part="tab active">tab 1</
div> <
div part="tab">tab 2</
div> <
div part="tab">tab 3</
div> </template> <tabbed-custom-element></tabbed-custom-element> css tabbed-custom-element::part(tab) { color: #0c0c0dcc; border-bottom: transparent solid 2px; } tabbed-custom-element::part(tab):hover { background-color: #0c0c0d19; border-color: #0c0c0d33; } tabbed-custom-element::part(tab):hover:active { ...
:defined - CSS: Cascading Style Sheets
in this demo we define a very simple trivial custom element: customelements.define('simple-custom', class extends htmlelement { constructor() { super(); let
divelem = document.createelement('
div');
divelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(
divelem); } }) then insert a copy of this element into the document, along with a standard <p>: <simple-custom text="custom element example text"></simple-custom> <p>standard paragraph example text</p> in the css we first ...
: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.
:first-child - CSS: Cascading Style Sheets
syntax :first-child examples basic example html <
div> <p>this text is selected!</p> <p>this text isn't selected.</p> </
div> <
div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </
div> css p:first-child { color: 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...
:first-of-type - CSS: Cascading Style Sheets
html <article> <
div>this `
div` is first!</
div> <
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 ...
:focus-within - CSS: Cascading Style Sheets
(this includes descendants in shadow trees.) /* selects a <
div> when one of its descendants is focused */
div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.
:indeterminate - CSS: Cascading Style Sheets
html <
div> <input type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </
div> <
div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </
div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeter...
:invalid - CSS: Cascading Style Sheets
html <form> <
div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </
div> <
div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </
div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background...
:lang() - CSS: Cascading Style Sheets
html <
div lang="en"><q>this english quote has a <q>nested</q> quote 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'; } res...
:last-child - CSS: Cascading Style Sheets
syntax :last-child examples basic example html <
div> <p>this text isn't selected.</p> <p>this text is selected!</p> </
div> <
div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </
div> css p:last-child { color: 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> ...
: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...
:not() - CSS: Cascading Style Sheets
examples html <p>i am a paragraph.</p> <p class="fancy">i am so very fancy!</p> <
div>i am not a paragraph.</
div> css .fancy { text-shadow: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* elements that are not <p> elements */ body :not(p) { text-decoration: underline; } /* elements that are not <
div> and not <span> elements */ body :not(
div):not(span) { font-weight: bold; } /* elements that are not `.crazy...
:nth-last-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-last-of-type( <nth> )where <nth> = <an-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 d...
:nth-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <
div> <
div>this element isn't counted.</
div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <
div>this element isn't counted.</
div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </
div> 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 ...
:only-child - CSS: Cascading Style Sheets
syntax :only-child examples basic example html <
div> <
div>i am an only child.</
div> </
div> <
div> <
div>i am the 1st sibling.</
div> <
div>i am the 2nd sibling.</
div> <
div>i am the 3rd sibling, <
div>but this is an only child.</
div></
div> </
div> css
div:only-child { color: red; }
div { display: inline-block; margin: 6px; outline: 1px solid; } result a list example html <ol> <li>first <ul> <li>this list has just o...
:scope - CSS: Cascading Style Sheets
javascript var context = document.getelementbyid('context'); var selected = context.queryselectorall(':scope >
div'); document.getelementbyid('results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + 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...
:valid - CSS: Cascading Style Sheets
syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <
div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </
div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: r...
-ms-high-contrast - CSS: Cascading Style Sheets
@media screen and (-ms-high-contrast: active) { /* all high contrast styling rules */ } @media screen and (-ms-high-contrast: black-on-white) {
div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) {
div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors.
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.
height - CSS: Cascading Style Sheets
examples 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 ...
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' ...
prefers-color-scheme - CSS: Cascading Style Sheets
html <
div class="day">day (initial)</
div> <
div class="day light-scheme">day (changes in light scheme)</
div> <
div class="day dark-scheme">day (changes in dark scheme)</
div> <br> <
div class="night">night (initial)</
div> <
div class="night light-scheme">night (changes in light scheme)</
div> <
div class="night dark-scheme">night (changes in dark scheme)</
div> css .day { background: #eee; color: black; } .n...
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-motion - CSS: Cascading Style Sheets
html <
div class="animation">animated box</
div> css .animation { animation: pulse 1s linear infinite both; } /* tone down the animation to avoid vestibular motion triggers like scaling or panning large objects.
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.
width - CSS: Cascading Style Sheets
examples 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...
@supports - CSS: Cascading Style Sheets
@supports (display: grid) {
div { display: grid; } } @supports not (display: grid) {
div { float: right; } } in javascript, @supports can be accessed via the css object model interface csssupportsrule.
Detecting CSS animation support - CSS: Cascading Style Sheets
testing for css animation support this code will check to see if css animation support is available: var animation = false, animationstring = 'animation', keyframeprefix = '', domprefixes = 'webkit moz o ms khtml'.split(' '), pfx = '', elem = document.createelement('
div'); if( elem.style.animationname !== undefined ) { animation = true; } if( animation === false ) { for( var i = 0; i < domprefixes.length; i++ ) { if( elem.style[ domprefixes[i] + 'animationname' ] !== undefined ) { pfx = domprefixes[ i ]; animationstring = pfx + 'animation'; keyframeprefix = '-' + pfx.tolowercase() + '-'; animation = true; break; } } } ...
CSS Multi-column Layout - CSS: Cascading Style Sheets
support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column
dividing lines (known as column rules) along with their appearance.
CSS reference - CSS: Cascading Style Sheets
style rule examples strong { color: red; }
div.menu-bar li:hover > ul { display: block; } for a beginner-level introduction to the syntax of selectors, see our guide on css selectors.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source image examples before
diving in to look at the results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings.
align-self - CSS: Cascading Style Sheets
baseline<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | 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 l...
animation-fill-mode - CSS: Cascading Style Sheets
html <p>move your mouse over the gray box!</p> <
div class="demo"> <
div class="growsandstays">this grows and stays big.</
div> <
div class="grows">this just grows.</
div> </
div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animati...
attr() - CSS: Cascading Style Sheets
string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <
div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</
div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status comment css values and ...
backdrop-filter - CSS: Cascading Style Sheets
px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <
div class="container"> <
div class="box"> <p>backdrop-filter: blur(10px)</p> </
div> </
div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
background-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <
div class="exampleone"> lorem ipsum dolor sit amet, consectetuer </
div> <
div class="exampletwo"> 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...
background-origin - CSS: Cascading Style Sheets
<box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-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 ...
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 ...
background-position - CSS: Cascading Style Sheets
html <
div class="exampleone">example one</
div> <
div class="exampletwo">example two</
div> <
div class="examplethree">example three</
div> css /* shared among all <
div>s */
div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozilla...
<basic-shape> - CSS: Cascading Style Sheets
html <
div></
div> css
div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 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% ...
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that...
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color'...
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-styl...
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' ...
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-co...
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-...
border-block-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-wid...
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in th...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that ...
border-bottom-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-bottom-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <
div>element 1</
div> <
div>element 2</
div> css
div { border: 1px solid red; margin: 1em 0; }
div:nth-child(1) { border-bottom-width: thick; }
div:nth-child(2) { 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-end-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <
div> <p class="exampletext">example</p> </
div> css content
div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 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...
border-end-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <
div> <p class="exampletext">example</p> </
div> css
div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css logical properties and val...
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <
div id="outset">this element has an outset border image!</
div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; 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 definit...
border-image-repeat - CSS: Cascading Style Sheets
omputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <
div id="bordered">you can try out various border repetition rules on me!</
div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var ...
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-color' in th...
border-inline-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed 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 tha...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed 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-st...
border-inline-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width...
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed 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...
border-inline-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed 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' ...
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in ...
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed 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 t...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that sp...
border-left-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <
div>element 1</
div> <
div>element 2</
div> css
div { border: 1px solid red; margin: 1em 0; }
div:nth-child(1) { border-left-width: thick; }
div:nth-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-right-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-right-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <
div>element 1</
div> <
div>element 2</
div> css
div { border: 1px solid red; margin: 1em 0; }
div:nth-child(1) { border-right-width: thick; }
div:nth-child(2) { border-right-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <
div> <p class="exampletext">example</p> </
div> css
div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css logical properties and val...
border-start-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <
div> <p class="exampletext">example</p> </
div> css
div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css logical properties and...
border-top-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <
div>element 1</
div> <
div>element 2</
div> css
div { border: 1px solid red; margin: 1em 0; }
div:nth-child(1) { border-top-width: thick; }
div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
bottom - CSS: Cascading Style Sheets
html <p>this<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p> <
div class="fixed"><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 ...
box-orient - CSS: Cascading Style Sheets
html <
div class="example"> <p>i will be to the left of my sibling.</p> <p>i will be to the right of my sibling.</p> </
div> css
div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -web...
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
html <
div class="content-box">content box</
div> <br> <
div class="border-box">border box</
div> css
div { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height: 80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box h...
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-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.
<display-inside> - CSS: Cascading Style Sheets
html <
div class="box"> <
div class="float">i am a floated box!</
div> <p>i am content inside the container.</p> </
div> css .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; } result specifications ...
<display-internal> - CSS: Cascading Style Sheets
html <main> <
div> <label for="name">name</label> <input type="text" id="name" name="name"> </
div> <
div> <label for="age">age</label> <input type="text" id="age" name="age"> </
div> </main> css main { display: table; }
div { display: table-row; } label, input { display: table-cell; margin: 5px; } result specifications specification status css display m...
<display-legacy> - CSS: Cascading Style Sheets
html <
div class="container"> <
div>flex item</
div> <
div>flex item</
div> </
div> not a flex item css .container { display: inline-flex; } result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
<display-listitem> - CSS: Cascading Style Sheets
examples html <
div class="fake-list">i will display as a list item</
div> css .fake-list { display: list-item; list-style-position: inside; } result specifications specification status css display module level 3the definition of 'display-listitem' in that specification.
flex-grow - CSS: Cascading Style Sheets
d and e are flex-grow:2 .</h5> <
div id="content"> <
div class="box" style="background-color:red;">a</
div> <
div class="box" style="background-color:lightblue;">b</
div> <
div class="box" style="background-color:yellow;">c</
div> <
div class="box1" style="background-color:brown;">d</
div> <
div class="box1" style="background-color:lightgreen;">e</
div> <
div class="box" style="background-color:brown;">f</
div> </
div> css #conten...
flex-shrink - CSS: Cascading Style Sheets
d and e have flex-shrink:2 set</p> <p>the width of d and e is less than the others.</p> <
div id="content"> <
div class="box" style="background-color:red;">a</
div> <
div class="box" style="background-color:lightblue;">b</
div> <
div class="box" style="background-color:yellow;">c</
div> <
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 { fl...
font-size - CSS: Cascading Style Sheets
take the following html and css: html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; } <
div> <span>outer <span>inner</span> outer</span> </
div> the result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px.
font-stretch - CSS: Cascading Style Sheets
html <
div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </
div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/pa...
font-style - CSS: Cascading Style Sheets
html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <
div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </
div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-...
grid-area - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid areas html <
div id="grid"> <
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 stat...
grid-auto-columns - CSS: Cascading Style Sheets
ze>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <
div id="grid"> <
div id="item1"></
div> <
div id="item2"></
div> <
div id="item3"></
div> </
div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid >
div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns'...
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <
div id="grid"> <
div id="item1"></
div> <
div id="item2"></
div> <
div id="item3"></
div> <
div id="item4"></
div> <
div id="item5"></
div> </
div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid {...
grid-auto-rows - CSS: Cascading Style Sheets
k-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <
div id="grid"> <
div id="item1"></
div> <
div id="item2"></
div> <
div id="item3"></
div> </
div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid >
div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in tha...
grid-column - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid column size and location html <
div id="grid"> <
div id="item1"></
div> <
div 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 specifica...
grid-row - CSS: Cascading Style Sheets
] | [ span && [ <integer> | <custom-ident> ] ] examples setting grid row size and location html <
div id="grid"> <
div id="item1"></
div> <
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 ...
grid-template-columns - CSS: Cascading Style Sheets
)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>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
)where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto<fixed-breadth> = <length-percentage>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 - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples 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...
image-rendering - CSS: Cascading Style Sheets
<
div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </
div> img { height: 200px; } css .auto { image-rendering: auto; } .pixel...
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-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...
inset-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset...
inset-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'ins...
inset-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'inse...
inset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <
div> <span class="exampletext">example text</span> </
div> css
div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status comment css logical properties and values...
isolation - CSS: Cascading Style Sheets
in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <
div id="b" class="a"> <
div id="d"> <
div class="a c">auto</
div> </
div> <
div id="e"> <
div class="a c">isolate</
div> </
div> </
div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } re...
justify-content - CSS: Cascading Style Sheets
[ <content-position> | left | right ]where <content-distribution> = space-between | space-around | space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples setting flex item distribution css #container { display: flex; justify-content: space-between; /* can be changed in the live sample */ } #container >
div { width: 100px; height: 100px; background: linear-gradient(-45deg, #788cff, #b4c8ff); } html <
div id="container"> <
div></
div> <
div></
div> <
div></
div> </
div> <select id="justifycontent"> <option value="start">start</option> <option value="end">end</option> <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> <option value="center">cent...
margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: 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 s...
margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: 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 th...
margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { 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 spec...
margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: 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...
margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: 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 ...
margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { 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 sp...
margin - CSS: Cascading Style Sheets
formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <
div class="center">this element is centered.</
div> <
div class="outside">this element is positioned outside of its container.</
div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; /* all sides: 5% margin */ margin: 10px; /* all sides: 10px margin *...
mask-clip - CSS: Cascading Style Sheets
ox> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <
div id="masked"> </
div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option...
mask-composite - CSS: Cascading Style Sheets
d | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <
div id="masked"> </
div> <select id="compositemode"> <option value="add">add</option> <option value="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.maskcom...
mask-image - CSS: Cascading Style Sheets
<color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <
div id="masked"></
div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that spe...
mask-mode - CSS: Cascading Style Sheets
ted valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <
div id="masked"> </
div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result ...
mask-origin - CSS: Cascading Style Sheets
x> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <
div id="masked"> </
div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> ...
mask-position - CSS: Cascading Style Sheets
xamples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <
div id="wrapper"> <
div id="masked"> </
div> </
div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</opti...
mask-repeat - CSS: Cascading Style Sheets
e <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <
div id="masked"> </
div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); r...
mask-size - CSS: Cascading Style Sheets
les setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <
div id="masked"> </
div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlisten...
mask - CSS: Cascading Style Sheets
it is therefore recommended to use the mask shorthand rather than other shorthands or the in
dividual properties to override any mask settings earlier in the cascade.
object-fit - CSS: Cascading Style Sheets
/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; }
div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-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...
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 pa...
offset-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting initial offset 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 ...
offset-rotate - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <
div></
div> <
div></
div> <
div></
div> css
div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); }
div:nth-child(1) { offset-rotate: auto; }
div:nth-child(2) { offset-rotate: auto 90deg; }
div:...
offset - CSS: Cascading Style Sheets
examples animating an 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 modul...
opacity - CSS: Cascading Style Sheets
cker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <
div class="light">you can barely see this.</
div> <
div class="medium">this is easier to see.</
div> <
div class="heavy">this is very easy to see.</
div> css
div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over th...
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis
divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' 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.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <
div> <p class="exampletext">example text</p> </
div> css content
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end'...
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in ...
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that sp...
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that speci...
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that s...
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <
div> <p class="exampletext">example text</p> </
div> css
div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that ...
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...
radial-gradient() - CSS: Cascading Style Sheets
examples simple gradient <
div class="radial-gradient"></
div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <
div class="radial-gradient"></
div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40px 40px, #...
repeating-radial-gradient() - CSS: Cascading Style Sheets
and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ] examples black and white gradient <
div class="radial-gradient"></
div> .radial-gradient { width: 120px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } farthest-corner <
div class="radial-gradient"></
div> .radial-gradient { width: 240px; height: 120px; } .radial-gradient { background: repeating-radial-gradient(ellipse farthest-corner at 20% 2...
revert - CSS: Cascading Style Sheets
for example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <
div>s to block, of <table>s to table, etc.
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <
div class="shape"></
div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, and the economic laws of society are uncertain to every one except some in
dividual who attempts to set them forth; but before the world was fashioned the square on the hypotenuse was equal to the sum of the squares on the other two sides of a right triangle, and it will be s...
top - CSS: Cascading Style Sheets
definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples 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
tesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values 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.
rotate3d() - CSS: Cascading Style Sheets
homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <
div>normal</
div> <
div class="rotated">rotated</
div> css body { perspective: 800px; }
div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <
div>normal</
div> <
div class="rotated">rotated</
div> css body { perspective: 800px; }
div { width: 80px; height:...
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
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <
div>normal</
div> <
div class="scaled">scaled</
div> css
div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <
div>normal</
div> <
div class="scaled">scaled</
div> css
div { width: 80px; height: 80p...
scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin 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); background-color: pink; } result translating the origin of the transformation html <
div>normal</
div> <
div class="scaled">scaled</
div> css
div { width: 80px; height: 80px; backgrou...
scaleX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates 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
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates 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
10001000s 1000010000s00001 examples html <
div>normal</
div> <
div class="perspective">translated</
div> <
div class="scaled-translated">scaled</
div> css
div { width: 80px; height: 80px; background-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 */...
skew() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <
div>normal</
div> <
div class="skewed">skewed</
div> css
div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <
div>normal</
div> <
div class="skewed">skewed</
div> css
div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: s...
skewX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 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
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 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
10tx01ty001 10tx01ty001 100tx010ty00100001 [1 0 0 1 tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <
div>static</
div> <
div class="moved">moved</
div> <
div>static</
div> css
div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation html <
div>static</
div> <
div class="moved">moved</
div> <
div>static</
div> css
div { ...
translateX() - CSS: Cascading Style Sheets
10t010001 10t010001 100t010000100001 [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
10001t001 10001t001 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.
translateZ() - CSS: Cascading Style Sheets
html <
div>static</
div> <
div class="moved">moved</
div> css
div { position: relative; width: 60px; height: 60px; left: 100px; background-color: skyblue; } .moved { transform: perspective(500px) translatez(200px); background-color: pink; } what really matters here is the class "moved"; let's take a look at what it does.
transform-style - CSS: Cascading Style Sheets
html <section id="example-element"> <
div class="face front">1</
div> <
div class="face back">2</
div> <
div class="face right">3</
div> <
div class="face left">4</
div> <
div class="face top">5</
div> <
div class="face bottom">6</
div> </section> <
div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="checkbox" id="preserve" checked> </
div> css #example-element { margin: 50px; width: 100px; ...
transform - CSS: Cascading Style Sheets
ber> )<scalez()> = scalez( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotatex()> = rotatex( [ <angle> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentage> examples translating and rotating an element html <
div>transformed element</
div> css
div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; } result more examples please see using css transforms and <transform-function> for more examples.
unicode-bidi - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, though some values have no effect on 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.
url() - CSS: Cascading Style Sheets
formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <
div class="background"></
div> css .background { height: 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"); } ...
user-modify - CSS: Cascading Style Sheets
examples html <
div class="readwrite">the user is able to change this text.</
div> css .readwrite { -moz-user-modify: read-write; -webkit-user-modify: read-write; } specifications not part of any standard.
width - CSS: Cascading Style Sheets
gth-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .px_length { width: 200px; background-color: red; color: white; border: 1px solid black; } .em_length { width: 20em; background-color: white; color: red; border: 1px solid black; } <
div class="px_length">width measured in px</
div> <
div class="em_length">width measured in em</
div> percentage .percent { width: 20%; background-color: silver; border: 1px solid red; } <
div class="percent">width in percentage</
div> max-content p.maxgreen { background: lightgreen; width: intrinsic; /* safari/webkit uses a non-standard name */ width: -moz-max-content; /...
word-spacing - CSS: Cascading Style Sheets
examples html <
div id="moz
div1">here are many words...</
div> <
div id="moz
div2">...and many more!</
div> css #moz
div1 { word-spacing: 15px; } #moz
div2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable.
z-index - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednocomputed valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering elements html <
div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </
div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60...
zoom - CSS: Cascading Style Sheets
tednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <
div id="a" class="circle"></
div> <
div id="b" class="circle"></
div> <
div id="c" class="circle"></
div> css
div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; }
div#a { background-color: gold; zoom: normal; }
div#b { background-color: green; zoom: 200%; }
div#c { background-color: blue; zo...
Cross-browser audio basics - Developer guides
an audio player with feedback consider this snippet of html: <audio id="my-audio"> <source src="https://udn.realityripple.com/samples/6c/d385042de2.mp3" type="audio/mpeg"> <source src="https://udn.realityripple.com/samples/28/191a7bd2a5.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <
div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </
div> <
div id="progress"> <
div id="bar"></
div> </
div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-color: gre...
Media buffering, seeking, and time ranges - Developer guides
the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <
div class="buffered"> <span id="buffered-amount"></span> </
div> <
div class="progress"> <span id="progress-amount"></span> </
div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top...
Audio and Video Delivery - Developer guides
<a href="dynamicsearch.mp4"> <img src="dynamicsearch.jpg" alt="dynamic app search in firefox os"> </a> <p>click image to play a video demo of dynamic app search</p> </video> var v = document.queryselector('video'), sources = v.queryselectorall('source'), lastsource = sources[sources.length-1]; lastsource.addeventlistener('error', function(ev) { var d = document.createelement('
div'); d.innerhtml = v.innerhtml; v.parentnode.replacechild(d, v); }, false); audio/video javascript libraries a number of audio and video javascript libaries exist.
Overview of events and handlers - Developer guides
urces have been downloaded and acted upon, so that the scripts have been run and the images displayed, the global object window emits an event called 'resize' when the height or the width of the browser window is changed by a user, the dom object document representing the html document emits an event called 'domcontentloaded' when the document has finished loading, the dom node objects such as
div or button emit an event called 'click' when the user presses the mouse button while the mouse pointer is on top of the dom node in the html page.
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <
div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong...
HTML attribute: pattern - HTML: Hypertext Markup Language
<form> <
div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </
div> <
div> <button>submit</button> </
div> </form>
div { margin-bottom: 10px; position: relativ...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
most screen readers can also generate an ordered list of all the headings on a page, which can help a person quickly determine the hierarchy of the content: h1 beetles h2 etymology h2 distribution and
diversity h2 evolution h3 late paleozoic h3 jurassic h3 cretaceous h3 cenozoic h2 external morphology h3 head h4 mouthparts h3 thorax h4 prothorax h4 pterothorax h3 legs h3 wings h3 abdomen when headings are nested, heading levels may be "skipped" when clo...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
<form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <
div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </
div> <
div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </
div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content.
<input type="button"> - HTML: Hypertext Markup Language
<
div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </
div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #cc...
<input type="range"> - HTML: Hypertext Markup Language
html the html needs to be updated to wrap the <input> in a <
div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page): <
div class="slider-wrapper"> <input type="range" min="0" max="11" value="7" step="1"> </
div> css now we need some css.
<menu> - HTML: Hypertext Markup Language
examples context menu html <!-- a <
div> element with a context menu --> <
div contextmenu="popup-menu"> right-click to see the adjusted context menu </
div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css
div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons ...
Standard metadata names - HTML: Hypertext Markup Language
for example, to indicate that a document prefers dark mode but does render functionally in light mode as well: <meta name="color-scheme" content="dark light"> this works at the document level in the same way that the css color-scheme property lets in
dividual elements specify their preferred and accepted color schemes.
<p>: The Paragraph element - HTML: Hypertext Markup Language
the end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <
div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
<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.
<slot> - HTML: Hypertext Markup Language
6px; border: 1px solid #cee9f9; border-radius: 4px; } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <code class="name"><<slot name="element-name">need name</slot>></code> <i class="desc"><slot name="description">need description</slot></i> </summary> <
div class="attributes"> <h4>attributes</h4> <slot name="attributes"><p>none</p></slot> </
div> </details> <hr> </template> note: you can see this complete example in action at element-details (see it running live).
<wbr> - HTML: Hypertext Markup Language
in particular, it behaves like a unicode bidi bn code point, meaning it has no effect on bidi-ordering: <
div dir=rtl>123,<wbr>456</
div> displays, when not broken on two lines, 123,456 and not 456,123.
accesskey - HTML: Hypertext Markup Language
accesskey values that rely on numbers may be confusing to in
dividuals experiencing cognitive concerns, where the number doesn't have a logical association with the functionality it triggers.
itemref - HTML: Hypertext Markup Language
example html <
div itemscope id="amanda" itemref="a b"></
div> <p id="a">name: <span itemprop="name">amanda</span> </p> <
div id="b" 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",...
title - HTML: Hypertext Markup Language
html <
div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </
div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor cont...
HTML: Hypertext Markup Language
html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <
div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.
Resource URLs - HTTP
furthermore, some default values of preferences differ between build configurations, such as platform and locale, which means web sites could identify in
dividual users using this information.
HTTP caching - HTTP
if this header is present, then the cache's freshness lifetime is equal to the value of the date header minus the value of the last-modified header
divided by 10.
Content negotiation - HTTP
this value is an approximation given by rounding to the nearest power of 2 and
dividing that number by 1024.
CSP: block-all-mixed-content - HTTP
syntax content-security-policy: block-all-mixed-content; examples content-security-policy: block-all-mixed-content; <meta http-equiv="content-security-policy" content="block-all-mixed-content"> to disallow http assets on a more granular level, you can also set in
dividual directives to https:.
CSP: style-src-attr - HTTP
the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to in
dividual dom elements.
Expect-CT - HTTP
ct requirements can be satisfied via any one of the following mechanisms: x.509v3 certificate extension to allow embedding of signed certificate timestamps issued by in
dividual logs a tls extension of type signed_certificate_timestamp sent during the handshake supporting ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist when a site enables the expect-ct header, they are requesting that the browser check that any certificate for that site appears in public ct logs.
Referrer-Policy - HTTP
for example, you can set the referrer policy for the entire document with a <meta> element with a name of referrer: <meta name="referrer" content="origin"> or set it for in
dividual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets.
Firefox user agent string reference - HTTP
mac os x version gecko user agent string mac os x on intel x86 or x86_64 mozilla/5.0 (macintosh; intel mac os x x.y; rv:10.0) gecko/20100101 firefox/10.0 mac os x on powerpc mozilla/5.0 (macintosh; ppc mac os x x.y; rv:10.0) gecko/20100101 firefox/10.0 linux linux is a more
diverse platform.
X-DNS-Prefetch-Control - HTTP
examples turning on and off prefetching you can either send the x-dns-prefetch-control header server-side, or from in
dividual documents, using the http-equiv attribute on the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on".
HTTP Index - HTTP
102 csp: style-src-attr csp, content, content-security-policy, directive, http, reference, security, style, source, style-src, style-src-attr the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to in
dividual dom elements.
Indexed collections - JavaScript
the simplest way to do this is as follows: let colors = ['red', 'green', 'blue'] for (let i = 0; i < colors.length; i++) { console.log(colors[i]) } if you know that none of the elements in your array evaluate to false in a boolean context—if your array consists only of dom nodes, for example—you can use a more efficient idiom: let
divs = document.getelementsbytagname('
div') for (let i = 0,
div;
div =
divs[i]; i++) { /* process
div in some way */ } this avoids the overhead of checking the length of the array, and ensures that the
div variable is reassigned to the current item each time around the loop for added convenience.
Regular expressions - JavaScript
^, $, x(?=y), x(?!y), (?<=y)x, (?<!y)x, \b, \b assertions (x), (?:x), (?<name>x), x|y, [xyz], [^xyz], \number groups and ranges *, +, ?, x{n}, x{n,}, x{n,m} quantifiers \p{unicodeproperty}, \p{unicodeproperty} unicode property escapes note: a larger cheatsheet is also available (only aggregating parts of those in
dividual articles).
Working with objects - JavaScript
this restriction applies when you create an object and its properties with a constructor function (as we did previously with the car object type) and when you define in
dividual properties explicitly (for example, mycar.color = "red").
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 & par...
The arguments object - JavaScript
using typeof with arguments the typeof operator returns 'object' when used with arguments console.log(typeof arguments); // 'object' the type of in
dividual arguments can be determined by indexing arguments: console.log(typeof arguments[0]); // returns the type of the first argument properties arguments.callee reference to the currently executing function that the arguments belong to.
Array.prototype.reduceRight() - JavaScript
callback, x) => { settimeout(callback, randint(1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(1000), x - 2); }; const split = (callback, x) => { settimeout(callback, randint(1000), x, x); }; const add = (callback, x, y) => { settimeout(callback, randint(1000), x + y); }; const
div4 = (callback, x) => { settimeout(callback, randint(1000), x / 4); }; const computation = waterfall(add5, mult3, sub2, split, add,
div4); computation(console.log, 5) // -> 14 // same as: const computation2 = (input, callback) => { const f6 = x=>
div4(callback, x); const f5 = (x, y) => add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3,...
Date() constructor - JavaScript
in
dividual date and time component values given at least a year and month, this form of date() returns a date object whose component values (year, month, day, hour, minute, second, and millisecond) all come from the following parameters.
<mfenced> - MathML
separators a sequence of zero or more characters to be used for different separators, optionally
divided by white space, which is ignored.
The "codecs" parameter in common media types - Web media technologies
slient bit-sliced arithmetic coding) mobile internetworking 23 er aac ld (error resilient aac low-delay; used for two-way communication) ld, mobile internetworking 24 er celp (error resilient code-excited linear prediction) hq, ld 25 er hvxc (error resilient harmonic vector excitation coding) ld 26 er hiln (error resilient harmonic and in
dividual line plus noise) 27 er parametric (error resilient parametric) 28 ssc (sinusoidal coding) 29 ps (parametric stereo) he-aac v2 30 mpeg surround 31 escape 32 mpeg-1 layer-1 33 mpeg-1 layer-2 (mp2) 34 mpeg-1 layer-3 (mp3) 35 dst (direct stream transfer) ...
Using images in HTML - Web media technologies
image file type and format guide a guide to the various image file types commonly supported by web browsers including details about their in
dividual use cases, capabilities, and compatibility factors.
Web Performance
here we'll introduce many of these features ad the basic level and provide links to deeper
dives to improve performance for each topic.
Mobile first - Progressive web apps (PWAs)
our html looks like this: <article> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">articles</a></li> <li><a href="#">videos</a></li> <li><a href="#">work</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> </nav> <header> <a id="top" href="#bottom">jump to menu</a> <h1>my article</h1> </header> <
div class="main"> <p>lorem ipsum … </p> <a id="bottom" href="#top">back to top</a> </
div> </article> <button id="install-btn">install</button> default mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout.
begin - SVG: Scalable Vector Graphics
each in
dividual value can be one of the following : <offset-value>, <syncbase-value>, <event-value>, <repeat-value>, <accesskey-value>, <wallclock-sync-value> or the keyword indefinite.
bias - SVG: Scalable Vector Graphics
after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the
divisor attribute, the bias attribute is added to each component.
href - SVG: Scalable Vector Graphics
refer to the descriptions of the in
dividual animation elements for any restrictions on what types of elements can be targets of particular types of animations.
requiredExtensions - SVG: Scalable Vector Graphics
usage notes value <list-of-extensions> default value none animatable no <list-of-extensions> the value is a list of references (iri references in svg 1, url references in svg 2) which identify the required extensions, with the in
dividual values separated by white space.
text-decoration - SVG: Scalable Vector Graphics
ml, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see in
dividual properties animatable yes for a description of the values, please refer to the css text-decoration property.
u1 - SVG: Scalable Vector Graphics
the u1 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express in
dividual unicode characters) and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair.
u2 - SVG: Scalable Vector Graphics
the u2 attribute specifies list of unicode characters (refer to the description of the unicode attribute of the <glyph> element for a description of how to express in
dividual unicode characters) and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair.
SVG Attribute reference - SVG: Scalable Vector Graphics
e attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display
divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal ...
Using shadow DOM - Web Components
you can affect the nodes in the shadow dom in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling in
dividual nodes using element.style.foo, or adding style to the entire shadow dom tree inside a <style> element.
id - XPath
syntax id(expression ) arguments expression if expression is a node-set, then the string value of each node in the node-set is treated as an in
dividual id.
position - XPath
--> </xsl:template> <xsl:template match="//
div[@class='foo']/bar[position() = 1]"> <!-- this template matches the first bar element that is a child of a
div element with a class attribute equal to "foo" --> </xsl:template> defined xpath 1.0 4.1 gecko support supported.
Web technology for developers
web technology references web apis reference material for each of the in
dividual apis that comprise the web's powerful scriptability, including the dom and all of the related apis and interfaces you can use to build web content and apps.