Search completed in 1.10 seconds.
AudioListener.upX - Web APIs
its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...
...valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
... working draft ...
DOMMatrixReadOnly.flipX() - Web APIs
the original matrix is not modified. examples this svg contains two paths in the shape of a triangle, both drawn to the same position. note that the x co-ordinate of the viewbox attribute is negative, showing us content from both sides of the x-axis. ...
..., both drawn to the same position. note that the x co-ordinate of the viewbox attribute is negative, showing us content from both sides of the x-axis. ...
...pped" fill="blue" d="m 0 50 l 50 0 l 50 100 z" /> </svg> this javascript first creates an identity matrix, then uses the `fli
px()` method to create a new matrix, which is then applied to the blue triangle, inverting it across the x-axis. the red triangle is left in place. const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.fli
px(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.fli
px()' in that specification. candidate recommendation initial definition ...
Using CSS gradients - CSS: Cascading Style Sheets
radial, conic and repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. ...
... repeating gradients using linear gradients a linear gradient creates a band of colors that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. ...
... have at least two, but you can have as many as you want. <div class="simple-linear"></div> div { width: 120
px; height: 120
px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { width: 120
px; height: 120
px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. ...
...And 65 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
yout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
... control what happens when you create a grid and do not place some or all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...r all of the child items. you can see auto-placement in action in the simplest of ways by creating a grid on a set of items. if you give the items no placement information they will position themselves on the grid, one in each grid cell. ...
...And 49 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
. this gives us 4 lines in each dimension. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...ion. inside our grid container i have four child elements. if we do not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
... not place these on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first four cells. if you use the firefox grid highlighter you can see how the grid has defined columns and rows. ...
...And 45 more matches
Using CSS transitions - CSS: Cascading Style Sheets
ntaneously as usual. transition-duration specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...usual. transition-duration specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...n specifies the duration over which transitions should occur. you can specify a single duration that applies to all properties during the transition, or multiple values to allow each property to transition over a different period of time. ...
...And 45 more matches
Box-shadow generator - CSS: Cascading Style Sheets
<div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-slider-input" data-topic="posx" data-unit="
px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic="posy" data-min="-500" data-max="500" data-step="1"> </div> ...
... <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic="posy" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="add"></div> <div class="ui-slider-input" data-topic="posy" data-unit="
px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> blur </div> <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> <div class="ui-slider" data-topic="blur" data-min="0" data-max="200" data-step="1"> </div> ...
... <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> <div class="ui-slider" data-topic="blur" data-min="0" data-max="200" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> <div class="ui-slider-input" data-topic="blur" data-unit="
px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> spread </div> <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> <div class="ui-slider" data-topic="spread" data-min="-100" data-max="100" data-step="1" data-value...
...And 43 more matches
Grids - Learn web development
g display: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. ...
...lay: grid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. ...
...rid gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. to see something that looks more grid-like, we will need to add some columns to the grid. let's add three 200-pixel columns here. you can use any length unit, or percentages to create these column tracks. ...
...And 40 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
x to lay out a set of boxes. i have five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...five child items in my container, and i have given the flex properties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...erties values so that they can grow and shrink from a flex-basis of 150 pixels. i have also set the flex-wrap property to wrap, so that if the space in the container becomes too narrow to maintain the flex basis, items will wrap onto a new row. ...
...And 40 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
rator 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="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"...
...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: 420
px; margin: 0; border: 1
px 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: 198
px; height: 198
px; margin: 5
px; border: 1
px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } ...
...And 40 more matches
Border-image generator - CSS: Cascading Style Sheets
elected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="font-size" data-info="em size" data-unit="
px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit="
px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> ...
...s="property"> <div class="ui-input-slider" data-topic="preview-width" data-info="width" data-unit="
px" data-min="10" data-max="10000" data-sensivity="3"></div> </div> <div class="property"> <div class="ui-input-slider" data-topic="preview-height" data-info="height" data-unit="
px" data-min="10" data-max="10000" data-sensivity="3"> </div> </div> </div> <div id="output" class="category"> <div class="title"> css code </div> <div class="css-property"> <span class="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </s...
... 83%; } .span_9 { width: 74.54%; } .span_8 { width: 66.08%; } .span_7 { width: 57.62%; } .span_6 { width: 49.16%; } .span_5 { width: 40.7%; } .span_4 { width: 32.24%; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0
px; margin: 0
px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display...
...And 37 more matches
Color picker tool - CSS: Cascading Style Sheets
</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" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420
px; margin: 0; border: 1
px 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: 198
px; height: 198
px; margin: 5
px; border: 1
px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } ...
...a(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background-color: #f00; } .ui-color-picker .picker { width: 10
px; height: 10
px; border-radius: 50%; border: 1
px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8
px; height: 8
px; content: ""; position: absolute; border: 1
px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198
px; height: 28
px; margin: 5
px; border: 1
px solid #fff; float: left; } .ui-color-...
...-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1
px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2
px; height: 100%; border: 1
px solid #777; background-color: #fff; position: relative; top: -1
px; } /* input hsv and rgb */ .
...And 37 more matches
filter - CSS: Cascading Style Sheets
ence an svg filter with a url to an svg filter element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...is interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...teractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 36 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
re changing the alignment of the item within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...within the grid area you have placed it. in the following example, i have four grid areas within my grid. ...
...i have four grid areas within my grid. ...
...And 34 more matches
Positioning - Learn web development
so how do you modify the element's position? you need to use the top, bottom, left, and right properties, which we'll explain in the next section. introducing top, bottom, left, and right top, bottom, left, and right are used alongside position to specify exactly where to move the positioned element to. to try this out, add the following declarations to the .positioned rule in your css: top: 30
px; left: 30
px; note: the values of these properties can take any units you'd logically expect — pixels, mm, rems, %, etc. if you now save and refresh, you'll get a result something like this: <h1>relative positioning</h1> <p>i am a basic block level element. my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our pa...
...e</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...ne another, and adjacent text nodes, if there is space on the same line. ...
...And 30 more matches
Fundamental text and font styling - Learn web development
ator — tommy the cat had many a story to tell. but it was a rare occasion such as this that he did.</p> font size in our previous module's css values and units article, we reviewed length and size units. font size (set with the font-size property) can take values measured in most of these units (and others, such as percentages), however the most common units you'll use to size text are:
px (pixels): the number of pixels high you want the text to be. this is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation. ems: 1 em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter m contained inside the parent element.) this can become tri...
...t element. this makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — rem is not supported in internet explorer 8 and below. the font-size of an element is inherited from that element's parent element. this all starts with the root element of the entire document — <html> — the font-size of which is set to 16
px as standard across browsers. any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16
px. other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of 32
px. things become more tricky when you start altering the font size of neste...
...root element will have a final size of 16
px. other elements may have different default sizes, for example an <h1> element has a size of 2 em set by default, so it will have a final size of 32
px. things become more tricky when you start altering the font size of nested elements. for example, if you had an <article> element in your page, and set its font-size to 1.5 em (which would compute to 24
px final size), and then wanted the paragraphs inside the <article> elements to have a computed font size of 20
px, what em value would you use? <!-- document base font-size is 16
px --> <article> <!-- if my font-size is 1.5em --> <p>my paragraph</p> <!-- how do i compute to 20
px font-size? --> </article> you would need to set its em value to 20/24, or 0.83333333 em. the maths can be complicated,...
...And 30 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
l direct children of that element become grid items. 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: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } all the direct children are now grid items. in a web browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single colu...
...ing the grid-template-columns property, then defining the size of the column tracks. i have now created a grid with three 200-pixel-wide column tracks. the child items will be laid out on this grid one in each grid cell. <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: 200
px 200
px 200
px; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } the fr unit tracks can be defined using any length unit. grid also introduces an additional length unit to help us cre...
...vailable space in the grid container. the next grid definition would create three equal width tracks that grow and shrink according to the available space. <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: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } in this next example, we create a definition with a 2fr track then two 1fr tracks. the available space is split into four. two parts are given to the first track and one part each to the nex...
...And 30 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
css is full of physical positioning keywords – left and right, top and bottom. if we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. 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: 20
px; left: 30
px; } <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. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical b...
...rent writing modes found around the world. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...rld. again, for full details of these see jen’s article. as a simple example, i have two paragraphs below. the first uses the default horizontal-tb, and the second uses vertical-rl. in the mode text still runs left to right, however the direction of the text is vertical - inline text now runs down the page, from top to bottom. ...
...And 30 more matches
Grid template areas - CSS: Cascading Style Sheets
} .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } having defined these names i then create my layout. this time, instead of placing my items using line numbers specified on the items themselves, i create the whole layout on the grid container. ...
...ms themselves, i create the whole layout on the grid container. ...
...ut on the grid container. ...
...And 28 more matches
UI pseudo-classes - Learn web development
esponse): </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. you can match these two states using the :required and :optional pseudo-classes. for example, if we apply the following css to the above html: input:required { border: 1
px solid black; } input:optional { border: 1
px solid silver; } the required controls would have a black border, and the optional control will have a silver border, like so: you can also try submitting the form without filling it in, to see the client-side validation error messages browsers give you by default. the above form isn't bad, but it isn't great either. for a start, we are signallin...
...is really useful when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. ...
... when you want to add a visual indicator to an element, such as a label or icon, but don't want it to be picked up by assistive technologies. ...
...And 24 more matches
Border-radius generator - CSS: Cascading Style Sheets
class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radius-ui-sliders"> <div id="tlr" class="ui-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="to...
... <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="...
...iv 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-t...
...And 24 more matches
Advanced styling effects - Learn web development
ithout them. you can find the examples in this section at box-shadow.html (see the source code too). a simple box shadow let's look at a simple example to get things started. ...
... can find the examples in this section at box-shadow.html (see the source code too). a simple box shadow let's look at a simple example to get things started. ...
...to get things started. first, some html: <article class="simple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500
px; padding: 10
px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5
px 5
px 5
px rgba(0,0,0,0.7); } this gives us the following result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative). the second length value is the vertical offset — the distance downwards that the shadow is offset...
...And 21 more matches
Introduction to CSS layout - Learn web development
em, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. flexbox example 1 * {box-sizing: border-box;} .wrapper > div { border-radius: 5
px; 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. these properties, among other thin...
...d. if there is more space then the items will become wider; if there is less space they will become narrower. in addition, if you add another element to the markup the items will all become smaller to make space for it — they will adjust size to take up the same amount of space, whatever that is. ...
...id layout with a specific value of display — display: grid. the below example uses similar markup to the flex example, with a container and some child elements. in addition to using display: grid, we are also defining some row and column tracks on the parent using the grid-template-rows and grid-template-columns properties respectively. we've defined three columns each of 1fr and two rows of 100
px. ...
...And 21 more matches
Layout and the containing block - CSS: Cascading Style Sheets
aragraph!</p> </section> </body> only the css is altered in each instance below. example 1 in this example, the paragraph is statically positioned, so its containing block is <section> because it's the nearest ancestor that is a block container. ...
.../section> </body> only the css is altered in each instance below. example 1 in this example, the paragraph is statically positioned, so its containing block is <section> because it's the nearest ancestor that is a block container. ...
...below. example 1 in this example, the paragraph is statically positioned, so its containing block is <section> because it's the nearest ancestor that is a block container. <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { display: block; width: 400
px; height: 160
px; background: lightgray; } p { width: 50%; /* == 400
px * .5 = 200
px */ height: 25%; /* == 160
px * .25 = 40
px */ margin: 5%; /* == 400
px * .05 = 20
px */ padding: 5%; /* == 400
px * .05 = 20
px */ background: cyan; } example 2 in this example, the paragraph's containing block is the <body> element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context. <body> <section> ...
...And 20 more matches
background-position - CSS: Cascading Style Sheets
values <position> a <position>. a position define...
... values <position> a <position>. a position defines an x/y co...
... values <position> a <position>. a position defines an x/y coordinate, to place an item relative to the e...
...And 20 more matches
Floats - Learn web development
mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> now apply the following css to your html (using a <style> element or a <link> to a separate .css file — your choice): body { width: 90%; max-width: 900
px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .box { width: 150
px; height: 100
px; border-radius: 5
px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow. to float the text around it add the float and margin-right properties to the .b...
...ica, sans-serif } .box { width: 150
px; height: 100
px; border-radius: 5
px; background-color: rgb(207,232,220); padding: 1em; } if you save and refresh now, you'll see something much like what you'd expect — the box is sitting above the text, in normal flow. to float the text around it add the float and margin-right properties to the .box rule: .box { float: left; margin-right: 15
px; width: 150
px; height: 100
px; border-radius: 5
px; 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. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> <p>du...
...id risus quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...And 18 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
ng browser, i use float, however i have also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...e also defined the container as a grid container, in order to use the alignment properties that are implemented in css grids. ...
...order to use the alignment properties that are implemented in css grids. ...
...And 18 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
a three-column layout for wider screens. i am going to create this layout using the named template areas that we learned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...ned about in the guide grid template areas. my mark-up is a container with elements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...lements inside for a header, footer, main content, navigation, sidebar, and a block into which i am intending to place advertising. ...
...And 18 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
r to work with. naming lines when defining a grid you can assign some or all of the lines in your grid a name when you define your grid with the grid-template-rows and grid-template-columns properties. to demonstrate i’ll use the simple layout created in the guide on line-based placement. this time i’ll create the grid using named lines. * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } when defining the grid, i name my lines inside square brackets. those names can be anything you like. i have defined a name for the start and end of the container, both for rows and columns. the...
...lumns. then defined the centre block of the grid as content-start and content-end again, both for columns and rows although you do not need to name all of the lines on your grid. you might choose to name just some key lines for your layout. .wrapper { display: grid; grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end]; grid-template-rows: [main-start] 100
px [content-start] 100
px [content-end] 100
px [main-end]; } once the lines have names, we can use the name to place the item rather than the line number. .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...
...e, if you append -start and -end to the lines around an area, as i have in the example above, grid will create you a named area of the main name used. taking the above example, i have content-start and content-end both for rows and for columns. this means i get a grid area named content, and could place something in that area should i wish to. * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; 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. .wrapper { display: grid; grid-template-columns: [main-start...
...And 17 more matches
<blend-mode> - CSS: Cascading Style Sheets
pear when elements overlap. it is used in the background-blend-mode and mix-blend-mode properties. syntax the <blend-mode> data type is defined using a keyword value chosen from the list below. values normal the final color is the top color, regardless of what the bottom color is. the effect is like two opaque pieces of paper overlapping. <div id="div"></div> #div { width: 300
px; height: 300
px; 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. a black layer leads to a black final layer, and a white layer leads to no change. the effect is like two image...
... 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. a black layer leads to a black final layer, and a white layer leads to no change. the effect is like two images printed on transparent film overlapping. <div id="div"></div> #div { width: 300
px; height: 300
px; 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. a black layer leads to no change, and a white layer leads to a white final layer. t...
...tps://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. a black layer leads to no change, and a white layer leads to a white final layer. the effect is like two images shone onto a projection screen. <div id="div"></div> #div { width: 300
px; height: 300
px; 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. this blend mode is equivalent to hard-light but with the layers swapped. ...
...And 17 more matches
Using CSS transforms - CSS: Cascading Style Sheets
rotating here is the mdn logo rotated 90 degrees from its bottom-left corner. <img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis. <img style="transform: skewx(10deg) translatex(150
px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex. you have to start by configuring the 3d space by giving it a perspective, then you have to configure how your 2d elements will behave in that space. perspective the first element to set...
...ler they are. setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...And 15 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
to specify fixed lengths for both dimensions, those lengths are always used, per rule 1 above. in other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio. ...
...ecify fixed lengths for both dimensions, those lengths are always used, per rule 1 above. in other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio. ...
...d to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio. ...
...And 15 more matches
border-image - CSS: Cascading Style Sheets
note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. values <'border-imag...
... note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. values <'border-image-source'> the source image. see border-image-source. <'border-image-slice'> the dimensions for sli...
... note: if the computed value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead. values <'border-image-source'> the source image. see border-image-source. <'border-image-slice'> the dimensions for slicing ...
...And 15 more matches
box-sizing - CSS: Cascading Style Sheets
on one line within the constraints of the parent container. the box-sizing property can be used to adjust this behavior: content-box gives you the default css box-sizing behavior. if you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100
px. border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. if you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. this typically makes it much easier to size elements. note: it is often useful to set box-sizing to...
...nges to border and padding sizes, which is sometimes desirable. syntax the box-sizing property is specified as a single keyword chosen from the list of values below. values content-box this is the initial and default value as specified by the css standard. the width and height properties include the content, but does not include the padding, border, or margin. for example, .box {width: 350
px; border: 10
px solid black;} renders a box that is 370
px wide. here, the dimensions of the element are calculated as: width = width of the content, and height = height of the content. (borders and padding are not included in the calculation.) border-box the width and height properties include the content, padding, and border, but do not include the margin. note that padding and border will be i...
...the content box can't be negative and is floored to 0, making it impossible to use border-box to make the element disappear. here the dimensions of the element are calculated as: width = border + padding + width of the content, and height = border + padding + height of the content. ...
...And 15 more matches
Advanced form styling - Learn web development
buttons styling a checkbox or a radio button is tricky by default. the sizes of check boxes and radio buttons are not meant to be changed with their default designs, and browsers react very differently when you try. ...
... checkbox or a radio button is tricky by default. the sizes of check boxes and radio buttons are not meant to be changed with their default designs, and browsers react very differently when you try. ...
...orm> now, let's style these with a custom checkbox design. ...
...And 14 more matches
Background Tasks API - Web APIs
e 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. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
...element to show the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
...the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creatively given the id "startbutton"), which the user will use to start the data processing. ...
...And 14 more matches
EffectTiming.fill - Web APIs
mple. 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> 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. ...
...in" 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. ...
...And 14 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
ction specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
...specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
...fies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. ...
...And 13 more matches
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
... grid lines are created when you define tracks in the explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
...explicit grid using css grid layout. in the following example there is a grid with three column tracks and two row tracks. this gives us 4 column lines and 3 row lines. ...
...And 13 more matches
Multiple-column layout - Learn web development
-width. the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the browser works out how much space to assign each column. column-count example body { width: 90%; max-width: 900
px; 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. nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. sed ...
...etium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. ...
...nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. ...
...And 13 more matches
Styling links - Learn web development
les build on one another, for example the styles in the first rule will apply to all the subsequent ones, and when a link is being activated, it is also being hovered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. ...
... hovered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. ...
...ered over. if you put these in the wrong order, things won't work properly. to remember the order, you could try using a mnemonic like love fears hate. ...
...And 13 more matches
Client-side form validation - Learn web development
you to choose whether you prefer a banana or a cherry. this example involves a simple text <input> with an associated <label> and a submit <button>. find the source code on github at fruit-start.html and a live example below. <form> <label for="choose">would you prefer a banana or cherry?</label> <input id="choose" name="i_like"> <button>submit</button> </form> input:invalid { border: 2
px dashed red; } input:valid { border: 2
px solid black; } to begin, make a copy of fruit-start.html in a new directory on your hard drive. the required attribute the simplest html5 validation feature is the required attribute. to make an input mandatory, add this attribute to the element. when this attribute is set, the element matches the :required ui pseudo-class and the form won't submit,...
...y. while empty, the input will also be considered invalid, matching the :invalid ui pseudo-class. add a required attribute to your input, as shown below. <form> <label for="choose">would you prefer a banana or cherry? (required)</label> <input id="choose" name="i_like" required> <button>submit</button> </form> note the css that is included in the example file: input:invalid { border: 2
px dashed red; } input:invalid:required { background-image: linear-gradient(to right, pink, lightgreen); } input:valid { border: 2
px solid black; } this css causes the input to have a red dashed border when it is invalid and a more subtle solid black border when valid. we also added a background gradient when the input is required and invalid. try out the new behavior in the example below: ...
...t cover here. for a complete list and many examples, consult our regular expressions documentation. let's implement an example. update your html to add a pattern attribute like this: <form> <label for="choose">would you prefer a banana or a cherry?</label> <input id="choose" name="i_like" required pattern="[bb]anana|[cc]herry"> <button>submit</button> </form> input:invalid { border: 2
px dashed red; } input:valid { border: 2
px solid black; } this gives us the following update — try it out: note: you can find this example live on github as fruit-pattern.html (see also the source code.) in this example, the <input> element accepts one of four possible values: the strings "banana", "banana", "cherry", or "cherry". regular expressions are case-sensitive, but we've made i...
...And 13 more matches
HTML text fundamentals - Learn web development
jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50
px;"> </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: 100
px; 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="bu...
...area id="code" class="input" style="min-height: 100
px; width: 95%">my short story i am a statistician and my name is trish. ...
...e is trish. ...
...And 13 more matches
How CSS is structured - Learn web development
in the example above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet" href="styles/...
...ylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. the html for an internal stylesheet might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1
px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful. for example, perhaps you're working with a content management system where you are blocked from modifying external css files. but for sites with more than one pag...
... multiple web pages. inline styles inline styles are css declarations that affect a single html element, contained within a style attribute. the implementation of an inline style in an html document might look like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1
px solid black;">hello world!</h1> <p style="color:red;">this is my first css example</p> </body> </html> avoid using css in this way when possible. it is the opposite of a best practice. first, it is the least efficient implementation of css for maintenance. one styling change might require multiple edits within in a single web page. second, inline css also mixes (css) presentational code wi...
...And 12 more matches
Responsive images - Learn web development
ll fit somewhere inside the content column. here's a simple example: this works well on a wide screen device, such as a laptop or desktop (you can see the example live and find the source code on github.) we won't discuss the css much in this lesson, except to say that: the body content has been set to a maximum width of 1200 pixels — in viewports above that width, the body remains at 1200
px and centers itself in the available space. in viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, an...
...viewports below that width, the body will stay at 100% of the width of the viewport. the header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. if the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. it is 200
px high. the content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it. however, issues arise when you start to view the site on a narrow screen device. the header below looks ok, but it's starting to take up a lot of the screen height for a mobile device. and at this siz...
...t="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one. you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600
px) 480
px, 800
px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. let's run through...
...And 12 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
our example, we have a desktop layout, as we've already seen. this is created using the css rules included at the top of the stylesheet, before any media queries are encountered. mid-width layout we also have a mid-width layout, which is aimed at working well on tablets and narrow laptop screens. this is created by all of the css inside the first media query: @media all and (max-width: 1024
px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card:nth-child(3) img { width: 20%; } } so here we're altering the widths of the columns and removing the float of the third column (and adding clearing to guard against any float funny business). we've also altered the width of the images inside the third...
...ry) so that now you get five per line (it was previously three per line). narrow screen/mobile layout we then have a narrow screen layout, designed to fit the bill for a mobile app/open web app experience. this is created in multiple parts. ...
...as expected, there is a media query in our main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 480
px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-radius: 0
px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen layouts that were't required for the mobile app. x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } ...
...And 12 more matches
Legacy layout methods - Learn web development
ch one of the columns needs an outer element to contain its content and let us manipulate all of it at once. in this example case we've chosen <div>s, but you could choose something more semantically appropriate like <article>s, <section>s, and <aside>, or whatever. now for the css. first, of all, apply the following to your html to provide some basic setup: body { width: 90%; max-width: 900
px; margin: 0 auto; } the body will be 90% of the viewport wide until it gets to 900
px wide, in which case it will stay fixed at this width and center itself in the viewport. by default, its children (the <h1> and the two <div>s) will span 100% of the width of the body. if we want the two <div>s to be floated alongside one another, we need to set their widths to total 100% of the width of their p...
...s quis ante semper consectetur eget aliquam lorem. vivamus tristique elit dolor, sed pretium metus suscipit vel. mauris ultricies lectus sed lobortis finibus. vivamus eu urna eget velit cursus viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> body { width: 90%; max-width: 900
px; margin: 0 auto; } div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } you'll notice here that we are using percentages for all the widths — this is quite a good strategy, as it creates a liquid layout, one that adjusts to different screen sizes and keeps the same proportions for the column widths at smaller screen sizes. try adjust...
...a width of 980 pixels, with padding on the right hand side of 20 pixels. this leaves us with 960 pixels for our total column/gutter widths — in this case, the padding is subtracted from the total content width because we have set box-sizing to border-box on all elements on the site (see changing the box model completely for more explanation). * { box-sizing: border-box; } body { width: 980
px; margin: 0 auto; } .wrapper { padding-right: 20
px; } now use the row container that is wrapped around each row of the grid to clear one row from another. add the following rule below your previous one: .row { clear: both; } applying this clearing means that we don’t need to completely fill each row with elements making the full twelve columns. the rows will remain separated, and not i...
...And 11 more matches
perspective - CSS: Cascading Style Sheets
the z=0 plane and the user in order to give a 3d-positioned element some perspective. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20
px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective transform is to be applied. <length> a <length> giving the distance from the user to the z=0 plane. it is used to apply a perspective transform to the element and its content. if the value is 0 or a negative number, no perspective transform is...
...th> examples setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...And 11 more matches
Beginner's guide to media queries - Learn web development
, and we can apply css if the viewport is above or below a certain width — or an exact width — using the min-width, max-width, and width media features. these features are used to create layouts that respond to different screen sizes. for example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. ...
... in practice, using minimum or maximum values is much more useful for responsive design so you will rarely see width or height used alone. ...
... of which could be matched. "and" logic in media queries to combine media features you can use and in much the same way as we have used and above to combine a media type and feature. for example, we might want to test for a min-width and orientation. the body text will only be blue if the viewport is at least 600 pixels wide and the device is in landscape mode. @media screen and (min-width: 600
px) and (orientation: landscape) { body { color: blue; } } open this example in the browser, or view the source. "or" logic in media queries if you have a set of queries, any of which could match, then you can comma separate these queries. in the below example the text will be blue if the viewport is at least 600 pixels wide or the device is in landscape orientation. if either of ...
...And 10 more matches
Practical positioning examples - Learn web development
begin with, add the following between your opening and closing <style> tags: html { font-family: sans-serif; } * { box-sizing: border-box; } body { margin: 0; } this is just some general setup to set a sans-serif font on our page, use the border-box box-sizing model, and get rid of the default <body> margin. next, add the following just below your previous css: .info-box { width: 450
px; height: 400
px; margin: 0 auto; } this sets a specific width and height on the content, and centers it on the screen using the old margin: 0 auto trick. previously in the course we advised against setting a fixed height on content containers if at all possible; it is ok in this circumstance because we have fixed content in our tabs. it also looks a bit jarring to have different tabs at diffe...
...out this example — this is so that we can insert this feature into a page with other content already on it, without fear of interfering with the styles applied to other parts of the page. ...
...set to none to get rid of the bullets, and their width is set to 150
px so they will comfortably fit across the info-box. the <a> elements are set to display inline-block so they will sit in a line but still be stylable, and they are styled appropriately for tab buttons, using a variety of other properties. add the following css: .info-box li { float: left; list-style-type: none; width: 150
px; } .info-box li a { display: inline-block; text-decoration: none; width: 100%; line-height: 3; background-color: red; color: black; text-align: center; } finally for this section we'll set some styles on the link states. first, we'll set the :focus and :hover states of the tabs to look different when they are focused/hovered, providing users with some visual feedback. secondly, we...
...And 10 more matches
Styling web forms - Learn web development
t to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size. this is because each widget has their own rules for border, padding and margin. to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150
px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>. the right column on the other hand shows the same elements with our above rule applied to th...
...nd <button>. the right column on the other hand shows the same elements with our above rule applied to them. notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget. what may not be apparent via the screenshot is that the radio and checkbox controls still look the same, but they are centered in the 150
px of horizontal space provided by the width property. other browsers may not center the widgets, but they do adhere to the space allotted. legend placement the <legend> element is okay to style, but it can be a bit tricky to control placement of it. by default it is always positioned over the top border of its <fieldset> parent, near the top left corner. to position it somewhere else, for example...
...using this we can easily position our elements, inclu...
...And 10 more matches
shape-outside - CSS: Cascading Style Sheets
like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ontribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 10 more matches
JavaScript Daemons Management - Archive of obsolete content
ds.js"></script> <script type="text/javascript"> function perform (nindex, nlength, bbackw) { // http://tyleregeto.com/text-animation-in-javascript for (var oletter, nletter = 0; nletter < aletters.length; nletter++) { oletter = aletters[nletter]; var ndist = nmaxdist - nmaxdist * nindex / nlength; oletter.pos += 0.08; oletter.elem.style.top = math.sin(oletter.pos) * ndist + "
px"; oletter.elem.style.left = math.cos(oletter.pos) * ndist * 5 + "
px"; } } function prepare () { // build letters list // http://tyleregeto.com/text-animation-in-javascript this.textcontent = ""; aletters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nlet...
...t = "do you feel lucky, punk?", orecompose = new daemon(document.createelement("p"), perform, 33, 30, prepare); onload = function () { orecompose.owner.id = "perform-me"; document.body.appendchild(orecompose.owner); orecompose.play(); }; </script> <style type="text/css"> body { font-family: monospace, sans-serif; background: #dddddd; overflow: hidden; } #perform-me { margin: 50
px; font-size: 20
px; line-height: 20
px; } </style> </head> <body> <h1>new daemon(<em>@thisobject</em>, <em>@callback</em>[, <em>@rate</em>, <em>@length</em>, <em>@init</em>, <em>@onstart</em>])</h1> <p><button onclick="orecompose.skipto(11);">skipto(11)</button> <button onclick="orecompose.makesteps(29);">makesteps(29)</button> <button onclick="orecompose.fixposition(-13);">fixposition(-13)</...
...se.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <input type="text" id="vello" value="33" style="width: 40
px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>daemon.buildaround(&h...
...And 9 more matches
Example 1 - Learn web development
lass="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 3
px 1
px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : ...
...; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1
px 25
px 2
px 5
px */ width : 10em; /* 100
px */ border : 0.2em solid #000; /* 2
px */ border-radius : 0.4em; /* 4
px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; ...
...0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20
px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-to...
...And 9 more matches
Intersection Observer API - Web APIs
. this is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0. creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0
px', threshold: 1.0 } let observer = new intersectionobserver(callback, options); a threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked. intersection observer options the options object passed into the intersectionobserver() constructor let you control the circumstances under which the observer's callback is i...
...ctor let you control the circumstances under which the observer's callback is invoked. it has the following fields: root the element that is used as the viewport for checking visibility of the target. must be the ancestor of the target. defaults to the browser viewport if not specified or if null. rootmargin margin around the root. can have values similar to the css margin property, e.g. "10
px 20
px 30
px 40
px" (top, right, bottom, left). the values can be percentages. this set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. defaults to all zeros. threshold either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. if you only want ...
...ach 25%. ...
...And 9 more matches
@keyframes - CSS: Cascading Style Sheets
for that frame. there is cascading within a @keyframes rule if multiple keyframes specify the same percentage values. when properties are left out of some keyframes properties that aren't specified in every keyframe are interpolated if possible — properties that can't be interpolated are dropped from the animation. for example: @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50
px; } 68%, 72% { left: 50
px; } 100% { top: 100
px; left: 100%; } } here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes. when a keyframe is defined multiple times if a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. for ...
...} here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes. when a keyframe is defined multiple times if a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. ...
...e top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes. when a keyframe is defined multiple times if a keyframe is defined multiple times but not all affected properties are in each keyframe, all values specified in these keyframes are considered. ...
...And 9 more matches
border-radius - CSS: Cascading Style Sheets
sting definitions. instead, the individual longhand properties have to be used. ...
...onstituent properties this property is a shorthand for the following css properties: border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius syntax /* the syntax of the first radius allows one to four values */ /* radius is set for all 4 sides */ border-radius: 10
px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10
px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2
px 4
px 2
px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1
px 0 3
px 4
px; /* the syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10
px / 20
px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border...
...p-left | top-right-and-bottom-left | bottom-right */ border-radius: 2
px 4
px 2
px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1
px 0 3
px 4
px; /* the syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10
px / 20
px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10
px 5% / 20
px 30
px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10
px 5
px 2em / 20
px 25
px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10
px 5% / 20
px 25em 30
px 35em; /* global values */ border-radius: inherit; border-radius: initial; border-radius: unset; the border-radius property is speci...
...And 9 more matches
env() - CSS: Cascading Style Sheets
ronment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared. to tell the browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { padding: env(safe-area-inset-top, 20
px) env(safe-area-inset-right, 20
px) env(safe-area-inset-bottom, 20
px) env(safe-area-inset-left, 20
px); } in addition, unlike custom properties, which cannot be used outside of declarations, the env() function can be used in place of any part of a property value, or any part of a descriptor (e.g. in media query rules). as the spec evolves, it may also be usable in other places such as s...
...e-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays. ...
...r agent-defined property names are case-sensitive. formal syntax env( <custom-ident> , <declaration-value>? ) examples the below example makes use of the optional second parameter of env(), which allows you to provide a fallback value in case the environment variable is not available. ...
...And 9 more matches
transition-delay - CSS: Cascading Style Sheets
mount of time to wait between a property's value changing and the start of the transition effect. ...
...to wait between a property's value changing and the start of the transition effect. ...
...'s value changing and the start of the transition effect. ...
...And 9 more matches
transition-duration - CSS: Cascading Style Sheets
o states will be instantaneous. a negative value for the time renders the declaration invalid. ...
...be instantaneous. a negative value for the time renders the declaration invalid. ...
...ve value for the time renders the declaration invalid. ...
...And 9 more matches
<input type="time"> - HTML: Hypertext Markup Language
> here's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
...of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid. depending on what browser you're u...
...s now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern nn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid times, or incorrectly formatted times that follow the pattern. then there's the problem of the user having no idea exactly what format the time is expected to be in. ...
...And 9 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
rome://browser/skin/identity-icons-https-ev.png to your browser folder. you can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites. ...
...n/identity-icons-https-ev.png to your browser folder. you can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites. ...
...https-ev.png to your browser folder. you can modify/redesign these icons to match your theme provided appropriate padlock icons are used for secure sites but not on insecure sites. ...
...And 8 more matches
Styling lists - Learn web development
handling list spacing wh...
... handling list spacing when styling lists, you need to adju...
...o garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16
px (1em) and a padding-left of 40
px (2.5em.) the list items (<li> elements) have no set defaults for spacing. the <dl> element has a top and bottom margin of 16
px (1em), but no padding set. the <dd> elements have margin-left of 40
px (2.5em.) the <p> elements we've included for reference have a top and bottom margin of 16
px (1em), the same as the different list types. handling list spacing when styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes ca...
...And 8 more matches
How to build custom form controls - Learn web development
te. because our control is focusable, we double this custom style with the :focus pseudo-class in order to be sure they will behave the same. .select .active, .select:focus { outline: none; /* this box-shadow property is not exactly required, however it's imperative to ensure active state is visible, especially to keyboard users, that we use it as a default value. */ box-shadow: 0 0 3
px 1
px #227755; } now, let's handle the list of options: /* the .select selector here helps to make we only select element inside our control. */ .select .optlist { /* this will make sure our list of options will be displayed below the value and out of the html flow */ position : absolute; top : 100%; left : 0; } we need an extra class to handle when the list of options i...
...0) to give the optionlist no height and full width. beautification so now that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. ...
...ow that we have the basic functionality in place, the fun can start. the following is just an example of what is possible, and will match the screenshot at the beginning of this article. however, you should feel free to experiment and see what you can come up with. .select { /* the computations are made assuming 1em == 16
px which is the default value in most browsers. ...
...And 8 more matches
-moz-image-rect - CSS: Cascading Style Sheets
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. css the css defines one container style, then the styles for the four boxes that comprise the complete image. ...
...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. css the css defines one container style, then the styles for the four boxes that comprise the complete image. ...
...gments 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. css the css defines one container style, then the styles for the four boxes that comprise the complete image. ...
...And 8 more matches
backdrop-filter - CSS: Cascading Style Sheets
phical effects such as blurring or color shifting to the area behind an element. because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent. ...
...o everything behind the element, to see the effect you must make the element or its background at least partially transparent. ...
...erything behind the element, to see the effect you must make the element or its background at least partially transparent. ...
...And 8 more matches
font - CSS: Cascading Style Sheets
include values for: <font-style> <font-variant> <font-weight> <font-stretch> <line-height> font-style, font-variant and font-weight must precede font-size font-variant may only specify the values defined in css 2.1, that is normal and small-caps font-stretch may only be a single keyword value. line-height must immediately follow font-size, preceded by "/", like this: "16
px/3" font-family must be the last value specified. values <'font-style'> see the font-style css property. <'font-variant'> see the font-variant css property. <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the fo...
... set the font family to sans-serif */ p { font: 80% sans-serif } /* set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. */ p ...
...number or lengthfont-family: discrete formal syntax [ [ <'font-style'> | <font-variant-css21> | <'font-weight'> | <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-barwhere <font-variant-css21> = [ normal | small-caps ] examples setting font properties /* set the font size to 12
px and the line height to 14
px. set the font family to sans-serif */ p { font: 12
px/14
px sans-serif } /* set the font size to 80% of the parent element or default value (if no parent element present). set the font family to sans-serif */ p { font: 80% sans-serif } /* set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif. */ p { font: bold italic large se...
...And 8 more matches
gap (grid-gap) - CSS: Cascading Style Sheets
lease clone https://github.com/mdn/interactive-examples and send us a pull request. css grid layout initially defined the grid-gap property. this prefixed property is being replaced by gap. however, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above. ...
... grid-gap property. this prefixed property is being replaced by gap. however, in order to support browsers that implemented grid-gap and not gap for grid, you will need to use the prefixed property as in the interactive example above. syntax /* one <length> value */ gap: 20
px; gap: 1em; gap: 3vmin; gap: 0.5cm; /* one <percentage> value */ gap: 16%; gap: 100%; /* two <length> values */ gap: 20
px 10
px; gap: 1em 0.5em; gap: 3vmin 2vmax; gap: 0.5cm 2mm; /* one or two <percentage> values */ gap: 16% 100%; gap: 21
px 82%; /* calc() values */ gap: calc(10% + 20
px); gap: calc(20
px + 10%) calc(10% - 5
px); /* global values */ gap: inherit; gap: initial; gap: unset; this property is specified as a value for <'row-gap'> followed optionally by a value for <'column-gap'>. if <'column-gap'> is omi...
... elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>? ...
...And 8 more matches
shape-margin - CSS: Cascading Style Sheets
ide. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the margin lets you adjust the distance between the edges of the shape (the float element) and the surrounding content. syntax /* <length> values */ shape-margin: 10
px; shape-margin: 20mm; /* <percentage> value */ shape-margin: 60%; /* global values */ shape-margin: inherit; shape-margin: initial; shape-margin: unset; values <length-percentage> sets the margin of the shape to a <length> value or to a <percentage> of the width of the element's containing block. formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of...
... candidate recomm...
... candidate recommendation initial definition ...
...And 8 more matches
Video and Audio APIs - Learn web development
longer as the time elapses. to get an idea of what the finished product will look like, check out our finished version. exploring the css now open the css file and have a look inside. the css for the example is not too complicated, but we'll highlight the most interesting bits here. first of all, notice the .controls styling: .controls { visibility: hidden; opacity: 0.5; width: 400
px; border-radius: 10
px; position: absolute; bottom: 20
px; left: 50%; margin-left: -200
px; background-color: black; box-shadow: 3
px 3
px 5
px black; transition: 1s all; display: flex; } .player:hover .controls, player:focus .controls { opacity: 1; } we start off with the visibility of the custom controls set to hidden. in our javascript later on, we will set the controls to vi...
...this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use the :...
...this is an icon font — all the characters of the alphabet equate to common icons you might want to use in an application. next we use generated content to display an icon on each button: we use the ::before selector to display the content before each <button> element. we use the con...
...And 7 more matches
Starting our Svelte Todo list app - Learn web development
a svelte component, render it inside another component, pass data into it using props, and save its state. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: ...
...hem have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our markup let's make the todo list look a little better. ...
... border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620
px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1
px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pres...
...And 7 more matches
MathML Torture Test
</mfrac> </mrow> </mfrac> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>8</td> <td><img src="https://udn.realityripple.com/samples/4e/5132919863.png" width="54" height="50" alt="texbook, 17.5-17.6" /></td> <td> <math display="block"> <mrow> <mo>(</mo> <mfrac linethickness="0
px"> <mi>n</mi> <mrow> <mi>k</mi> <mo>/</mo> <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </math> </td></tr> <tr> <td>9</td> <td><img src="https://udn.realityripple.com/samples/52/183910d0f1.png" width="237" height="50" alt="texbook, 17.7" /></td> <td> <math display...
... <mn>2</mn> </mrow> </mfrac> <mo>)</mo> </mrow> </math> </td></tr> <tr> <td>9</td> <td><img src="https://udn.realityripple.com/samples/52/183910d0f1.png" width="237" height="50" alt="texbook, 17.7" /></td> <td> <math display="block"> <mrow> <mrow> <mo>(</mo> <mfrac linethickness="0
px"> <mi>p</mi> <mn>2</mn> </mfrac> <mo>)</mo> </mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mrow> <mi>p</mi> <mo>-</mo> <mn>2</mn> </mrow> </msup> <mo>-</mo> <...
...</msup> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>10</td> <td><img src="https://udn.realityripple.com/samples/e4/0fe420309f.png" width="116" height="63" alt="texbook, 17.7-17.8" /></td> <td> <math display="block"> <mrow> <munder> <mo>∑</mo> <mrow> <mfrac linethickness="0
px"> <mrow> <mn>0</mn> <mo>≤</mo> <mi>i</mi> <mo>≤</mo> <mi>m</mi> </mrow> <mrow> <mn>0</mn> <mo><</mo> <mi>j</mi> <mo><</mo> <mi>n</mi> </mrow>...
...And 7 more matches
Element.scrollHeight - Web APIs
iis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
...et magnis dis parturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
...rturient montes, nascetur ridiculus mus. cras vulputate libero sed arcu iaculis nec lobortis orci fermentum. ...
...And 7 more matches
calc() - CSS: Cascading Style Sheets
n be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* property: calc(expression) */ width: calc(100% - 80
px); the calc() function takes a single expression as its parameter, with the expression's result used as the value. the expression can be any simple expression combining the following operators, using standard operator precedence rules: + addition. - subtraction. * multiplication. at least one of the arguments must be a <number>. / division. the right-hand side must be a <number>. the ...
...e of the arguments must be a <number>. / division. the right-hand side must be a <number>. the operands in the expression may be any <length> syntax value. you can use different units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. notes the + and - operators must be surrounded by whitespace. for instance, calc(50% -8
px) will be parsed as a percentage followed by a negative length — an invalid expression — while calc(50% - 8
px) is a percentage followed by a subtraction operator and a length. likewise, calc(8
px + -50%) is treated as a length followed by an addition operator and a negative percentage. the * and / operators do not require whitespace, but adding it for consistency is both allowed and recommende...
... if it results in an integer. ie. z-index: calc(4 / 2); will not be accepted. examples positioning an object on screen with a margin calc() makes it easy to position an object with a set margin. ...
...And 7 more matches
font-size - CSS: Cascading Style Sheets
les project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...e the appropriate method based on the needs for the particular web page. keywords keywords are a good way to set the size of fonts on the web. by setting a keyword font size on the <body> element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly. pixels setting the font size in pixel values (
px) is a good choice when you need pixel accuracy. a
px value is static. this is an os-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. the results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect. font sizing settings can also be used in combinat...
...for example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. ...
...And 7 more matches
grid - CSS: Cascading Style Sheets
specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
...ue, as normal for shorthands. also, the gutter properties are not reset by this shorthand. ...
... also, the gutter properties are not reset by this shorthand. ...
...And 7 more matches
inset - CSS: Cascading Style Sheets
css property, though part of the logical specification, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...
...ification, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...
...ation, doesn't define logical block or inline offsets, and instead defines physical offsets, regardless of the element's writing mode, directionality, and text orientation. it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...
...And 7 more matches
mask-border - CSS: Cascading Style Sheets
see mask-border-source. <'mask-border-slice'> the dimensions for slicing the source image into regions. up to four values may be specified. see mask-border-slice. <'mask-border-width'> the width of the border mask. up t...
...see mask-border-source. ...
...see mask-border-source. ...
...And 7 more matches
position - CSS: Cascading Style Sheets
within the document, but without the offset affecting other elements. in the example below, note how the other elements are placed as if "two" were taking up the space of its normal location. 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: 100
px; height: 100
px; background: red; color: white; } #two { position: relative; top: 20
px; left: 20
px; background: blue; } absolute positioning elements that are relatively positioned remain in the normal flow of the document. in contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. the absolutely p...
...an> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. ...
...other, and adjacent text nodes, if there is space on the same line. ...
...And 7 more matches
transform - CSS: Cascading Style Sheets
elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes. ...
... boxes. ...
... */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17
px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: rotatez(10deg); transform: translate(12
px, 50%); transform: translate3d(12
px, 50%, 3em); transform: translatex(2em); transform: translatey(3in); transform: translatez(2
px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scalex(2); transform: scaley(0.5); transform: scalez(0.3); transform: skew(30deg, 20deg); transform: skewx(30deg); transform: skewy(1.07rad); /* multiple function values */ transform: translatex(10
px) rotate(10deg) translatey(5
px)...
...And 7 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
m together. the saturation (s) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. the rest of the final color is made up of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...
... (s) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. the rest of the final color is made up of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...
...lor. the rest of the final color is made up of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...
...And 7 more matches
Example Sticky Notes - Archive of obsolete content
the others are only needed if you plan to handle xul (xml user...
...l within the binding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. ...
...inding file (not visible in the target document dom tree). --> <resources> <!-- obtaining the stylesheet we'll use to (re)style the bound element. --> <stylesheet src="notes.css"/> </resources> <content> <!-- this svg graphics will be added automatically around each bound element. the position of the original content is indicated by <children/> tag. ...
...And 6 more matches
Supporting older browsers - Learn web development
at becomes a grid item loses the float behaviour, which means that by turning the wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...em loses the float behaviour, which means that by turning the wrapper into a grid container, the floated items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. ...
...d items become grid items. if the browser supports grid layout it will display the grid view, if not it ignores the display: grid and related properties and the floated layout is used. * {box-sizing: border-box;} .wrapper { background-color: rgb(79,185,227); padding: 10
px; max-width: 400
px; display: grid; grid-template-columns: 1fr 1fr 1fr; } .item { float: left; border-radius: 5
px; 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. fallback methods ...
...And 6 more matches
Getting started with HTML - Learn web development
close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50
px;"> </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: 100
px;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> ht...
...m the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100
px;width: 95%"> this is my text. ...
... 100
px;width: 95%"> this is my text. ...
...And 6 more matches
Useful string methods - Learn web development
write a conditional test of the form operand1 operator operand2. is the thing on the left equal to the thing on the right? or in this case, does the method call on the left return the result on the right? hint: in this case it is probably more useful to test whether the method call isn't equal to a certain result. ...
...his case it is probably more useful to test whether the method call isn't equal to a certain result. ...
...low, 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: 16
px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10
px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); ...
...And 6 more matches
Styling Vue components with CSS - Learn web development
. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
... the reset styles should be applied to the app now. the images below show the look of the app before and after the re...
...0; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620
px) { [class*="__lg"] { font-size: 2.4rem; } } .visually-hidden { position: absolute; height: 1
px; width: 1
px; overflow: hidden; clip: rect(1
px 1
px 1
px 1
px); clip: rect(1
px, 1
px, 1
px, 1
px); clip-path: rect(1
px, 1
px, 1
px, 1
px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * +...
...And 6 more matches
Detecting device orientation - Web APIs
on example this example will work on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
...example will work on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
...rk on any browser supporting the deviceorientation event and running on a device able to detect its orientation. ...
...And 6 more matches
GlobalEventHandlers.onanimationend - Web APIs
element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ment (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
... or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...And 6 more matches
GlobalEventHandlers.onanimationiteration - Web APIs
utomatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. much of this code is the same as in other examples of animation events, so it may look familiar. ...
...end of each iteration, allowing the user to choose whether or not to start the next iteration. much of this code is the same as in other examples of animation events, so it may look familiar. ...
...ation, allowing the user to choose whether or not to start the next iteration. much of this code is the same as in other examples of animation events, so it may look familiar. ...
...And 6 more matches
GlobalEventHandlers.onanimationstart - Web APIs
element (htmlelement), document (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ment (document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
... or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...And 6 more matches
Timing element visibility with the Intersection Observer API - Web APIs
styles for the <body> and <main> elements to define the site's background as well as the grid the various parts of the site will be placed in. body { font-family: "open sans", "arial", "helvetica", sans-serif; background-color: aliceblue; } .wrapper { display: grid; grid-template-columns: auto minmax(min-content, 1fr); grid-template-rows: auto minmax(min-content, 1fr); max-width: 700
px; margin: 0 auto; background-color: aliceblue; } the site's <body> is configured here to use one of a number of common sans-serif fonts, and to use "aliceblue" as the background color. then the "wrapper" class is defined; it wraps the entire blog, including the header, sidebar, and body content (articles and ads). the wrapper establishes a css grid with two columns and two rows. the first co...
...ent) is sized to be at least the width of the contents of the column and at most all remaining available space. the first row will be used specially for the site header. the rows are sized the same way as the columns: the first one is automatically sized and the one uses the remaining space, but at least enough space to provide room for all elements within it. the wrapper's width is fixed at 700
px so that it will fit in the available space when presented inline on mdn below. the header the header is fairly simple, since for this example all it contains is some text. its style looks like this: header { grid-column: 1 / -1; grid-row: 1; background-color: aliceblue; } grid-row is set to 1, since we want the header to be placed in the top row of the site's grid. more interesting is o...
...olumns within the grid. perfect for our needs. the sidebar our sidebar is used to present links to other pages on the site. none of them work in our example here, but they exist to help with the presentation of a blog-like experience. the sidebar is represented using an <aside> element, and is styled as follows: aside { grid-column: 1; grid-row: 2; background-color: cornsilk; padding: 5
px 10
px; } aside ul { padding-left: 0; } aside ul li { list-style: none; } aside ul li a { text-decoration: none; } the most important thing to note here is that the grid-column is set to 1, to place the sidebar on the left-hand side of the screen. if you change this to -1, it will appear on the right (although some other elements will need some adjustments made to their margins to get the...
...And 6 more matches
Recording a media element - Web APIs
play back the recorded video. notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...
...esn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...
...play set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth. below the playback element is a button for downloading the recorded video. ...
...And 6 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value: element { background-color: var(--main-bg-color); } first steps with custom properties let's start with this simple css that applies the same color to elements of different classes: .one { color: white; background-color: brown; margin: 10
px; width: 50
px; height: 50
px; display: inline-block; } .two { color: white; background-color: black; margin: 10
px; width: 150
px; height: 70
px; display: inline-block; } .three { color: white; background-color: brown; margin: 10
px; width: 75
px; } .four { color: white; background-color: brown; margin: 10
px; width: 100
px; } .five { background-color: brown; } we'l...
...r in the cascade and let css inheritance solve this problem naturally. for non-trivial projects, this is not always possible. ...
...e and let css inheritance solve this problem naturally. for non-trivial projects, this is not always possible. ...
...And 6 more matches
Viewport concepts - CSS: Cascading Style Sheets
ollbars, if present). this is the viewport width. the window.innerwidth is the width, in css pixels, of the browser window viewport including, if rendered, the vertical scrollbar. the window.outerwidth is the width of the outside of the browser window including all the window chrome. in an experiment with these, the innerwidth and outerwidth was seen to be the same, but the outerheight was 100
px taller than the innerheight. this is because the outerheight includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling 100
px in height, but no chrome on the left or right of the window. the area within the innerheight and innerwidth is generally considered the layout viewport. the browser chrome is not considered part of the viewport. when...
...e iframe, rather than the parent document. you can set any height and width on an iframe, but the whole document may not be visible. if you use viewport length units in your css within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document. ...
...can set any height and width on an iframe, but the whole document may not be visible. if you use viewport length units in your css within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document. iframe { width: 50vw; } if the iframe is set to 50vw, it will be 50% of the width of the 1200
px parent document in our example above, or 600
px, with 1vw being 6
px. ...
...And 6 more matches
clip-path - CSS: Cascading Style Sheets
m/mdn/interactive-examples and send us a pull request. ...
.../interactive-examples and send us a pull request. ...
... send us a pull request. ...
...And 6 more matches
grid-auto-rows - CSS: Cascading Style Sheets
o a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows. ...
...tional rows. ...
... <percentage> is a non-negative...
...And 6 more matches
<length> - CSS: Cascading Style Sheets
re of the "水" (cjk water ideograph, u+6c34) glyph found in the font used to render it. lh equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length. rem represents the font-size of the root element (typically <html>). when used within the root element font-size, it represents its initial value (a common browser default is 16
px, but user-defined preferences may modify this). rlh equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. when used on the font-size or line-height properties of the root element, it refers to the properties' initial value. viewport-percentage lengths viewport-percentage lengths define the <length> value relative to...
...e length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. this is done by anchoring one of the units to a physical unit, and then defining the others relative to it. the anchor is done differently for low-resolution devices, such as screens, versus high-resolution devices, such as printers. for low-dpi devices, the unit
px represents the physical reference pixel; other units are defined relative to it. thus, 1in is defined as 96
px, which equals 72pt. the consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don't necessary match the size of the physical unit with the same name. for high-dpi devices, inches (in), centimeters (cm), and mill...
...e to it. thus, 1in is defined as 96
px, which equals 72pt. the consequence of this definition is that on such devices, dimensions described in inches (in), centimeters (cm), or millimeters (mm) don't necessary match the size of the physical unit with the same name. for high-dpi devices, inches (in), centimeters (cm), and millimeters (mm) are the same as their physical counterparts. therefore, the
px unit is defined relative to them (1/96 of 1 inch). note: many users increase their user agent's default font size to make text more legible. absolute lengths can cause accessibility problems, since they are fixed and do not scale according to user settings. for this reason, prefer relative lengths (such as em or rem) when setting font-size.
px one pixel. for screen displays, it traditional...
...And 6 more matches
mask - CSS: Cascading Style Sheets
mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image used as mask */ mask: url(masks.svg#star); /* element within svg graphic used as mask */ /* combined values */ mask: url(masks.svg#star) luminance; /* element within svg graphic used as luminance mask */ mask: url(masks.svg#star) 40
px 20
px; /* element within svg graphic used as mask positioned 40
px from the top and 20
px from the left */ mask: url(masks.svg#star) 0 0/50
px 50
px; /* element within svg graphic used as mask with a width and height of 50
px */ mask: url(masks.svg#star) repeat-x; /* element within svg graphic used as horizontally repeated mask */ mask: url(masks.svg#star) stroke-box; /* element wit...
...see mask-image. <masking-mode> sets the masking mode of the mask image. see mask-mode.
...see mask-image. <masking-mode> sets the masking mode of the mask image. see mask-mode. <position> sets the position of the mask image. see mask-position. <bg-size> sets the size of the m...
...And 6 more matches
repeat() - CSS: Cascading Style Sheets
the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. this function can be used in the css grid properties grid-template-columns and grid-template-rows. ...
...n be used in the css grid properties grid-template-columns and grid-template-rows. ...
...s and grid-template-rows. ...
...And 6 more matches
matrix3d() - CSS: Cascading Style Sheets
m dom elements and transforms, which can be hovered/focused to apply a matrix3d() transform to it. ...
...d transforms, which can be hovered/focused to apply a matrix3d() transform to it. ...
..." 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: 100
px; height: 100
px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); margin: 50
px auto; } #example-element:hover, #example-element:focus { transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60
px; color: #fff; } .front { background: rgba(90,90,90,.7); transfo...
...And 6 more matches
rotate() - CSS: Cascading Style Sheets
for example, if you rotate before translating, the translation wi...
...for example, if you rotate before translating, the translation will be along the ...
...element, be careful about the order in which you specify your transformations. ...
...And 6 more matches
transform-origin - CSS: Cascading Style Sheets
plying the element's transform, then translating by the negated property value. this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
... this means, this definition transform-origin: -100% 50%; transform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...sform: rotate(45deg); results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center. ...
...And 6 more matches
translate - CSS: Cascading Style Sheets
the translate css property allows you to specify translation transforms individually and independently of the transform property. this maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value. syntax /* keyword values */ translate: none; /* single values */ translate: 100
px; translate: 50%; /* two values */ translate: 100
px 200
px; translate: 50% 105
px; /* three values */ translate: 50% 105
px 5rem; values single <length-percentage> value a <length> or <percentage> that specifies a 2d translation, with the same translation along both the x and y axes. equivalent to a translate() (2d translation) function with a single value specified. two <length-percentage> values two <length> or <percentag...
...t with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>? ...
... editor's draf...
...And 6 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
here's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10
px; display: flex; align-items: center; } label { display: inline-block; width: 300
px; } input:invalid+span:after { content: '✖'; padding-left: 5
px; } input:valid+span:after { content: '✓'; padding-left: 5
px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone ...
...ys an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn-nntnn:nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...from 0 to 9. of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates and times. and what user is going to understand the pattern they need to enter the time and date in? we still have a problem. ...
...And 6 more matches
<input type="month"> - HTML: Hypertext Markup Language
: here's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
...of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments...
...e input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9. of course, this doesn't stop people from entering invalid dates (such as 0000-42), or incorrectly formatted dates that follow the pattern. there's also the problem that the user won't necessarily know which of the many date formats is expected. we have work left to do. ...
...And 6 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
0</td> </tr> <tr> <td>hoshi nakamura</td> <td>601942</td> <td><time datetime="2012-07-23">july 23, 2012</time></td> <td>15.00</td> </tr> </table> css this simple css just adds a solid black border around the table and around each of its cells, including those specified using both <th> and <td>. that way, both header and data cells are easily demarcated. table { border: 1
px solid black; } th, td { border: 1
px solid black; } result row and column spanning now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "membership dates". this involves adding both row and column spans to the table, so that the heading cells can wind up in the right places. result l...
...ble> the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. the css is unchanged from before. table { border: 1
px solid black; } th, td { border: 1
px solid black; } explicitly specifying table content groups before really getting into styling this table, let's take a moment to add row and column groups to help make our css easier. html the html is where the action is here, and the action is pretty simple. <table> <thead> <tr> <th rowspan="2">name</th> <th rowspan="2">id</th> ...
...the differences that matter here—for the purposes of discussing row and column spans—are in the first few lines of the code above. note the use of rowspan on to make the "name", "id", and "balance" headers occupy two rows instead of just one, and the use of colspan to make the "membership dates" header cell span across two columns. once again, we haven't touched the css. table { border: 1
px solid black; } th, td { border: 1
px solid black; } result the output is entirely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css. any styles applied to the <tr> element will affect the cells within the row unless overridden by s...
...And 6 more matches
Forms related code snippets - Archive of obsolete content
isplay); this.container.appendchild(ocapt); this.container.appendchild(othead); this.current.setdate(1); this.writedays(); otarget.onclick = function () { if (otable.parentnode) { otable.parentnode.removechild(otable); return; } otable.style.zindex = nzindex++; otable.style.position = "absolute"; otable.style.left = otarget.offsetleft + "
px"; otable.style.top = (otarget.offsettop + otarget.offsetheight) + "
px"; otarget.parentnode.insertbefore(otable, otarget); }; ainstances.push(this); } datepicker.prototype.writedays = function () { const nendblanks = (this.current.getday() + bzeroismonday * 6) % 7, nend = amonthlengths[this.current.getmonth()] + nendblanks, ntotal = nend + ((7 - n...
...ner("load", buildcalendars, false) : window.attachevent ? attachevent("onload", buildcalendars) : (onload = buildcalendars); document.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...nt.addeventlistener ? document.addeventlistener("mousedown", ondocclick, false) : document.attachevent ? ...
...And 5 more matches
-ms-filter - Archive of obsolete content
the following example shows how to use an inline style sheet to set the filter on an image. ...
... example shows how to use an inline style sheet to set the filter on an image. ...
...ml/graphics/cone.jpg" height="80
px" width="80
px" alt="cone"> the following example shows how to use scripting to set the filter on an image. code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function. ...
...And 5 more matches
Backgrounds and borders - Learn web development
ounds in css the css background property is a shorthand for a number of background longhand properties that we will meet in this lesson. if you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once. .box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400
px 200
px 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 individual background properties. background colors the background-color property defines the background color on any element in css. the property accept...
...ues — a horizontal value followed by a vertical value. you can use keywords such as top and right (look up the others on the background-position page): .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; } and lengths, and percentages: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20
px 10%; } you can also mix keyword values with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20
px; } finally, you can also use a 4-value syntax in order to indicate a distance from certain edges of the box — the length unit, in this case, is an offset from the value that precedes it. so in the css belo...
...lues with lengths or percentages, for example: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20
px; } finally, you can also use a 4-value syntax in order to indicate a distance from certain edges of the box — the length unit, in this case, is an offset from the value that precedes it. so in the css below we are positioning the background 20
px from the top and 10
px from the right: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20
px right 10
px; } use the example below to play around with these values and move the star around inside the box. note: background-position is a shorthand for background-position-x and background-position-y, which allow you to set the different axis po...
...And 5 more matches
CSS values and units - Learn web development
d as numeric: data type description <integer> an <integer> is a whole number such as 1024 or -55. <number> a <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2. <dimension> a <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10
px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types. <percentage> a <percentage> represents a fraction of some other value, for example 50%. percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length. lengths the numeric type you will come across most...
...hat includes the <length>, <angle>, <time>, and <resolution> types. <percentage> a <percentage> represents a fraction of some other value, for example 50%. percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length. lengths the numeric type you will come across most frequently is <length>, for example 10
px (pixels) or 30em. there are two types of lengths used in css — relative and absolute. it's important to know the difference in order to understand how big things will become. absolute length units the following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size. unit name equivalent to c...
... two types of lengths used in css — relative and absolute. it's important to know the difference in order to understand how big things will become. absolute length units the following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size. unit name equivalent to cm centimeters 1cm = 96
px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96
px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in
px pixels 1
px = 1/96th of 1in most of these values are more useful when used for print, rather than screen output. for example we don...
...And 5 more matches
create fancy boxes - Learn web development
nds. it's possible to set several backgrounds on a single box. they are stacked on top of each other like layers. backgrounds can be either solid colors or images: solid color always fills the whole surface but images can be scaled and positioned. <div class="fancy">hi! i want to be fancy.</div> okay, let's have fun with backgrounds: .fancy { padding : 1em; width: 100%; height: 200
px; box-sizing: border-box; /* at the bottom of our background stack, let's have a misty grey solid color */ background-color: #e4e4d9; /* we stack linear gradients on top of each other to create our color strip effect. as you will notice, color gradients are considered to be images and can be manipulated as such */ background-image: linear-gradient(175deg, rgba(...
...que purpose of style. even if it is necessary, it's somewhat considered bad practice. one solution to avoid such pitfalls is to use css pseudo-elements. a cloud <div class="fancy">hi! i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150
px; height : 150
px; padding : 80
px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100
px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat. feel free to tweak this example to make a cloud that isn't flat at the bottom ;) */ border-radius: 100% ...
... /* we positionnate our pseudo-elements on the left and right sides of the box, but always at the bottom */ position: absolute; bottom : 0; /* this makes sure our pseudo-elements will be below the box content whatever happens. ...
...And 5 more matches
CSS basics - Learn web development
om the selector, each ruleset must be wrapped in curly braces. ({}) within each declaration, you must use a colon (:) to separate the property from its value or values. within each ruleset, you must use a semicolon (;) to separate each declaration from the next one. to modify multiple property values in one ruleset, write them separated by semicolons, like this: p { color: red; width: 500
px; border: 1
px solid black; } selecting multiple elements you can also select multiple elements and apply a single ruleset to all of them. separate multiple selectors by commas. for example: p, li, h1 { color: red; } different types of selectors there are many different types of selectors. the examples above use element selectors, which select all elements of a given type. but we can make ...
..., replacing the font-family assignment with your font-family selection from what will your website look like?. the property font-family refers to the font(s) you want to use for text. this rule defines a global base font and font size for the whole page. since <html> is the parent element of the whole page, all elements inside it inherit the same font-size and font-family. html { font-size: 10
px; /*
px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css comment. the browser ignores comments as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set f...
... as it renders the code. css comments are a way for you to write helpful notes about your code or logic. now let's set font sizes for elements that will have text inside the html body (<h1>, <li>, and <p>). we'll also center the heading. finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable. h1 { font-size: 60
px; text-align: center; } p, li { font-size: 16
px; line-height: 2; letter-spacing: 1
px; } adjust the
px values as you like. your work-in-progress should look similar to this: css: all about boxes something you'll notice about writing css: a lot of it is about boxes. this includes setting size, color, and position. most html elements on your page can be thought of as boxes sitting on...
...And 5 more matches
Advanced text formatting - Learn web development
d elements to the raw text in the input field so that it appears as a description list in the output field. you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50
px;"> </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: 100
px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. a light brown color.</textarea> <d...
...dth: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...drink that gets the world running in the morning. ...
...And 5 more matches
Images in HTML - Learn web development
ed the image located at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time. we would also like you to: add some alt text, and check that it works by misspelling the image url. ...
...cated at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time. we would also like you to: add some alt text, and check that it works by misspelling the image url. ...
.... set the image's correct width and height (hint: it is 200
px wide and 171
px high), then experiment with other values to see what the effect is. set a title on the image. if you make a mistake, you can always reset it using the reset button. ...
...And 5 more matches
Beginning our React todo list - Learn web development
is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...
... border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620
px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1
px; border-color: #d3d3d3; } .btn.toggle-btn[aria-press...
...r: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 49%; } .btn-group > * + * { margin-left: 0.8rem; } .label-wrapper { margin: 0; flex: 0 0 100%; text-align: center; } .visually-hidden { position: absolute !important; height: 1
px; width: 1
px; overflow: hidden; clip: rect(1
px 1
px 1
px 1
px); clip: rect(1
px, 1
px, 1
px, 1
px); white-space: nowrap; } [class*="stack"] > * { margin-top: 0; margin-bottom: 0; } .stack-small > * + * { margin-top: 1.25rem; } .stack-large > * + * { margin-top: 2.5rem; } @media screen and (min-width: 550
px) { .stack-small > * + * { margin-top: 1.4rem; } .stack-large > * + * { ...
...And 5 more matches
Getting started with Svelte - Learn web development
being a compiler, you can't just add a <script src="svelte.js"> tag to your page and import it into your app. you'll have to set up your development environment in order to let the compiler do its job. requirements in order to work with svelte you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and n
px (the node package runner). note that you can also use the yarn package manager in place of npm, but we'll assume you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial.
...al commands mentioned in this tutorial. gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both suitable. cmder is another very good and complete alternative. see command line crash course for more information on these, and on terminal commands in general. also see the following for more information: "what is npm" on nodejs.org "introducing n
px" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application. you can do that by visiting sveltejs/template on github or you can avoid having to download and unzip it and just use degit. to create your starter app template, run the following...
...e easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter app template is to just download the starter template application. you can do that by visiting sveltejs/template on github or you can avoid having to download and unzip it and just use degit. to create your starter app template, run the following terminal commands: n
px degit sveltejs/template moz-todo-svelte cd moz-todo-svelte npm install npm run dev note: degit doesn't do any kind of magic — it just lets you download and unzip the latest version of a git repo's contents. this is much quicker than using git clone because it will not download all the history of the repo, or create a complete local clone. after running npm run dev, svelte will compile and b...
...And 5 more matches
Handling common HTML and CSS problems - Learn web development
<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: 20
px; } div { clear: both; margin: 10
px; } body { width: 400
px; 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 c...
...with css, which has some styling provided by various css3 features: note: you can also see this example running live on github as button-with-fallback.html (also see the source code). the button has a number of declarations that style, but the two we are most interested in are as follows: button { ... ...
... css, which has some styling provided by various css3 features: note: you can also see this example running live on github as button-with-fallback.html (also see the source code). the button has a number of declarations that style, but the two we are most interested in are as follows: button { ... ...
...And 5 more matches
Examples of web and XML development using the DOM - Web APIs
} </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50
px; width: 500
px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50
px; width: 500
px;"> </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.borderwid...
...;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50
px; width: 500
px;"> </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: 5
px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <input type="button" value="make border 20
px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5
px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> exampl...
...note that the table itself has an onclick event handler that ought to display a message when the table is clicked. but the stopevent method has stopped propagation, and so after the data in the table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this. <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1
px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click. ev.stoppropagation(); alert("event propagation halted."); } function load() { elem = document.getelementbyid("tbl1"); elem.addeventlistener("click", stopevent, false); } </script> <...
...And 5 more matches
Element: overflow event - Web APIs
ments styled with overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...overflow != visible). it is a proprietary event specific to gecko (firefox). ...
...ry event specific to gecko (firefox). ...
...And 5 more matches
Element: underflow event - Web APIs
overflow is not set to visible. the counterpart overflow event is fired when overflow occurs. ...
...et to visible. the counterpart overflow event is fired when overflow occurs. ...
... event is fired when overflow occurs. ...
...And 5 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
(document), or window (window). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
...ow). the function receives as input a single parameter: an animationevent object describing the event which occurred. ...
... receives as input a single parameter: an animationevent object describing the event which occurred. ...
...And 5 more matches
HTMLImageElement.currentSrc - Web APIs
f the image currently visible in the <img> element represented by the htmlimageelement. this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties. currentsrc lets you determine which image from the set of provided images was selected by the browser. example in this example, two different sizes are provided for an image of a clock. ...
...e in the <img> element represented by the htmlimageelement. this is useful when you provide multiple image options using the sizes and/or htmlimageelement.srcset properties. currentsrc lets you determine which image from the set of provided images was selected by the browser. example in this example, two different sizes are provided for an image of a clock. one is 200
px wide and the other is 400
px wide. ...
...limageelement.srcset properties. currentsrc lets you determine which image from the set of provided images was selected by the browser. example in this example, two different sizes are provided for an image of a clock. one is 200
px wide and the other is 400
px wide. the sizes attribute is provided to indicate that the image should be drawn at 50% of the document width if the viewport is under 400
px wide; otherwise, the image is drawn at 90% width of the document. ...
...And 5 more matches
HTMLTextAreaElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 5 more matches
MediaStreamConstraints.audio - Web APIs
e provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...lls getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...a() that we require an audio track, but we don't care about any specifics beyond that. ...
...And 5 more matches
SVGCircleElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGEllipseElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGLineElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGRectElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGTSpanElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGTextElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
SVGTextPositioningElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 5 more matches
@media - CSS: Cascading Style Sheets
and only if the media query matches the device on which the content is being used. note: in javascript, the rules created using @media can be accessed with the cssmediarule css object model interface. syntax the @media at-rule may be placed at the top level of your code or nested inside any other conditional group at-rule. /* at the top level of your code */ @media screen and (min-width: 900
px) { article { padding: 1rem 3rem; } } /* nested within another conditional at-rule */ @supports (display: flex) { @media screen and (min-width: 900
px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media types media types describe the general category of a device. except when using the not or only...
...vailable added in media queries level 5. update how frequently the output device can modify the appearance of content added in media queries level 4. width width of the viewport including width of scrollbar accessibility concerns to best accommodate people who adjust a site's text size, use ems when you need a <length> for your media queries. both em and
px are valid units, but em works better if the user changes the browser text size. also consider using level 4 media queries to improve the user's experience. for example, prefers-reduced-motion to detect if the user has requested that the system minimize the amount of animation or motion it uses. security because media queries provide insights into the capabilities—and by extension, the featur...
...ame> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? ...
...And 5 more matches
Implementing image sprites in CSS - CSS: Cascading Style Sheets
ing background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced. note: when using http/2, it may in fact be more bandwidth-friendly to use multiple small requests. ...
...position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced. note: when using http/2, it may in fact be more bandwidth-friendly to use multiple small requests. ...
...width-friendly to use multiple small requests. implementation suppose an image is given to every item with class toolbtn: .toolbtn { background: url(myfile.png); display: inline-block; height: 20
px; width: 20
px; } a background position can be added either as two x, y values after the url()() in the background, or as background-position. ...
...And 5 more matches
box-shadow - CSS: Cascading Style Sheets
adius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
...is specified on the element with a box shadow, the box shadow takes on the same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
...he same rounded corners. the z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top). box-shadow generator is an interactive tool allowing you to generate a box-shadow. ...
...And 5 more matches
grid-template-rows - CSS: Cascading Style Sheets
defines the line names and track sizing functions of the grid rows. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...nctions of the grid rows. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 5 more matches
mask-position - CSS: Cascading Style Sheets
the mask-position css property sets the initial position, relative to the mask position layer set by mask-origin, for each defined mask image. /* keyword values */ mask-position: top; mask-position: bottom; mask-position: left; mask-position: right; mask-position: center; /* <position> values */ mask-position: 25% 75%; mask-position: 0
px 0
px; mask-position: 10% 8em; /* multiple values */ mask-position: top right; mask-position: 1rem 1rem, center; /* global values */ mask-position: inherit; mask-position: initial; mask-position: unset; syntax one or more <position> values, separated by commas. values <position> one to four values representing a 2d position regarding the edges of the element's box. relative or absolute offsets can be given. note that the position can be set outsi...
...ormal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...
...re <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? ...
...And 5 more matches
minmax() - CSS: Cascading Style Sheets
es a size range greater than or equal to min and less than or equal to max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ater than or equal to min and less than or equal to max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...n and less than or equal to max. it is used with css grids. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 5 more matches
repeating-radial-gradient() - CSS: Cascading Style Sheets
ent it applies to. because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type. ...
..., they can only be used where <image>s can be used. for this reason, repeating-radial-gradient() won't work on background-color and other properties that use the <color> data type. ...
...st-corner | farthest-side and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
...And 5 more matches
right - CSS: Cascading Style Sheets
css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ right: 3
px; right: 2.4em; /* <percentage>s of the width of the containing block */ right: 10%; /* keyword value */ right: auto; /* global values */ right: inherit; right: initial; right: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the right edge of the containing block. for relatively positioned elements, t...
...ied 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: 100
px; height: 100
px; background-color: #ffc7e4; position: relative; top: 20
px; left: 20
px; } #absolute { width: 100
px; height: 100
px; background-color: #ffd7c2; position: absolute; bottom: 10
px; right: 20
px; } result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing s...
...l not stretch or shrink to meet meet both. when the position of the element is overspecified, the precende is based on the container's direction: the left will take precendence if the container's direction is left-to-right. the right will take precedence if the container's direction is right-to-left. ...
...And 5 more matches
scroll-snap-destination - CSS: Cascading Style Sheets
the scroll-snap-destination css property defines the position in x and y coordinates within the scroll container's visual viewport which element snap points align with. /* <position> value */ scroll-snap-destination: 400
px 600
px; /* global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. ...
...x; /* global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
.../* global values */ scroll-snap-destination: inherit; scroll-snap-destination: initial; scroll-snap-destination: unset; syntax values <position> specifies the offset of the snap destination from the start edge of the scroll container’s visual viewport. the first value gives the x coordinate of the snap destination, the second value its y coordinate. ...
...And 5 more matches
translate3d() - CSS: Cascading Style Sheets
ℙ3 this transformation applies to the 3d space and can't be represented on the plane. a translation is not a linear transformation in ℝ3 and can't be represented using a cartesian-coordinate matrix. ...
... this transformation applies to the 3d space and can't be represented on the plane. a translation is not a linear transformation in ℝ3 and can't be represented using a cartesian-coordinate matrix. ...
...the plane. a translation is not a linear transformation in ℝ3 and can't be represented using a cartesian-coordinate matrix. ...
...And 5 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
m requirements</summary> <p>requires a computer running an operating system. the computer must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box. ...
... running an operating system. the computer must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box. ...
...ter must have some memory and ideally some kind of long-term storage. an input device as well as some form of output device is recommended.</p> </details> this results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box. css details { font: 16
px "open sans", calibri, sans-serif; width: 620
px; } details > summary { padding: 2
px 6
px; width: 15em; background-color: #ddd; border: none; box-shadow: 3
px 3
px 4
px black; cursor: pointer; } details > p { border-radius: 0 0 10
px 10
px; background-color: #ddd; padding: 2
px 6
px; margin: 0; box-shadow: 3
px 3
px 4
px black; } this css creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents. html <details> <summary>s...
...And 5 more matches
Using templates and slots - Web Components
) method. and because we are appending its contents to a shadow dom, we can include some styling information inside the template in a <style> element, which is then encapsulated inside the custom element. this wouldn't work if we just appended it to the standard dom. so for example: <template id="my-paragraph"> <style> p { color: white; background-color: #666; padding: 5
px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79). adding flexibility with slots so far so good, but the element isn't...
...g live also). ...
...also). ...
...And 5 more matches
Table Layout Strategy - Archive of obsolete content
ty is distributed over a large number of subroutines as shown in the chart below. the words the table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as
px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc. and the desired width - des the width the content could fill without any linebreaks. cells can be members of colspans. these colspans have to distribute their space to the columns they include. this information is hold in the adjusted width's. due to this there are 10 width informations for every column. min_con...
...these informations are very often conflicting. for instance one cell could have a large min width,the next could have a specified fixed width and another a specified pct width. for a given width type the maximum wins. special cases note: the following examples are not shown correctly due to technical constraints on wiki content. you can help ...
...are not shown correctly due to technical constraints on wiki content. you can help by editing this page and adding screenshots or links to example pages. width = "0*" assume that you would like to give all the space to the second column in a table. ...
...And 4 more matches
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
ng fish with the cards set up to float, the next step was to place the images appropriately. this involved floating the image inside the floated div. it just seemed like a fish cam page should have a lot of floating for some reason. i also added a border to the image, so that it would have a nice frame. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; border: 1
px solid #339;} that done, it was time to style the fish names. these are enclosed in h3 elements, so the field was pretty wide open in terms of what we could do. since the image was floated, any background or border we set on the h3 would "slide under" the image; this is an expected effect with floated elements. rather than try to fight it or push the image below the h3's element box, i let the ...
...nts. rather than try to fight it or push the image below the h3's element box, i let the image mostly overlap the h3, but with a slight offset. i then set up a thicker double border on the left, a one-pixel border the rest of the way around, and set the background to match the rest of the design. thus: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; margin: 4
px 0 0 0; border: 1
px solid #339;} div.card h3 {border: 1
px solid #339; border-left: 5
px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} finishing the style adding the background to the heading containing the name of the fish created three problems: the double border was completely covered up by the image. the text of the h3 was basically touch...
... be a matter of relatively positioning the floated image, and then giving it a z-index value. in order to create visual appeal, i decided to offset the top let corners of the fish image and fish name. with just a few simple margin and padding changes, this was possible. div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} div.card img {float: left; position: relative; z-index: 10; margin: 4
px 0 0 0; border: 1
px solid #339;} div.card h3 {margin: 0 0 0 4
px; padding: 0.2em 0 1
px 150
px; border: 1
px solid #339; border-left: 5
px double #339; background: #eec url(body-bg-tan.jpg) bottom left no-repeat fixed; color: #339;} note how the image is pushed downward four pixels, while the h3 is pushed rightward four pixels. at the same time, the heading's padding was set to that it had 150 p...
...And 4 more matches
Looping code - Learn web development
n to see different random sets): hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>random canvas circles</title> <style> html { width: 100%; height: inherit; background: #ddd; } canvas { display: block; } body { margin: 0; } button { position: absolute; top: 5
px; left: 5
px; } </style> </head> <body> <button>update</button> <canvas></canvas> <script> const btn = document.queryselector('button'); const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); let width = document.documentelement.clientwidth; let height = document.documentelement.clientheight; canvas.width = w...
...ve not yet entered the end condition. so be careful with this. you can start writing your code in a comment to deal with this issue and remove the comment after you finish. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. ...
... the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. ...
...And 4 more matches
Making decisions in your code — conditionals - Learn web development
a simple theme chooser where the styling for the site is applied using a ternary operator. <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10
px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ? update('black','white') : update('white','black'); } here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a website title. we also have a function called update(), whic...
...le months together into a single condition; many of them share the same number of days. think about which number of days is the most common, and use that as a default value. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. ...
...ember">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <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: 400
px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++) { ...
...And 4 more matches
Manipulating documents - Learn web development
nto elements you want to dynamically style. this is done with the htmlelement.style property, which contains inline styling information for each element in the document. you can set properties of this object to directly update element styles. ...
...amically style. this is done with the htmlelement.style property, which contains inline styling information for each element in the document. you can set properties of this object to directly update element styles. ...
...backgroundcolor versus background-color). make sure you don't get these mixed up, otherwise it won't work. ...
...And 4 more matches
Arrays - Learn web development
hange the line just below // number 5 so that the itemtext variable is made equal to "current item name — $current item price", for example "shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. this is just simple string concatenation, which should be familiar to you. ...
...on the invoice. this is just simple string concatenation, which should be familiar to you. ...
...in an animated scene for example, you might have an array of objects representing the back...
...And 4 more matches
Scroll-linked effects
or jittery — in short, something we want to avoid. 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: 5000
px" onscroll="document.getelementbyid('toolbar').style.top = math.max(100, window.scrolly) + '
px'"> <div id="toolbar" style="position: absolute; top: 100
px; width: 100
px; height: 20
px; background-color: green"></div> </body> this implementation of sticky positioning relies on the scroll event listener to reposition the "toolbar" div. as the scroll event listener runs in the javascript on the brows...
... scroll, and so the div will not stay visually fixed as intended. instead, it will move with the user's scrolling, and then "snap" back into position when the scroll event handler runs. this constant moving and snapping will result in a jittery visual effect. one way to implement this without the scroll event listener is to use the css property designed for this purpose: <body style="height: 5000
px"> <div id="toolbar" style="position: sticky; top: 0
px; margin-top: 100
px; width: 100
px; height: 20
px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a parti...
...0
px; background-color: green"></div> </body> this version works well with asynchronous scrolling because position of the "toolbar" div is updated by the browser as the user scrolls. example 2: scroll snapping below is an implementation of scroll snapping, where the scroll position snaps to a particular destination when the user's scrolling stops near that destination. ...
...And 4 more matches
Using the CSS Typed Object Model - Web APIs
csskeywordvalue. if the value is numeric, a cssunitvalue is returned. csskeywordvalue is a class that defines keywords like inherit, initial, unset, and other strings you don't quote, such as auto and grid. this subclass gives you a value property via csskeywordvalue.value. cssunitvalue is returned if the value is a unit type. it is a class that defines numbers with units of measurement like 20
px, 40%, 200ms, or 7. it is returned with two properties: a value and a unit. with this type we can access the numeric value — cssunitvalue.value — and its unit — cssunitvalue.unit. let's write a plain paragraph, apply no styles, and inspect a few of its css properties by returning a table with the unit and value: <p> this is a paragraph with some content. open up this example in codepen ...
...ment.createelement( 'td' ); cssunit.appendchild( document.createtextnode( allcomputedstyles.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0
px margin-bottom 16
px font-size 16
px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <length> unit returned is
px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', ...
... and the unitless <number> unit is number. we didn't declare a width or a height for the paragraph, both of which default to auto and therefore return a csskeywordvalue instead of a cssunitvalue. csskeywordvalues do not have a unit property, so in these cases our get().unit returns undefined. had the width or height been defined in a <length> or <percent>, the cssunitvalue unit would have been
px or percent respectively. there are other types available: an <image> will return a cssimagevalue. a <color> would return a cssstylevalue. a transform returns a csstransformvalue. a custom property returns a cssunparsedvalue. you can use a cssunitvalue or csskeywordvalue to create other objects. for example, the parameters for a csspositionvalue is one to two cssunitvalues or csskeywordva...
...And 4 more matches
GlobalEventHandlers.onmouseup - Web APIs
receives a mouseevent object as its sole argument. example in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
... in this example, a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
..., a piece of "toast" hides when you click down with the mouse, and reappears when you release. it uses the onmousedown and onmouseup event handlers. ...
...And 4 more matches
GlobalEventHandlers.ontransitioncancel - Web APIs
ers the transitioncancel event to fire. 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. ...
...ncel event to fire. 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. ...
...es 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. ...
...And 4 more matches
HTMLVideoElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 4 more matches
SVGAnimateElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGAnimateMotionElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGAnimateTransformElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGDefsElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGGElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGImageElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGLinearGradientElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGPathElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGPolygonElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGPolylineElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGRadialGradientElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGTextContentElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
SVGTextPathElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 4 more matches
Generating HTML - Web APIs
a template matching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... ...
...emplate matching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... ...
... matching the root node of the xml document is created and used to create the basic structure of the html page. figure 4 : creating the basic html document xsl stylesheet (example2.xsl): ... ...
...And 4 more matches
ARIA: switch role - Accessibility
function handleclickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
...lickevent(evt) { let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
...{ let el = evt.target; if (el.getattribute("aria-checked") == "true") { el.setattribute("aria-checked", "false"); } else { el.setattribute("aria-checked", "true"); } } css the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...
...And 4 more matches
Color contrast - Accessibility
here */ } .good { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
... { background-color: #fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
...#fae6fa; } .bad { background-color: #400064; } both pieces of text have their default black color. ...
...And 4 more matches
Stacking context example 3 - CSS: Cascading Style Sheets
in the source code you will see that second-level and third level menus are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
... are made of several divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
...ral divs contained in an absolutely positioned container. this is useful to group and position all of them at once. ...
...And 4 more matches
backface-visibility - CSS: Cascading Style Sheets
</div> </div> <p> the three back faces (2, 4, 5) are hidden. ...
... </div> <p> the three back faces (2, 4, 5) are hidden. ...
...> the three back faces (2, 4, 5) are hidden. ...
...And 4 more matches
background-size - CSS: Cascading Style Sheets
vered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency/translucency. ...
.../* keyword values */ background-size: cover; background-size: contain; /* one-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12
px; background-size: auto; /* two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6
px; background-size: auto auto; /* multiple backgrounds */ background-size: auto, auto; /* not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6
px, auto, contain; /* global values */ background-size: inherit; background-size: initial; background-size: unset; the background-size property is specified in one of the following ways: using the keyword values con...
...auto component, or is specified using only a width value (for example, background-size: 50%). rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the css3 background-size specification and with the css3 image values gradient specification. ...
...And 4 more matches
conic-gradient() - CSS: Cascading Style Sheets
esented by the conic gradient will not be accessible to screen reader users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. ...
...nic gradient will not be accessible to screen reader users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. ...
...rpose, it is better to describe it semantically in the document. ...
...And 4 more matches
grid-template-columns - CSS: Cascading Style Sheets
he line names and track sizing functions of the grid columns. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...he grid columns. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...teractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 4 more matches
grid-template - CSS: Cascading Style Sheets
the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ctive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...es and send us a pull request. ...
...And 4 more matches
inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
... the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...And 4 more matches
inset-inline - CSS: Cascading Style Sheets
-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...ne css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
... end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. ...
...And 4 more matches
margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. ...
... the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. ...
...h the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-inline: 10
px 20
px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10
px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation. constituent properties thi...
...And 4 more matches
outline - CSS: Cascading Style Sheets
ect, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: outline-color outline-style outline-width syntax /* style */ outline: solid; /* color | style */ outline: #f66 dashed; /* style | width */ outline: inset thick; /* color | style | width */ outline: green solid 3
px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the outline will be invisible for many elements if its style is not defined. this is because the style defaults to none. a notable exception is input elements, which are given default...
... recommendation no change. css level 2...
... recommendation no change. css level 2 (revision 1)the definition ...
...And 4 more matches
place-items - CSS: Cascading Style Sheets
valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>? ...
...s of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>? ...
...ies of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>? ...
...And 4 more matches
scroll-margin-inline-end - CSS: Cascading Style Sheets
ular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-inline-end: 10
px; scroll-margin-inline-end: 1em; /* global values */ scroll-margin-inline-end: inherit; scroll-margin-inline-end: initial; scroll-margin-inline-end: unset; values <length> an outset from the inline end edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> exam...
...four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. 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. ...
...-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. 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. ...
...And 4 more matches
scroll-margin-inline-start - CSS: Cascading Style Sheets
ar bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-inline-start: 10
px; scroll-margin-inline-start: 1em; /* global values */ scroll-margin-inline-start: inherit; scroll-margin-inline-start: initial; scroll-margin-inline-start: unset; values <length> an outset from the inline start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <len...
... four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. 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. ...
...y-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. 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. ...
...And 4 more matches
scroll-margin-inline - CSS: Cascading Style Sheets
the scroll-margin-inline shorthand property sets the scroll margins of an element in the inline dimension. constituent properties this property is a shorthand for the following css properties: scroll-margin-inline-end scroll-margin-inline-start syntax /* <length> values */ scroll-margin-inline: 10
px; scroll-margin-inline: 1em .5em ; /* global values */ scroll-margin-inline: inherit; scroll-margin-inline: initial; scroll-margin-inline: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-alig...
...four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. 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. ...
...-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block. 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. ...
...And 4 more matches
scroll-margin - CSS: Cascading Style Sheets
ored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: scroll-margin-bottom scroll-margin-left scroll-margin-right scroll-margin-top syntax /* <length> values */ scroll-margin: 10
px; scroll-margin: 1em .5em 1em 1em; /* global values */ scroll-margin: inherit; scroll-margin: initial; scroll-margin: unset; values <length> an outset from the corresponding edge of the scroll container. description you can see the effect of scroll-margin by scrolling to a point partway between two of the "pages" of the example's content. the value specified for scroll-margin determines ...
... four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. 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. ...
...y-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block. 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. ...
...And 4 more matches
scale3d() - CSS: Cascading Style Sheets
ian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...And 4 more matches
<input type="file"> - HTML: Hypertext Markup Language
regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. including the multiple attribute, as shown above, specifies that multiple files can be cho...
...accept anything that smells like an ms word document. 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: 10
px; } this produces a similar-looking output to the previous example: note: you can find this example on github too — see the source code, and also see it running live. it may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the accept value (the exact nature differs across browsers and operating...
...rt/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: 580
px; background: #ccc; margin: 0 auto; padding: 20
px; border: 1
px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10
px; list-style-type: none; border: 1
px solid black; } form img { height: 64
px; order: 1; } form p { line-height: 32
px; padding-left: 10
px; } form label, form...
...And 4 more matches
<input type="radio"> - HTML: Hypertext Markup Language
<button type="submit">submit</button> </div> </fieldset> </form> there's not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way. ...
...ton> </div> </fieldset> </form> there's not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way. ...
...ieldset> </form> there's not much new to note here except for the addition of <fieldset> and <legend> elements, which help to group the functionality nicely and in a semantic way. ...
...And 4 more matches
<input type="text"> - HTML: Hypertext Markup Language
r database. a note on styling there are useful pseudo-classes available for styling form elements to help the user see when their values are valid or invalid. these are :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) mark next to inputs containing valid values, and a cross (x) next to inputs containing invalid values. div { margin-bottom: 10
px; position: relative; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some in...
...ery well. making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10
px; position: relative; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } this renders like so: if you try to submit the form with no search term entered into it, the browser will show an error message. input value length you can specify a...
...le below requires that the entered value be 4–8 characters in length. <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="10" placeholder="username" minlength="4" maxlength="8"> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10
px; position: relative; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). if you ...
...And 4 more matches
<slot> - HTML: Hypertext Markup Language
rface htmlslotelement attributes this element includes the global attributes. name the slot's name. a named slot is a <slot> element with a name attribute. ...
... htmlslotelement attributes this element includes the global attributes. name the slot's name. a named slot is a <slot> element with a name attribute. ...
... attributes. name the slot's name. a named slot is a <slot> element with a name attribute. ...
...And 4 more matches
Mobile first - Progressive web apps (PWAs)
e; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480
px. ...
...would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 480
px. ...
...for narrower layouts, but it doesn't work very well when you get wider than about 480
px. ...
...And 4 more matches
panel - Archive of obsolete content
how" event being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. ...
...ent being sent from the // main add-on code. it means that the panel's about // to be shown. // // set the focus to the text area so the user can // just start typing. ...
...> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options. ...
...And 3 more matches
In-Depth - Archive of obsolete content
ansparent; -moz-border-bottom-colors: threeddarkshadow threedshadow transparent; -moz-border-left-colors: threeddarkshadow threedshadow transparent; -moz-border-top-colors see -moz-border-bottom-colors above. -moz-border-left-colors see -moz-border-bottom-colors above. -moz-border-right-colors see -moz-border-bottom-colors above. -moz-border-radius rounds the corners of a box. if you specify one
px/% value, it will apply it to all the corners, or you can specify 4 values (separated by a space) and have each corner different. -moz-border-radius-topleft the same as -moz-border-radius but only applies to the top left corner. an example of where this would be used is on tabs. -moz-border-radius-topright the same as -moz-border-radius but only applies to the top right corner. an example of where...
...and right to left. this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar. values: normal, reverse -moz-image-region this is useful for dividing up an image into multiple smaller images. it uses a rect() object to determine the clipping region. check out the section on organizing images for more information. example: -moz-image-region: rect(168
px 69
px 189
px 46
px); -moz-opacity makes boxes semi-transparent. it takes a decimal value, 0.00 is invisible and 1.00 is totally visible. how do i know what to modify? now that you've got everything extracted and you know how to modify items, you might be wondering, how do i know where everything is? well there is an easy way to find out - using the dom inspector. if you didn't install it when you f...
...here are regions for the different states of #back-button. change those to match your new image as well. just continue this process for everything that you wish to change and you'll have a new skin in no time. organizing images to organize all of your icons you can store them all in one image and then tell mozilla which portions to use. this is done using the -moz-image-region style. ...
...And 3 more matches
Tree Widget Changes - Archive of obsolete content
mprovements you can now specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. ...
... specify the cursor to use for a cell using the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...
... the css cursor property. treechildren::-moz-tree-cell-text { cursor: pointer; } this allows you to create separate cursors for cells. the :-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. ...
...And 3 more matches
Adding more elements - Archive of obsolete content
nts to our find files example we will add some more elements to the find files dialog now. first, we will add the capability to search for other information such as the file size and date. <hbox> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> </menulist> <spacer style="width: 10
px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="width: 10
px;"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </hbox> two drop down boxes have been added to the dialog. a spacer has been added in between each element to separate them. these spacers have been given an ...
...other components do not. you will also notice that the label was removed. if you resize the window vertically, the elements do not change size. this is because they are inside horizontal boxes. in might be more appropriate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal boxes. ...
...riate if the find and cancel buttons always stayed along the bottom of the window. this is easy to do by adding a spacer in between the two horizontal boxes. ...
...And 3 more matches
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
cit grid. the implicit grid is the grid created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...d created automatically due to content being added outside of the tracks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...acks defined. in the example below i have created an explicit grid of three columns and two rows. the third row on the grid is an implicit grid row track, formed due to their being more than the six items which fill the explicit tracks. ...
...And 3 more matches
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
rectangular in nature; it is not possible to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...ble to create, for example, a t- or l-shaped grid area. in the example below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...ple below i have a grid container with two grid items. i have named these with the grid-area property and then laid them out on the grid using grid-template-areas. this creates two grid areas, one covering four grid cells, the other two. ...
...And 3 more matches
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20
px-gaps between row tracks. ...
... gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20
px-gaps between row tracks. ...
... gutters or alleys are spacing between content tracks. these can be created in css grid layout using the grid-column-gap, grid-row-gap, or grid-gap properties. in the example below we have a three-column and two-row track grid, with 20-pixel gaps between column tracks and 20
px-gaps between row tracks. ...
...And 3 more matches
Fundamental CSS comprehension - Learn web development
will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.) beware! there are two errors in the provided rulesets. using any technique that you know, track these down and fix them before moving on. new rulesets you need to write: write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50
px (including a content height of 30
px and padding of 10
px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0. to stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific...
...adding of 10
px on all sides.) but express it in ems. the default margin applied to the <h2> and <p> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0. to stop the image from spilling out of the main business card content (the <article> element), we need to give it a specific height. set the <article>'s height to 120
px, but expressed in ems. also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too. write a ruleset that gives the <h2> an effective font size of 20
px (but expressed in ems) and an appropriate line height to place it in the center of the header's content box. recall from earlier that the content box he...
...n ems. also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too. write a ruleset that gives the <h2> an effective font size of 20
px (but expressed in ems) and an appropriate line height to place it in the center of the header's content box. recall from earlier that the content box height should be 30
px — this gives you all the numbers you need to calculate the line height. ...
...And 3 more matches
Organizing your CSS - Learn web development
ing that we want to change. avoid overly-specific selectors if you create very specific selectors you will often find that you need to duplicate chunks of your css to apply the same rules to another element. for example, you might have something like the below selector, which applies the rule to a <p> with a class of box inside an <article> with a class of main. ...
...ide an <article> with a class of main. article.main p.box { border: 1
px solid #ccc; } if you then wanted to apply the same rules to something outside of main, or to something other than a <p>, you would have to add another selector to these rules or create a whole new ruleset. instead, you could use the selector .box to apply your rule to any element that has the class box: .box { border: 1
px solid #ccc; } there will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice. break large stylesheets into multiple smaller ones in particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that ...
...nch of rules for the component parts, then a class called list-item with almost the same rules as the comment class except for some tiny differences. the differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not. .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1
px solid grey; } .comment .content { font-size: .8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1
px solid grey; } .list-item .content { font-size: .8rem; } in oocss, you would create one pattern called media that would have all of the common css for both patterns — a base class for things that are generally the shape of the media object. then we'd ...
...And 3 more matches
Styling tables - Learn web development
placing the following line of html inside your <head>: <link href="style.css" rel="stylesheet" type="text/css"> spacing and layout the first thing we need to do is sort out the spacing/layout — default table styling is so cramped! ...
...ault table styling is so cramped! to do this, add the following css to your style.css file: /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3
px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20
px; } the most important parts to note are as follows: a table-layout value of fixed is generally a good idea to set on your table, as it makes the table behave a bit more predictably by default. normally, table columns tend to be sized according to how much content they contain, which produces some strange results. with table-layout: fixed, you can size your columns according to the width of th...
...we've also set our custom font on the headings inside the <thead> and <tfoot> elements, ...
...And 3 more matches
TypeScript support in Svelte - Learn web development
hapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode. repl unfortunately, typescript support is not yet available in the repl. typescript: optional static typing for javascript typescript is a superset of javascript that provides features such as optional static typing, classes, interfaces, and generics. the ...
... it's your decision. in the following sections we hope to give you more evidence to make up your mind about it. creating a svelte typescript project from scratch you can start a new svelte typescript project using the standard template. all you have to do is run the following terminal commands (run them somewhere where you are storing your svelte test projects — it creates a new directory): n
px degit sveltejs/template svelte-typescript-app cd svelte-typescript-app node scripts/setuptypescript.js this creates a starter project that includes typescript support, which you can then modify as you wish. then you'll have to tell npm to download dependencies and start the project in development mode, like we usually do: npm install npm run dev adding typescript support to an existing sv...
... typescript support to an existing svelte project you can follow these instructions. alternatively, you can download the setuptypescript.js file to a scripts folder inside your project's root folder, and then run node scripts/setuptypescript.js. you can even use degit to download the script. that's what we will do to start porting our application to typescript. ...
...And 3 more matches
Deployment and next steps - Learn web development
e next chapter, where we will look at different options for deploying our svelte applications, further resources, and more. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode. compiling our app so far we've been running our app in development mode with npm run dev. as we saw earlier, this instruction tells svelte to compile our components and javascript files into a public/build/bundle.js file and all the css sections of our components in...
...ctory now. you might get a warning, but you can ignore this for now. our whole app is now just 21 kb — 8.3 kb when gzipped. there are no additional runtimes or dependencies to download, parse, execute, and keep running in memory. svelte analyzed our components and compiled the code to vanilla javascript. a look behind the svelte compilation process by default, when you create a new app with n
px degit sveltejs/template my-svelte-project, svelte will use rollup as the module bundler. note: there is also an official template for using webpack and also many community-maintained plugins for other bundlers. in the file package.json you can see that the dev and start scripts are just calling rollup: "scripts": { "build": "rollup -c", "dev": "rollup -c -w", "start": "sirv public" }, ...
...svelte apps. deploying with vercel one of the easiest ways to deploy a svelte application is using vercel. vercel is a cloud platform specifically tailored for static sites, which has out-of-the-box support for most common front-end tools, svelte being one of them. to deploy our app, follow these steps. register for an account with vercel. ...
...And 3 more matches
The Firefox codebase: CSS Guidelines
optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a comment). the overriding css section contains more information about this. avoid magic numbers; prefer automatic sizing or alignment methods. some examples to avoid: absolutely positioned elements hardcoded values such as: vertical-align: -2
px; . the reason you should avoid such "hardcoded" values is that, they don't necessarily work for all font-size configurations. avoid setting styles in javascript. it's generally better to set a class and then specify the styles in css. classlist is generally better than classname. there's less chance of overwriting an existing class. only use generic selectors such as :last-child, when it ...
...ing your own. also, it is good practice to introduce a common class when the new element you are styling reuses some styles from another element, this allows the maintenance cost and the amount of code duplication to be reduced. formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-gradient(to bottom, black 1
px, rgba(255,255,255,0.2) 1
px) always add a space before !important. omit units on 0 values do this: margin: 0; not this: margin: 0
px; use expanded syntax it is often harder to understand what the shorthand is doing and the shorthand can also hide some unwanted default values. it is good to privilege expanded syntax to make your intentions explicit. do this: border-color: re...
... use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right. example: use margin-inline-start: 3
px; instead of margin-left: 3
px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left/right}-radius are border-{start/end}-{start/end}-radius when there is no special rtl-aware property available, use the pseudo :...
...And 3 more matches
Creating localizable web applications
iv class="tut_didyouknow"> <img src="/static/img/question-64.png" class="tut_icon"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>»</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> snippet 2. ...
...ef=\"%s\">find out how!</a>»</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> snippet 2. good: css: div.tut_didyouknow { background: url(/static/img/question-64.png) no-repeat 0 0; padding-left: 64
px; } html[dir='rtl'] div.tut_didyouknow { background-image: url(/static/img/question-64.png); background-position: 100% 0; padding-left: 0; padding-right: 64
px; } html/php: <div class="tut_didyouknow"> <?printf (_("did you know you can test a persona before you submit it? <b><a href=\"%s\">find out how!</a>»</b>"), $locale_conf->url('/demo_create_3#test'));?> </div> notice that the icon has been moved to css, so that it doesn't sit in a <img/> element. this is generally considered a good practice for decorative graphics. don't ...
...lement. this is generally considered a good practice for decorative graphics. don't use images as buttons instead, use <button/> and style it with css. image 1. bad: snippet 1. ...
...And 3 more matches
nsIContentView
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) see working with content views for details on how to use this api. note: currently, only <frame> and <iframe> elements are handled as content views. support for using this api for all scrollable elements is coming; see bug 618975 for details. method overview void scrollby(in float dx
px, in float dy
px); void scrollto(in float x
px, in float y
px); void setscale(in float xscale, in float yscale); attributes attribute type description contentheight float read only. contentwidth float dimensions of scrolled content in chrome-document css pixels. read only. id nscontentviewid id that can be used in c...
... read only. viewportheight float height of the viewport in chrome-document css pixels. read only. viewportwidth float width of the viewport in chrome-document css pixels. read only. methods scrollby() scrolls the content view by the specified number of chrome-document css pixels along each axis. fails if the view isn't valid. void scrollby( in float dx
px, in float dy
px ); parameters dx
px the number of css pixels to scroll on the x axis; specify a positive value to scroll to the right or a negative value to scroll to the left. dy
px the number of css pixels to scroll on the y axis; specify a positive value to scroll down or a negative value to scroll up. scrollto() scrolls the content view to the specified position, in chrome-document ...
... setscale() sets the content view's scale for each axis. ...
...And 3 more matches
CDATASection - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="331" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75"...
...And 3 more matches
GlobalEventHandlers.ontransitionend - Web APIs
ffects, to allow chaining of reactions. 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. ...
...ining of reactions. 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. ...
...es 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. ...
...And 3 more matches
HTMLAnchorElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLAreaElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLAudioElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLBRElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLBaseElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLBodyElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLButtonElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLCanvasElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLDListElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLDataElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLDivElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLEmbedElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLFieldSetElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLFormElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLHRElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLHeadElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLHeadingElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLHtmlElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLIFrameElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLLIElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLLabelElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLLegendElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLLinkElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMapElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMediaElement.onencrypted - Web APIs
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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMediaElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMetaElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLMeterElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLModElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLOListElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLObjectElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLOptGroupElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLOptionElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLOutputElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLParagraphElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLParamElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLPictureElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLPreElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLProgressElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLQuoteElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLScriptElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLSelectElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLShadowElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLSourceElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLSpanElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLStyleElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableCaptionElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableCellElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableColElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableRowElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTableSectionElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTemplateElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTimeElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTitleElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLTrackElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLUListElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
HTMLUnknownElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 3 more matches
MediaStreamConstraints.video - Web APIs
ple value of true for the video property. this tells getusermedia() that we require a video track, but we don't care about any specifics beyond that. ...
...a() that we require a video track, but we don't care about any specifics beyond that. ...
...uire a video track, but we don't care about any specifics beyond that. ...
...And 3 more matches
SVGAnimationElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGClipPathElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGCursorElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGDescElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEBlendElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEConvolveMatrixElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEDisplacementMapElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEDistantLightElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEFuncAElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEFuncBElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEFuncGElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEFuncRElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEGaussianBlurElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEMergeNodeElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFEPointLightElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGFESpotLightElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGForeignObjectElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGGeometryElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGGradientElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGGraphicsElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGMPathElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGMaskElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGMetadataElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGSVGElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGScriptElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGSetElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGStopElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGStyleElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGSwitchElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGTitleElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
SVGUseElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 3 more matches
Window.devicePixelRatio - Web APIs
n in a <canvas> a <canvas> can appear too blurry on retina screens. use window.devicepixelratio to determine how much extra pixel density should be added to allow for a sharper image. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // set display size (css pixels). var size = 200; canvas.style.width = size + "
px"; canvas.style.height = size + "
px"; // set actual size in memory (scaled to account for extra pixel density). var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas. canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels. ctx.scale(scale, scale); ctx.fillstyle = "#bada55"; ctx.fill...
...ry (scaled to account for extra pixel density). var scale = window.devicepixelratio; // change to 1 on retina screens to see blurry canvas. canvas.width = math.floor(size * scale); canvas.height = math.floor(size * scale); // normalize coordinate system to use css pixels. ...
...o see when the device resolution changes, so that we can check the value of devicepixelratio to handle any updates we need to. javascript the javascript code creates the media query that monitors the device resolution and checks the value of devicepixelratio any time it changes. ...
...And 3 more matches
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
color. syntax ::-webkit-meter-optimum-value specifications not part of any standard. ...
...or. syntax ::-webkit-meter-optimum-value specifications not part of any standard. ...
...syntax ::-webkit-meter-optimum-value specifications not part of any standard. ...
...And 3 more matches
:invalid - CSS: Cascading Style Sheets
rm that colors elements green when they validate and red when they don't. ...
...lements green when they validate and red when they don't. ...
...idate and red when they don't. ...
...And 3 more matches
Resizing background images with background-size - CSS: Cascading Style Sheets
we want (for some reason likely involving horrifyingly bad site design) to tile four copies of this image into a 300x300-pixel element. to do this, we can use a fixed background-size value of 150 pixels. html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150
px; width: 300
px; height: 300
px; border: 2
px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300
px 150
px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x30...
... stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300
px 150
px; the result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background. here we scale a 32x32 pixel favicon to 300x300 pixels: .square2 { background-image: url(favicon.png); background-size: 300
px; width: 300
px; height: 300
px; border: 2
px solid; text-shadow: white 0
px 0
px 2
px; font-size: 16
px; } as you can see, the css is actually essentially identical, save the name of the image file. special values: "contain" and "cover" besides <length> values, the background-size css property offers two special size values, contain and cover. let's take a look at these. contain the cont...
...e is as large as possible while not exceeding the length of the corresponding side of the container. try resizing the example below to see this in action. 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: 160
px; height: 160
px; border: 2
px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container. try resizing the example below to see this in action. html <div class="bgsizec...
...And 3 more matches
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
cond. margin shorthands as we can now target both sides of a box — either both inline sides or both block sides — there are new shorthands available, margin-inline and margin-block, which accept two values. the first value will apply to the start of that dimension, the second to the end. if you only use one value it is applied to both. in a horizontal writing mode this css would apply a 5
px margin to the top of the box and a 10
px margin to the bottom. .box { margin-block: 5
px 10
px; } note: the shorthand properties margin-inline and margin-block shipped in firefox 66. as these are new properties check browser support before using. padding examples the mapped padding properties of padding-inline-start, padding-inline-end, padding-block-start, and padding-inline-end can be used...
... notice how the padding stays in the same place for the first box, but switches around to follow the text direction in the second. padding shorthands as with margin, there are two-value shorthands for padding — padding-inline and padding-block — which allow you to set the padding of the two inline, and two block dimensions, respectively. in a horizontal writing-mode this css would apply 5
px of padding to the top of the box and 10
px of padding to the bottom: .box { padding-block: 5
px 10
px; } note: the shorthand properties padding-inline and padding-block shipped in firefox 66. as these are new properties check browser support before using. border examples the border properties are the main reason that logical properties and values seems to have so many properties, as we have ...
...tl to cause the boxes to display in a right-to-left direction, or changing the writing-mode from horizontal-tb to vertical-rl. new border shorthands there are two-value shorthands to set the width, style and, color of the block or inline dimension, and two-value shorthands to set all three values in the block or inline dimension. the below code, in a horizontal writing mode, would give you a 2
px green solid border on the top and bottom of the box, and a 4
px dotted purple border on the left and right. .box { border-block: 2
px solid green; border-inline-width: 4
px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check browser support before using as other browsers may not have implemented them yet. flow...
...And 3 more matches
Shorthand properties - CSS: Cascading Style Sheets
the following: font: italic bold .8em/1.2 arial, sans-serif; this shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (css2.0 / css3), font-stretch: normal (css3). border properties with borders, the width, color, and style can be simplified into one declaration. for example, the following css ... ...
...aration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (css2.0 / css3), font-stretch: normal (css3). border properties with borders, the width, color, and style can be simplified into one declaration. for example, the following css ... border-width: 1
px; border-style: solid; border-color: #000; ... can be simplified as: border: 1
px solid #000; margin and padding properties shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. the following css declarations ... margin-top: 10
px; margin-right: 5
px; margin-bottom: 10
px; margin-left: 5
px; ... are the same as the following declaration using the four value shorthan...
... when two values are specified, the first margin applies to the top and bottom, the second to the left and right. ...
...And 3 more matches
border-end-end-radius - CSS: Cascading Style Sheets
the border-end-end-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-end-radius: 10
px; border-end-end-radius: 1em; /* with two values the corner will be an ellipse */ border-end-end-radius: 1em 2em; /* global values */ border-end-end-radius: inherit; border-end-end-radius: initial; border-end-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-right-radius property. syntax values <length-percentage> denotes the ...
... editor's draft initial definit...
... editor's draft initial definition. ...
...And 3 more matches
border-end-start-radius - CSS: Cascading Style Sheets
the border-end-start-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-end-start-radius: 10
px; border-end-start-radius: 1em; /* with two values the corner will be an ellipse */ border-end-start-radius: 1em 2em; /* global values */ border-end-start-radius: inherit; border-end-start-radius: initial; border-end-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-right-radius property. syntax values <length-percentage> denotes...
... editor's draft initial d...
... editor's draft initial definition. ...
...And 3 more matches
border-start-end-radius - CSS: Cascading Style Sheets
the border-start-end-radius css property defines a logical border radius on an element, which maps to a physical border radius depending on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-end-radius: 10
px; border-start-end-radius: 1em; /* with two values the corner will be an ellipse */ border-start-end-radius: 1em 2em; /* global values */ border-start-end-radius: inherit; border-start-end-radius: initial; border-start-end-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-bottom-left-radius property. syntax values <length-percentage> denot...
... editor's draft initial d...
... editor's draft initial definition. ...
...And 3 more matches
border-start-start-radius - CSS: Cascading Style Sheets
border-start-start-radius css property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's writing-mode, direction, and text-orientation. this is useful when building styles to work regardless of the text orientation and writing mode. /* <length> values */ /* with one value the corner will be a circle */ border-start-start-radius: 10
px; border-start-start-radius: 1em; /* with two values the corner will be an ellipse */ border-start-start-radius: 1em 2em; /* global values */ border-start-start-radius: inherit; border-start-start-radius: initial; border-start-start-radius: unset; for instance, in a horizontal-tb writing mode this property corresponds to the border-top-left-radius property. syntax values <length-percentag...
... editor's draft ini...
... editor's draft initial definition. ...
...And 3 more matches
border-top-right-radius - CSS: Cascading Style Sheets
the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3
px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis...
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: ...
... the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; ...
...And 3 more matches
grid-auto-columns - CSS: Cascading Style Sheets
xplicitly sized by grid-template-columns, implicit grid tracks are created to hold it. this can happen either by explicitly positioning into a column that is out of range, or by the auto-placement algorithm creating additional columns. ...
...values */ grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: auto; /* <length> values */ grid-auto-columns: 100
px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100
px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400
px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100
px 150
px 390
px; grid-auto-columns: 10% 33.3%; grid-auto-colu...
...fr); grid-auto-columns: minmax(20%, 80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400
px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100
px 150
px 390
px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100
px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100
px minmax(100
px, auto) 10% 0.5fr fit-content(400
px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length. <percentage> is a non-negative <percentage> value relative to the block size of the grid container. if the block size ...
...And 3 more matches
isolation - CSS: Cascading Style Sheets
candidate recommendation initial def...
... candidate recommendation initial definition ...
... candidate recommendation initial definition ...
...And 3 more matches
justify-items - CSS: Cascading Style Sheets
s given a justify-items value of center, which causes the grid items to span only as wide as their content width, and align in the center of their cells. ...
... and align in the center of their cells. ...
...center of their cells. ...
...And 3 more matches
left - CSS: Cascading Style Sheets
css property participates in specifying the horizontal position of a positioned element. it has no effect on non-positioned elements. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ left: 3
px; left: 2.4em; /* <percentage>s of the width of the containing block */ left: 10%; /* keyword value */ left: auto; /* global values */ left: inherit; left: initial; left: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the left edge of the containing block. for relatively positioned elements, the dist...
...r 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: 20
px; top: 20
px; </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;...
...0
px; </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: 20
px; left: 20
px; </pre> <p>relative to its sibling div above, but removed from flow of content.</p> <div id="example_4"> <pre> position: absolute; bottom: 10
px; right: 20
px; </pre> <p>absolute position inside of a parent with relative position</p> </div> <div id="example_5"> <pre> position: absolute; right: 0;...
...And 3 more matches
text-decoration-thickness - CSS: Cascading Style Sheets
the text-decoration-thickness css property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline. syntax /* single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3
px; /* percentage */ text-decoration-thickness: 10%; /* global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the browser chooses an appropriate width for the text decoration line. from-font if the font file includes information about a preferred thickness, use that value. if the font file doesn't include this information, behave as if auto was set, with ...
... different font size. formal definition initial valueautoapplies toall elements. ...
...eautoapplies toall elements. ...
...And 3 more matches
text-shadow - CSS: Cascading Style Sheets
shadow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...dow is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...is described by some combination of x and y offsets from the element, blur radius, and color. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 3 more matches
translateZ() - CSS: Cascading Style Sheets
e. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this transformation is defined by a <length> which specifies how far inward or outward the element or elements move. in the above interactive examples, perspective: 550
px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: translatez(tz) is equivalent to translate3d(0, 0, tz). syntax translatez(tz) values tz a <length> representing the z-component of the translating vector. a positive value moves the element towards the viewer, and a n...
...represented using a cartesian-coordinate matrix. 10000100001t0001 examples in this example, two boxes are created. one is positioned normally on the page, without being translated at all. the second is altered by applying perspective to create a 3d space, then moved towards the user. ...
...g a cartesian-coordinate matrix. 10000100001t0001 examples in this example, two boxes are created. one is positioned normally on the page, without being translated at all. the second is altered by applying perspective to create a 3d space, then moved towards the user. ...
...And 3 more matches
<input type="number"> - HTML: Hypertext Markup Language
n> </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 is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones. the css applied to this example is as follows: div { margin-bottom: 10
px; } input:invalid+span:after { content: '✖'; padding-left: 5
px; } input:valid+span:after { content: '✓'; padding-left: 5
px; } 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. we put it on a separate <span> element for added flexibility. some brow...
...eters, we've set the step value to 0.01, so that values like 1.78 are not seen as invalid. we've also provided a placeholder for that input. we've hidden the feet and inches inputs initially using style="display: none;", so that meters is the default entry type. now, onto the css. this looks very similar to the validation styling we saw before; nothing remarkable here. ...
...8 are not seen as invalid. we've also provided a placeholder for that input. we've hidden the feet and inches inputs initially using style="display: none;", so that meters is the default entry type. now, onto the css. this looks very similar to the validation styling we saw before; nothing remarkable here. ...
...And 3 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
y> <tr> <td>3741255</td> <td>jones, martha</td> <td>computer science</td> </tr> <tr> <td>3971244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next. table { border: 2
px solid #555; border-collapse: collapse; font: 16
px "lucida grande", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. font is u...
...", "helvetica", "arial", sans-serif; } first, the table's overall style attributes are set, configuring the thickness, style, and color of the table's exterior borders and using border-collapse to ensure that the border lines are shared among adjacent cells rather than each having its own borders with space in between. font is used to establish an initial font for the table. th, td { border: 1
px solid #bbb; padding: 2
px 8
px 0; text-align: left; } then the style is set for the majority of the cells in the table, including all data cells but also those styles shared between our <td> and <th> cells. the cells are given a light gray outline which is a single pixel thick, padding is adjusted, and all cells are left-aligned using text-align thead > tr > th { background-color: #cce; f...
...they use a darker background-color, a larger font size, and a thicker, darker bottom border than the other cell borders. ...
...And 3 more matches
x - SVG: Scalable Vector Graphics
for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content ...
... for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or dire...
...1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with a single value --> <text y="40%" x="50%">svg</text> <!-- x with multiple values --> <text y="90%" x="25%, 50%, 75%">svg</text> </svg> text { font: 40
px sans-serif; } line { fill: none; stroke: red; stroke-width: .5
px; stroke-dasharray: 2
px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are mult...
...And 3 more matches
y - SVG: Scalable Vector Graphics
for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content ...
... for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or dire...
...e to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,80%" x="55%">svg</text> </svg> text { font: 40
px sans-serif; } line { fill: none; stroke: red; stroke-width: .5
px; stroke-dasharray: 2
px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are mult...
...And 3 more matches
SVG and CSS - SVG: Scalable Vector Graphics
u'll create a simple demonstration that runs in your svg-enabled browser. note: elements referenced by <use> elements inherit the styles from that element. so to apply different styles to them you should use css custom properties. example make a new svg document as a plain text file, doc8.svg. ...
...imple demonstration that runs in your svg-enabled browser. note: elements referenced by <use> elements inherit the styles from that element. so to apply different styles to them you should use css custom properties. example make a new svg document as a plain text file, doc8.svg. ...
... class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> </g> </g> </svg> make a new css file, style8.css. ...
...And 3 more matches
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
he bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0
px, 16
px, 16
px, 0
px); } mac os x: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.
...he bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton, toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png"); } #xulschoolhello-hello-world-button { -moz-image-region: rect(0
px, 16
px, 16
px, 0
px); } linux: /* the second and third selectors at the bottom are necessary to prevent conflicts with installed themes. */ toolbarbutton.xulschoolhello-toolbarbutton, window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton { list-style-image: url("chrome://xulschoolhello-os/skin/toolbar-large.png"); } #xulschoolhello-hello-world-button { -moz-image-region: ...
...these add the button-like look you want. ...
...And 2 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
dle it. special markup to support the model it's important to add special markup that fulfills the requirements of the application. this example uses an iframe element as the mechanism to establish the communication with the server side application. so the following piece of html defines an iframe element which is not visible to the user: <div style="visibility:hidden; position:absolute; top:-1000
px; left:-1000
px"> <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 that when the data is available (a web page is loaded into the iframe) this will not affect the web page context because the iframe is not visible. data loader component this component is a sim...
...e.getattribute("url"); strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.style.backgroundcolor="white"; } ele.style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1
px; border: 1
px solid #dddddd; color:white; background-color:white; padding-left: 5
px; border-bottom:white;padding-right: 5
px; padding-top:3
px; text-decoration:none;} .tab:hover { background-color:#ddeeff; } </style> </head> <body > <h2>latest headlines - inner-browsing example </h2> <p>click the tabbed menu to dynamically load the headlines into this web page.</p> <br /> <!-- ***** this code d...
...all rights reserved. note...
...And 2 more matches
Skinning XUL Files by Hand - Archive of obsolete content
. mozilla's current global skin defines this basic behavior for several classes of button. a button is styled by the global skin when its class attribute is set to a class which is defined in the global skin. for example, when a button is defined as follows: <button class="plain" label="push me" /> then the following very simple style definition applies to that button. button.plain { border: 0
px !important; } the global skin, in which styles for these several button classes and dozens of other elements are defined, is described in the following section. if you want to use the classes already defined in mozilla's global skin to style your elements, you may do so. but you may also want to define new classes of buttons particular to your xul file, in which case the style information will ...
...the following table shows the basic format for these two common types of style definitions: class id element.class { attribute: value; } element#id { attribute: value; } ...
...ize: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
...And 2 more matches
Extentsions FAQ - Archive of obsolete content
o problem implementing a third, so yes it's possible. ...
...blem implementing a third, so yes it's possible. ...
...implementing a third, so yes it's possible. ...
...And 2 more matches
Using the W3C DOM - Archive of obsolete content
in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself. manipul...
... which returns a nodelist of all the elements with the given tag name in the order they appear in the document: var arrcollection_of_pargs = document.getelementsbytagname("p"); var objfirst_parg = arrcollection_of_pargs[0]; // objfirst_parg will reference the first paragraph in the document objfirst_parg.style.border = "2
px solid green"; // and now, the first paragraph in the document // gets a 2
px solid green border. in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself. manipulating document style and content changing an element's style using the dom ...
...n the dom access section above. deprecated coding practices appropriate dom 2 replacements ie5+: elemref.style.pixelleft dom level 2: parseint(elemref.style.left, 10) ie5+: elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+: elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "
px"; elemref.style.top = y + "
px"; w3c dom2 reflection of an element's css properties keep in mind that according to the w3c recommendation, the values returned by the style property of an element reflect static settings in the element's style attribute only, not the total "computed style" that includes any inherited style settings from parent elements. therefore, if you wish to read and...
...And 2 more matches
-ms-scroll-snap-points-x - Archive of obsolete content
snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points. ...
...e interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
... to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
...And 2 more matches
-ms-scroll-snap-points-y - Archive of obsolete content
snapinterval( <length-percentage>, <length-percentage> ) specifies a starting snap-point followed by the interval between all snap-points. ...
...e interval is set to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
... to 100%. in the second selector, each snap-point is listed separately — 100%, 200%, 300%, and so on. ...
...And 2 more matches
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
h individual grid cell by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
...cement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
... create enough cells to hold all items. in the example we have created a three column track grid. the five items are placed into grid cells working along an initial row of three grid cells, then creating a new row for the remaining two. ...
...And 2 more matches
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
of the available space in the grid container. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...ntainer. the example below demonstrates a grid with three column tracks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...cks, one of 200 pixels, the second of 1fr, the third of 3fr. once the 200 pixels has been subtracted from the space available in the grid container, the remaining space is divided by 4. one part is given to column 2, 3 parts to column 3. ...
...And 2 more matches
Flexbox - Learn web development
our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example): here we see that the children are indeed breaking out of their container. one way in which you can fix this is to add the following declaration to your <section> rule: flex-wrap: wrap; also, add the following declaration to your <article> rule: flex: 200
px; try this now; you'll see that the layout looks much better with this included: we now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. the flex: 200
px declaration set on the articles means that each will be at least 200
px wide; we'll discuss this property in more detail later on. you might also notice that...
...o — there are now four proportion units available in total (since 1 + 1 + 2 = 4). the first two flex items have one unit each so they take 1/4 of the available space each. the third one has two units, so it takes up 2/4 of the available space (or one-half). you can also specify a minimum size value inside the flex value. try updating your existing article rules like so: article { flex: 1 200
px; } article:nth-of-type(3) { flex: 2 200
px; } this basically states "each flex item will first be given 200
px of the available space. after that, the rest of the available space will be shared out according to the proportion units." try refreshing and you'll see a difference in how the space is shared out. the real value of flexbox can be seen in its flexibility/responsiveness — if you re...
...d for the layout. first of all, we set the children of the <section> to be laid out as flexible boxes. section { display: flex; } next, we set some flex values on the <article>s themselves. take special note of the 2nd rule here — we are setting the third <article> to have its children laid out like flex items too, but this time we are laying them out like a column. article { flex: 1 200
px; } article:nth-of-type(3) { flex: 3 200
px; display: flex; flex-flow: column; } next, we select the first <div>. we first use flex:1 100
px; to effectively give it a minimum height of 100
px, then we set its children (the <button> elements) to also be laid out like flex items. here we lay them out in a wrapping row, and align them in the center of the available space like we did in the indi...
...And 2 more matches
Mozilla splash page - Learn web development
page, which aims to say something nice and interesting about what mozilla stands for, and provide some links to further resources. unfortunately, no images or video have been added yet — this is your job! you need to add some media to make the page look nice and make more sense. the following subsections detail what you need to do: preparing images using your favourite image editor, create 400
px wide and 120
px wide versions of: firefox_logo-only_rgb.png firefox-addons.jpg mozilla-dinosaur-head.png call them something sensible, e.g. firefoxlogo400.png and firefoxlogo120.png. along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area. you'll also link to the firefox logo in the site header. save copies of all these inside the same...
...ogo-only_rgb.png firefox-addons.jpg mozilla-dinosaur-head.png call them something sensible, e.g. firefoxlogo400.png and firefoxlogo120.png. along with mdn.svg, these images will be your icons to link to further resources, inside the further-info area. you'll also link to the firefox logo in the site header. save copies of all these inside the same directory as index.html. next, create a 1200
px wide landscape version of red-panda.jpg, and a 600
px wide portrait version that shows the panda in more of a close up shot. again, call them something sensible so you can easily identify them. save a copy of both of these inside the same directory as index.html. note: you should optimise your jpg and png images to make them as small as possible, while still looking ok. tinypng.com is a great se...
...the header inside the <header> element, add an <img> element that will embed the small version of the firefox logo in the header. adding a video to the main article content just inside the <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code. the video should be 400
px wide. 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. to complete this section you'll need to insert an <img> element inside each one containing appropriate src, alt, srcset and sizes attributes. in each case (except one — which one is inherently res...
...And 2 more matches
Implementing feature detection - Learn web development
ure-here" in your favorite search engine. bear in mind though that some features, however, are known to be undetectable — see modernizr's list of undetectables. matchmedia we also wanted to mention the window.matchmedia javascript feature at this point too. this is a property that allows you to run media query tests inside javascript. ...
...avascript feature at this point too. this is a property that allows you to run media query tests inside javascript. it looks like this: if (window.matchmedia("(max-width: 480
px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480
px wide or less). ...
... it looks like this: if (window.matchmedia("(max-width: 480
px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480
px wide or less). ...
...And 2 more matches
CSSNumericValue.equals() - Web APIs
ted quickly. syntax var boolean = cssnumericvalue.equals(number); parameters number either a number or a cssnumericvalue. return value a boolean. exceptions none. examples as stated earlier, all passed values must be of the same type and value and must be in the same order. some of the following examples illustrate what happens when they are not. ...
.... syntax var boolean = cssnumericvalue.equals(number); parameters number either a number or a cssnumericvalue. return value a boolean. exceptions none. examples as stated earlier, all passed values must be of the same type and value and must be in the same order. some of the following examples illustrate what happens when they are not. ...
...er); parameters number either a number or a cssnumericvalue. return value a boolean. exceptions none. examples as stated earlier, all passed values must be of the same type and value and must be in the same order. some of the following examples illustrate what happens when they are not. ...
...And 2 more matches
CSSPositionValue - Web APIs
csspositionvalue.x returns the item's position along the web page's horizontal axis. csspositionvalue.y returns the item's position along the vertical axis. methods none. examples the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
...onvalue.x returns the item's position along the web page's horizontal axis. csspositionvalue.y returns the item's position along the vertical axis. methods none. examples the following example positions a container <div> 5 pixels from the top and 10 pixels from the left of the page. ...
...ge. let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.
px(35), css.
px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.computedstylemap().get('object-position') ); we set the object-position property, then check the values returned. ...
...And 2 more matches
Using the CSS Painting API - Web APIs
the worklet's script, you can alter the custom property values to change the colors and width of the background image. adding complexity the above examples might not seem very exciting, as you could recreate them in a few different ways with existing css properties, e.g. by positioning some decorative generated content with ::before, or including background: linear-gradient(yellow, yellow) 0 15
px / 200
px 20
px no-repeat; what makes the css painting api so interesting and powerful is that you can create complex images, passing variables, that automatically resize. let's take a look at a more complex paint example. registerpaint('headerhighlight', class { static get inputproperties() { return ['--highcolour']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, ...
...return ['*']; } we then have access to that argument. paint(ctx, size, props, args) { // use our custom arguments const hasstroke = args[0].tostring(); // if stroke arg is 'stroke', don't fill if (hasstroke === 'stroke') { ctx.fillstyle = 'transparent'; ctx.strokestyle = colour; } ... } we can pass more than one argument. li { background-image: paint(hollowhighlights, stroke, 10
px); } we can also specify that we want a particular type of argument. when we get our list of argument values, we ask specifically for a <length> unit. static get inputarguments() { return ['*', '<length>']; } in this case, we specifically requested the <length> attribute. the first element in the returned array will be a cssunparsedvalue. the second will be a cssstylevalue. if the custom argu...
...sedvalue. the second will be a cssstylevalue. if the custom argument is a css value, for instance a unit, we can invoke typed om cssstylevalue class (and sub classes) by using the value type keyword when we retrieve it in the registerpaint() function. let's say we add a second argument with how many pixels wide we want the stroke to be: li { background-image: paint(hollowhighlights, stroke, 10
px); } when we get our list of argument values, we can ask specifically for a <length> unit. static get inputarguments() { return ['*', '<length>']; } now we can access the type and value properties, meaning we can get the number of pixels and a number type right out of the box. (admittedly, ctx.linewidth takes a float as a value rather than a value with length units, but for example's sake...)...
...And 2 more matches
Drawing text - Web APIs
maxwidth]) fills a given text at the given (x,y) position. optionally with a maximum width to draw. stroketext(text, x, y [, maxwidth]) strokes a given text at the given (x,y) position. optionally with a maximum width to draw. a filltext example the text is filled using the current fillstyle. ...
...lstyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48
px serif'; ctx.filltext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); a stroketext example the text is filled using the current strokestyle. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.font = '48
px serif'; ctx.stroketext('hello world', 10, 50); } <canvas id="canvas" width="300" height="100"></canvas> draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size. there are some more properties which let you adjust the way the text gets displayed on the canvas: font = value the current text style bei...
... draw(); styling text in the examples above we are already making use of the font property to make the text a bit larger than the default size. there are some more properties which let you adjust the way the text gets displayed on the canvas: font = value the current text style being used when drawing text. this string uses the same syntax as the css font property. the default font is 10
px sans-serif. textalign = value text alignment setting. possible values: start, end, left, right or center. the default value is start. textbaseline = value baseline alignment setting. possible values: top, hanging, middle, alphabetic, ideographic, bottom. the default value is alphabetic. direction = value directionality. possible values: ltr, rtl, inherit. the default value is inherit. the...
...And 2 more matches
Comment - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="331" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="...
...And 2 more matches
DataTransfer.clearData() - Web APIs
"> select this element, drag it to the drop zone and then release the selection to move the element. ...
... drop zone and then release the selection to move the element. ...
... event.datatransfer.cleardata(); // set the drag's format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler ...
...And 2 more matches
Element.getClientRects() - Web APIs
/th></tr> </thead> <tbody> <tr><td>tbody</td></tr> </tbody> </table> </div> css the css draws borders around the paragraph and the <span> inside each <div> block for the first example, around the <ol> and <li> for the second example, and around <table>, <th>, and <td> elements for the third example. strong { text-align: center; } div { display: inline-block; width: 150
px; } div p, ol, table { border: 1
px solid blue; } span, li, th, td { border: 1
px solid green; } javascript the javascript code draws the client rects for all html elements that have css class withclientrectsoverlay assigned. function addclientrectsoverlay(elt) { /* absolutely position a div over each client rect so that its border width is the same as the rectangle's width. note:...
...ch client rect so that its border width is the same as the rectangle's width. note: the overlays will be out of place if the user resizes or zooms. ...
...lement('div'); tablerectdiv.style.position = 'absolute'; tablerectdiv.style.border = '1
px solid red'; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var scrollleft = document.documentelement.scrollleft || document.body.scrollleft; tablerectdiv.style.margin = tablerectdiv.style.padding = '0'; tablerectdiv.style.top = (rect.top + scrolltop) + '
px'; tablerectdiv.style.left = (rect.left + scrollleft) + '
px'; // we want rect.width to be the border width, so content width is 2
px less. ...
...And 2 more matches
Using files from web applications - Web APIs
ment must not be hidden using display: none (nor visibility: hidden), otherwise the label would not be keyboard-accessible. use the visually-hidden technique instead. consider this html: <input type="file" id="fileelem" multiple accept="image/*" class="visually-hidden"> <label for="fileelem">select some files</label> and this css: .visually-hidden { position: absolute !important; height: 1
px; width: 1
px; overflow: hidden; clip: rect(1
px, 1
px, 1
px, 1
px); } /* separate rule for compatibility, :focus-within is required on modern firefox and chrome */ input.visually-hidden:focus + label { outline: thin dotted; } input.visually-hidden:focus-within + label { outline: thin dotted; } there is no need to add javascript code to call fileelem.click(). also in this case you can styl...
... in firefox, to have the pdf appear embedded in the iframe (rather than...
... in firefox, to have the pdf appear embedded in the iframe (rather than proposed as ...
...And 2 more matches
GlobalEventHandlers.onmousedown - Web APIs
ssion. the function receives a mouseevent object as its sole argument. example this example reveals part of an image when you press and hold a mouse button. it uses the onmousedown, onmouseup, and onmousemove event handlers. ...
...on receives a mouseevent object as its sole argument. example this example reveals part of an image when you press and hold a mouse button. it uses the onmousedown, onmouseup, and onmousemove event handlers. ...
...xample reveals part of an image when you press and hold a mouse button. it uses the onmousedown, onmouseup, and onmousemove event handlers. ...
...And 2 more matches
HTMLDataListElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 2 more matches
HTMLDocument - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" he...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="306" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmldocument" target="_top"><rect x="386" y="1" width="...
...And 2 more matches
HTMLElement.offsetLeft - Web APIs
from the closest relatively positioned parent element. 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: 300
px; 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("...
... working draft ...
... working draft ...
...And 2 more matches
HTMLImageElement.srcset - Web APIs
string provides versions of an image to be used at the standard pixel density (1x) as well as double that pixel density (2x). also available is a version of the image for use at a width of 2048 pixels (2048w). "header640.png 640w, header960.png 960w, header1024.png 1024w, header.png" this string provides versions of a header image to use when the user agent's renderer needs an image of width 640
px, 960
px, or 1024
px. an additional, fallback image candidate is provided without any condition at all, to be used for any other width. "icon32
px.png 32w, icon64
px.png 64w, icon-retina.png 2x icon-ultra.png 3x icon.svg" here, options are provided for an icon at widths of 32
px and 64
px, as well as at pixel densities of 2x and 3x. a fallback image is provided as an svg file that should be used in al...
...format guide. example html the html below indicates that the default image is the 200 pixel wide version of the clock image we use in several places throughout our documentation. also specified by the srcset attribute is that the 200-pixel version should be used for 1x displays while the 400-pixel version should be used for 2x displays. <div class="box"> <img src="/files/16797/clock-demo-200
px.png" alt="clock" srcset="/files/16864/clock-demo-200
px.png 1x, /files/16797/clock-demo-400
px.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. also provided is the word-break attribute, using the break-all value to tell the browser to wrap the string within the width available...
... it uses the image's currentsrc property to fetch and display the url selected by the browser from the srcset. ...
...And 2 more matches
HTMLImageElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 2 more matches
HTMLInputElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 2 more matches
HTMLMenuElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 2 more matches
HTMLMenuItemElement - Web APIs
yle="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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...And 2 more matches
Using the MediaStream Recording API - Web APIs
t soon starts to make you think "wow, why didn't we have this before? why was css2 layout so awkward?" it allows you do a calculation to determine the computed value of a css unit, mixing different units in the process. for example, in web dictaphone we have three main ui areas, stacked vertically. we wanted to give the first two (the header and the controls) fixed heights: header { height: 70
px; } .main-controls { padding-bottom: 0.7rem; height: 170
px; } however, we wanted to make the third area (which contains the recorded samples you can play back) take up whatever space is left, regardless of the device height. flexbox could be the answer here, but it's a bit overkill for such a simple layout. instead, the problem was solved by making the third container's height equal to 100% ...
... (which contains the recorded samples you can play back) take up whatever space is left, regardless of the device height. flexbox could be the answer here, but it's a bit overkill for such a simple layout. instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3
px 4
px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240
px - 0.7rem); overflow: scroll; } note: calc() has good support across modern browsers too, even going back to internet explorer 9. checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the checkbox hack, which abuses the fact that you can click on the...
...dictaphone this powers the information screen, which is shown/hidden by clicking the question mark icon in the top right hand corner. ...
...And 2 more matches
Node.isEqualNode() - Web APIs
this example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using isequalnode() and output the results. ...
...we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using isequalnode() and output the results. ...
...first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using isequalnode() and output the results. ...
...And 2 more matches
Node.isSameNode() - Web APIs
n this example, we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using issamenode() and output the results. ...
... we create three <div> blocks. the first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using issamenode() and output the results. ...
... first and third have the same contents and attributes, while the second is different. then we run some javascript to compare the nodes using issamenode() and output the results. ...
...And 2 more matches
SVGComponentTransferFunctionElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEColorMatrixElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEComponentTransferElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFECompositeElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEDiffuseLightingElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEDropShadowElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEFloodElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEImageElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEMergeElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEMorphologyElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFEOffsetElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFESpecularLightingElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFETileElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFETurbulenceElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGFilterElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGPatternElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
SVGSymbolElement - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...And 2 more matches
Text - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="331" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75"...
...And 2 more matches
WheelEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="1...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="281" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="...
...And 2 more matches
XMLDocument - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" he...
...ly="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="306" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmldocument" target="_top"><rect x="386" y="1" width="1...
...And 2 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
fying section selectors the :is() pseudo-class is particularly useful when dealing with html5 sections and headings. since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky. ...
...aling with html5 sections and headings. since <section>, <article>, <aside>, and <nav> are commonly nested together, without :is(), styling them to match one another can be tricky. for example, without :is(), styling all the <h1> elements at different depths could be very complicated: /* level 0 */ h1 { font-size: 30
px; } /* level 1 */ section h1, article h1, aside h1, nav h1 { font-size: 25
px; } /* level 2 */ section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-size: 20
px; } /* level 3 */ /* ... don't even think about it! */ using :is(), though, it's much easi...
...ection article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1 { font-size: 20
px; } /* level 3 */ /* ... ...
...And 2 more matches
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
e. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...o lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...sed placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab order still begins with box 1, as it comes first in the source. ...
...And 2 more matches
Stacking context example 2 - CSS: Cascading Style Sheets
ering that in general the html hierarchy is different from the stacking context hierarchy. in the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ...
... not create a stacking context are collapsed on their parent. ...
...apsed on their parent. ...
...And 2 more matches
background-position-x - CSS: Cascading Style Sheets
nd us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...ition shorthand properties applied to the element after it. syntax /* keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0
px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3
px; background-position-x: left 25%; /* multiple values */ background-position-x: 0
px, center; /* global values */ background-position-x: inherit; background-position-x: initial; background-position-x: unset; the background-position-x property is specified as one or more values, separated by commas. values left aligns the left edge of the background image with the left edge of the backgroun...
...syntax [ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#where <length-percentage> = <length> | <percentage> examples basic example the following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately. ...
...And 2 more matches
background-position-y - CSS: Cascading Style Sheets
nd us a pull request. the value of this property is overridden by any declaration of the background or background-position shorthand properties applied to the element after it. ...
...tion shorthand properties applied to the element after it. syntax /* keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /* <percentage> values */ background-position-y: 25%; /* <length> values */ background-position-y: 0
px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3
px; background-position-y: bottom 10%; /* multiple values */ background-position-y: 0
px, center; /* global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset; the background-position-y property is specified as one or more values, separated by commas. values top aligns the top edge of the background image with the top edge of the background...
...syntax [ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#where <length-percentage> = <length> | <percentage> examples basic example the following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately. ...
...And 2 more matches
border-block-end-width - CSS: Cascading Style Sheets
order-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-end-width: 5
px; border-block-end-width: thick; related properties are border-block-start-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabso...
... editor's draft initial definition ...
... editor's draft initial definition ...
...And 2 more matches
border-block-start-width - CSS: Cascading Style Sheets
der-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-block-start-width: 5
px; border-block-start-width: thick; related properties are border-block-end-width, border-inline-start-width, and border-inline-end-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'bord...
... editor's draft initial definition ...
... editor's draft initial definition ...
...And 2 more matches
border-block-width - CSS: Cascading Style Sheets
block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-block-width: 5
px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute lengt...
... editor's draft initial definition ...
... editor's draft initial definition ...
...And 2 more matches
border-block - CSS: Cascading Style Sheets
the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. ...
...the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. ...
... editor's draft initial definition ...
...And 2 more matches
border-inline-end-width - CSS: Cascading Style Sheets
rder-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-end-width: 2
px; border-inline-end-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-start-width, which define the other border widths of the element. initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'bord...
... editor's draft initial definition ...
... editor's draft initial definition ...
...And 2 more matches
border-inline - CSS: Cascading Style Sheets
it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. ...
...it corresponds to the border-top and border-bottom or border-right, and border-left properties, depending on the values defined for writing-mode, direction, and text-orientation. ...
... editor's draft initial definition ...
...And 2 more matches
clear - CSS: Cascading Style Sheets
th | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. 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:1
px solid black; padding:10
px; } .left { border: 1
px 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. ph...
... width:20%; } p { width: 50%; } clear: right html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. 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:1
px solid black; padding:10
px; } .right { border: 1
px 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. p...
...lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. suspendisse eget dolor. fusce pulvinar lacus ac dui.</p> <p class="red">lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. ...
...And 2 more matches
flex - CSS: Cascading Style Sheets
ull request. constituent properties this property is a shorthand for the following css properties: flex-grow flex-shrink flex-basis syntax /* keyword values */ flex: auto; flex: initial; flex: none; /* one value, unitless number: flex-grow */ flex: 2; /* one value, width/height: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* two values: flex-grow | flex-basis */ flex: 1 30
px; /* two values: flex-grow | flex-shrink */ flex: 2 2; /* three values: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%; /* global values */ flex: inherit; flex: initial; flex: unset; the flex property may be specified using one, two, or three values. one-value syntax: the value must be one of: a <number>: in this case it is interpreted as flex: <number> 1 0; the <flex-shrink>...
...to change this, set the item's min-width or min-height. formal definit...
...to change this, set the item's min-width or min-height. formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapp...
...And 2 more matches
<gradient> - CSS: Cascading Style Sheets
, gradients are calculated in the alpha-premultiplied color space. this prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (be aware that older browsers may not use this behavior when using the transparent keyword.) examples linear gradient example a simple linear gradient. ...
...calculated in the alpha-premultiplied color space. this prevents unexpected shades of gray from appearing when both the color and the opacity are changing. (be aware that older browsers may not use this behavior when using the transparent keyword.) examples linear gradient example a simple linear gradient. ...
...mples linear gradient example a simple linear gradient. <div class="linear-gradient">linear gradient</div> div { width: 240
px; height: 80
px; } .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: 240
px; height: 80
px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples. ...
...And 2 more matches
justify-self - CSS: Cascading Style Sheets
override the justify-items value. these values cause the grid items to span only as wide as their content width, and align in different positions across their cells. ...
... and align in different positions across their cells. ...
...erent positions across their cells. ...
...And 2 more matches
line-height - CSS: Cascading Style Sheets
box green"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <div class="box red"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... ...
...1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... </div> <div class="box red"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... ...
...tage line-heights have poor inheritance behavior ... </div> <div class="box red"> <h1>avoid unexpected results by using unitless line-height.</h1> length and percentage line-heights have poor inheritance behavior ... ...
...And 2 more matches
margin-block - CSS: Cascading Style Sheets
the margin-block css shorthand property defines the logical block start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-block: 10
px 20
px; /* an absolute length */ margin-block: 1em 2em; /* relative to the text size */ margin-block: 5% 2%; /* relative to the nearest block container's width */ margin-block: 10
px; /* sets both start and end values */ /* keyword values */ margin-block: auto; /* global values */ margin-block: inherit; margin-block: initial; margin-block: unset; these values corresponds to the margin-top and margin-bottom, or margin-right, and margin-left property depending on the values defined for writing-mode, direction, and text-orientation. co...
... editor's draft initial definition. ...
... editor's draft initial definition. ...
...And 2 more matches
mask-size - CSS: Cascading Style Sheets
the mask-size css property specifies the sizes of the mask images. the size of the image can be fully or partially constrained in order to preserve its intrinsic ratio. ...
... constrained in order to preserve its intrinsic ratio. ...
... syntax one or more <bg-size> values, separated by commas. a <bg-size>...
...And 2 more matches
offset - CSS: Cascading Style Sheets
e offset css shorthand property sets all the properties required for animating an element along a defined path. note: early versions of the spec called this property motion. ...
...set css shorthand property sets all the properties required for animating an element along a defined path. note: early versions of the spec called this property motion. ...
...horthand for the following css properties: offset-anchor offset-distance offset-path offset-position offset-rotate syntax /* offset position */ offset: auto; offset: 10
px 30
px; offset: none; /* offset path */ offset: ray(45deg closest-side); offset: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100
px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50
px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40
px 20
px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50
px 100
px; formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor:...
...And 2 more matches
overscroll-behavior-block - CSS: Cascading Style Sheets
at we want. to avoid this happening in the block direction, we've set overscroll-behavior-block: contain on the inner box. ...
...void this happening in the block direction, we've set overscroll-behavior-block: contain on the inner box. ...
...ox. ...
...And 2 more matches
overscroll-behavior-inline - CSS: Cascading Style Sheets
we want. to avoid this happening in the inline direction, we've set overscroll-behavior-inline: contain on the inner box. ...
...d this happening in the inline direction, we've set overscroll-behavior-inline: contain on the inner box. ...
...ox. ...
...And 2 more matches
place-self - CSS: Cascading Style Sheets
lacements. these values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions. ...
...n different positions across their cells, in the block and inline directions. ...
...ons across their cells, in the block and inline directions. ...
...And 2 more matches
repeating-linear-gradient() - CSS: Cascading Style Sheets
on, repeating-linear-gradient() won't work on background-color and other properties that use the <color> data type. syntax /* a repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45deg, blue, red 33.3%); /* a repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20
px */ repeating-linear-gradient(to left top, blue, red 20
px); /* a gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red. this gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* a gradient repeating five times, going from the left to right, starting red, turning gre...
...-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
...olor-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? ...
...And 2 more matches
scroll-snap-stop - CSS: Cascading Style Sheets
mation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances. ...
...ent axes this example is duplicated from scroll-snap-type with minor variances. ...
...with minor variances. ...
...And 2 more matches
translate() - CSS: Cascading Style Sheets
the translate() css function repositions an element in the horizontal and/or vertical directions. its result is a <transform-function> data type. this transformation is characterized by a two-dimensional vector. its coordinates define how much the element moves in each direction. syntax /* single <length-percentage> values */ transform: translate(200
px); transform: translate(50%); /* double <length-percentage> values */ transform: translate(100
px, 200
px); transform: translate(100
px, 50%); transform: translate(30%, 200
px); transform: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector. the ordinate (vertical, y-coordinate) of the translating vector wil...
... linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. ...
...mation in ℝ2 and can't be represented using a cartesian-coordinate matrix. ...
...And 2 more matches
white-space - CSS: Cascading Style Sheets
labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
... magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...And 2 more matches
Adding captions and subtitles to HTML5 video - Developer guides
<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. no image is used for the captions button, so it is simply styled as: .controls button[data-state="subtitles"] { height:85%; text-indent:0; font-size:16
px; font-size:1rem; font-weight:bold; color:#666; background:#000; border-radius:2
px; } there are also other css changes that are specific to some extra javascript implementation, but these will be mentioned at the appropriate place below. subtitle implementation a lot of what we do to access the video subtitles revolves around javascript. similar to the video controls, if a b...
... subtitles button to toggle it: subtitles.addeventlistener('click', function(e) { if (subtitlesmenu) { subtitlesmenu.style.display = (subtitlesmenu.style.display == 'block' ? ...
...titlesmenu) { subtitlesmenu.style.display = (subtitlesmenu.style.display == 'block' ? ...
...And 2 more matches
Block formatting context - Developer guides
o"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>overflow:auto</code> container.</p> </div> </section> <section> <div class="box" style="display:flow-root"> <div class="float">i am a floated box!</div> <p>i am content inside the <code>display:flow-root</code> container.</p> </div> </section> css section { height:150
px; } .box { background-color: rgb(224, 206, 247); border: 5
px solid rebeccapurple; } .box[style] { background-color: aliceblue; border: 5
px solid steelblue; } .float { float: left; width: 200
px; height: 100
px; background-color: rgba(255, 255, 255, .5); border:1
px solid black; padding: 10
px; } exclude external floats in the following example, we are us...
...box of any floats in the same block formatting context as the element itself. ...
...self. ...
...And 2 more matches
Rich-Text Editing in Mozilla - Developer guides
ft=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10
px; } #textbox { width: 540
px; height: 200
px; border: 1
px #000000 solid; padding: 12
px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498
px; min-height: 200
px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.inn...
...c3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmt
px80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkau...
...wf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtj
px4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4
pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/d...
...And 2 more matches
Making content editable - Developer guides
ft=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); oprntwin.document.open(); oprntwin.document.write("<!doctype html><html><head><title>print<\/title><\/head><body onload=\"print();\">" + odoc.innerhtml + "<\/body><\/html>"); oprntwin.document.close(); } </script> <style type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10
px; } #textbox { width: 540
px; height: 200
px; border: 1
px #000000 solid; padding: 12
px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498
px; min-height: 200
px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.inn...
...c3jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmt
px80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkau...
...wf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo90fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtj
px4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4
pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/d...
...And 2 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
h an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, the patternmismatch will be true. when true, the element matches the :invalid css pseudo-classes. input:invalid { border: red solid 3
px; } had we used minlength and maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true. specifying a pattern you can use the pattern attribute to specify a regular expression that the inputted value must match in order to be considered valid (see validating against a regular expression for a simple crash course on using regular expressions to ...
...letters. ...
... relying on the title attribute for the visual display of text conte...
...And 2 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
will be replaced by an implementation of the media source extensions api which will allow support for dash via javascript libraries such as dash.js. see bug 778617 for details. using dash - server side first you'll need to convert your webm video to a dash manifest with the accompanying video files in various bit rates. to start with you'll only need the ffpmeg program from ffmpeg.org, with libv
px and libvorbis support for webm video and audio, at least version 2.5 (probably; this was tested ith 3.2.5). 1. use your existing webm file to create one audio file and multiple video files. for example: the file in.video can be any container with at least one audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -d...
...; this was tested ith 3.2.5). 1. use your existing webm file to create one audio file and multiple video files. for example: the file in.video can be any container with at least one audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
... least one audio and one video stream that can be decoded by ffmpeg, create the audio using: ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm create each video variant. ...
...And 2 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
t content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post. ...
...e="content" cols="60" rows="5"> this is the content of my excellent blog post. ...
...e you enjoy it! ...
...And 2 more matches
<input type="tel"> - HTML: Hypertext Markup Language
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: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; color: #009000; } the output looks like this: pattern validation if you want to further re...
...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: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; color: #009000; } notice how the entered value is reported as invalid unless the pattern xx...
...f work, and there would still be no foolproof guarantee that the users would enter their numbers correctly. it makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. but this choice is yours to make. ...
...And 2 more matches
<input type="url"> - HTML: Hypertext Markup Language
blem. in our simplified form, the user needs to enter the url of the page that has a problem, and a message describing what is wrong. but we want the url to only successfully validate if the entered url is in a myco domain. since inputs of type url validate against both the standard url validation and the specified pattern, you can implement this easily. ...
...age that has a problem, and a message describing what is wrong. but we want the url to only successfully validate if the entered url is in a myco domain. since inputs of type url validate against both the standard url validation and the specified pattern, you can implement this easily. ...
...g what is wrong. but we want the url to only successfully validate if the entered url is in a myco domain. since inputs of type url validate against both the standard url validation and the specified pattern, you can implement this easily. ...
...And 2 more matches
Creating annotations - Archive of obsolete content
annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for ...
... annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and ...
... annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and when it is pressed...
... annotation editor content script in the corresponding content script we do two things: handle a message from the add-on code by giving the text area focus listen for the return key and when it is pressed, send the content...
Structure of an installable bundle - Archive of obsolete content
additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src ...
... additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src sherl...
... additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src sherlock search plugins firefox 1.5 and greater. /searchplugins/*.xml mozsearch and ...
... additional resources (such as chrome:// or resource:// providers can be registered in the chrome.manifest) application-specific /searchplugins/*.src sherlock search plugins firefox 1.5 and greater. /searchplugins/*.xml mozsearch and opensear...
Drag and Drop Example - Archive of obsolete content
we will write ourselves. the board will be created using a stack element. we'll use some style properties to set the width and height of the stack. a maximum size is also specified so that it doesn't resize when new elements are dragged onto it. the board will need to respond to the dragdrop event so that an element is created when the user drags onto it. <stack id="board" style="width:300
px; height: 300
px; max-width: 300
px; max-height: 300
px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> the board only needs to respond to the dragdrop and dragover events. we'll add a boardobserver to the file dragboard.js in a moment. next, a palette will be added to the right side of the window. it will conta...
...rom the palette. ...
.... ...
...s shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300
px; height: 300
px; max-width: 300
px; max-height: 300
px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="checkbox" ondraggesture="nsdraganddrop.
jspage - Archive of obsolete content
ring(a);var c=a.match(/rgba?\([\d\s,]+\)/); if(c){a=a.replace(c[0],c[0].rgbtohex());}}if(browser.engine.presto||(browser.engine.trident&&!$chk(parseint(a,10)))){if(g.test(/^(height|width)$/)){var b=(g=="width")?["left","right"]:["top","bottom"],d=0; b.each(function(h){d+=this.getstyle("border-"+h+"-width").toint()+this.getstyle("padding-"+h).toint();},this);return this["offset"+g.capitalize()]-d+"
px"; }if((browser.engine.presto)&&string(a).test("
px")){return a;}if(g.test(/(border(.+)width|margin|padding)/)){return"0
px";}}return a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@
px",top:"@
px",bottom:"@
px",right:"@
px",wi...
...((browser.engine.presto)&&string(a).test("
px")){return a;}if(g.test(/(border(.+)width|margin|padding)/)){return"0
px";}}return a;},setstyles:function(b){for(var a in b){this.setstyle(a,b[a]); }return this;},getstyles:function(){var a={};array.flatten(arguments).each(function(b){a[b]=this.getstyle(b);},this);return a;}});element.styles=new hash({left:"@
px",top:"@
px",bottom:"@
px",right:"@
px",width:"@
px",height:"@
px",maxwidth:"@
px",maxheight:"@
px",minwidth:"@
px",minheight:"@
px",backgroundcolor:"rgb(@, @, @)",backgroundposition:"@
px @
px",color:"rgb(@, @, @)",fontsize:"@
px",letterspacing:"@
px",lineheight:"@
px",clip:"rect(@
px @
px @
px @
px)",margin:"@
px @
px @
px @
px",padding:"@
px @
px @
px @
px",border:"@
px @ rgb(@, @, @) @
px @ rgb(@, @, @) @
px @ rgb(@, @, @)",borderwidth:"@
px @
px @
px @
px",borderstyle:"@...
...tion:"@
px @
px",color:"rgb(@, @, @)",fontsize:"@
px",letterspacing:"@
px",lineheight:"@
px",clip:"rect(@
px @
px @
px @
px)",margin:"@
px @
px @
px @
px",padding:"@
px @
px @
px @
px",border:"@
px @ rgb(@, @, @) @
px @ rgb(@, @, @) @
px @ rgb(@, @, @)",borderwidth:"@
px @
px @
px @
px",borderstyle:"@ @ @ @",bordercolor:"rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)",zindex:"@",zoom:"@",fontweight:"@",textindent:"@
px",opacity:"@"}); element.shortstyles={margin:{},padding:{},border:{},borderwidth:{},borderstyle:{},bordercolor:{}};["top","right","bottom","left"].each(function(g){var f=element.shortstyles; var b=element.styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@
px";});var e="border"+g;f.border[e]=b[e]="@
px @ rgb(@, @, @)";var d=e+"width",a=e+"style",c=e+"color"; f[e]={};f.borderwidth[...
...lement.shortstyles={margin:{},padding:{},border:{},borderwidth:{},borderstyle:{},bordercolor:{}};["top","right","bottom","left"].each(function(g){var f=element.shortstyles; var b=element.styles;["margin","padding"].each(function(h){var i=h+g;f[h][i]=b[i]="@
px";});var e="border"+g;f.border[e]=b[e]="@
px @ rgb(@, @, @)";var d=e+"width",a=e+"style",c=e+"color"; f[e]={};f.borderwidth[d]=f[e][d]=b[d]="@
px";f.borderstyle[a]=f[e][a]=b[a]="@";f.bordercolor[c]=f[e][c]=b[c]="rgb(@, @, @)";});(function(){element.implement({scrollto:function(h,i){if(b(this)){this.getwindow().scrollto(h,i); }else{this.scrollleft=h;this.scrolltop=i;}return this;},getsize:function(){if(b(this)){return this.getwindow().getsize();}return{x:this.offsetwidth,y:this.offsetheight}; },getscrollsize:function(){if(b(this)){return th...
Building accessible custom components in XUL - Archive of obsolete content
"1"/> <label value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
..." flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. ...
...lumns omitted for brevity --> </columns> </grid> </code> now we can use css to add some minimal styling to make it actually look like a spreadsheet. <code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1
px solid black; border-left: 1
px solid black; margin: 0; padding: 3
px; } grid.spreadsheet description { color: black; background-color: white; margin: 0
px; padding: 2
px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu. the final product looks...
... again with css rules. you might initially think of using the css border property, but that will add width and height to the focused cell. a better approach is to use the css outline property, which does maintains the element's dimensions. (technically, it draws the border inside the element instead of outside.) <code> grid.spreadsheet description:focus, grid.spreadsheet label:focus { outline: 1
px dotted black; outline-offset: -2
px; } </code> however, neither of those are our biggest problem. we want this collection of xul elements to act like a single control, a spreadsheet. we want to be able to tab to the spreadsheet, then tab off of it, without cycling through every single cell inside the spreadsheet. (in the next section we'll add support for the arrow keys to move between cells.) t...
Box Model Details - Archive of obsolete content
here, we'll find out some more details with some examples. more layout details the style properties such as min-width and max-height can be applied to any element. we've added them to buttons and textboxes, but we can also add them to spacers or boxes. in addition, the flex attribute can be applied to any element. example 1 : source view <hbox flex="1"> <button label="left" style="min-width: 100
px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100
px;" flex="1"/> </hbox> in the example above, all three elements will resize themselves as they are all flexible. the two buttons indicate a minimum width of 100 pixels. the buttons will never be smaller than this size but they may grow larger. here the window should appear just over 200 pixels wide. that's enough for...
... horizontal box. you can also prevent this stretching by placing a maximum height on the elements or, better, on the box itself. if a box has a maximum height, the elements inside it are constrained by this. however, the problem with this is that you need to know how big the element will be beforehand. example 2 : source view <hbox flex="1" align="top"> <button label="left" style="min-width: 100
px;" flex="1"/> <spacer flex="1"/> <button label="right" style="min-width: 100
px;" flex="1"/> </hbox> summary of the box model to achieve complicated layouts, you will generally need to add nested boxes, specify minimum and maximum sizes on some elements, and make certain elements flexible. the best interface is one that can be displayed at various sizes without problems. the box model may be d...
...e an html element such as a table. however, the layout will be partly controlled by the html element. that means that the flex might not work exactly as you want it. remember that flexibility only has meaning for elements that are directly inside a box or an element that is a type of box. layout examples using spacers example 3 : source view <hbox> <button label="one"/> <spacer style="width: 5
px"/> <button label="two"/> </hbox> here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. you could also set margins using the css margin property. centering buttons example 4 : source view <hbox pack="center" align="center" flex="1"> <button label="look at me!"/> <button label="push me!"/> </hbox> this example contains a horizontal box with...
... instead of beside it. a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100
px;" flex="1"/> </vbox> <vbox style="min-width: 150
px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height: 30
px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button. the left box has a flexiblity that is 3 times greater than the right ...
Creating a Skin - Archive of obsolete content
ake. we'll make some simple color changes, modify the button styles, and modify the spacing a bit. let's start with the menus, toolbars and the overall tab panel. the following style rules added to findfile.css will cause the changes shown in the accompanying image. window > box { background-color: #0088cc; } menubar,menupopup,toolbar,tabpanels { background-color: lightblue; border-top: 1
px solid white; border-bottom: 1
px solid #666666; border-left: 1
px solid white; border-right: 1
px solid #666666; } caption { background-color: lightblue; } the inner box of the window (which actually surrounds all of the window content) has been changed to have a medium blue color. you can see this blue behind the tab strip and along the bottom of the window. four elements, the menu...
...o this. that way, we can modify the xul without needing to keep the box as the first child of the window. css: .findfilesbox { background-color: #0088cc; } xul: <vbox class="findfilesbox" orient="vertical" flex="100%"> <toolbox> rounding on the tabs next, let's modify the tabs. we will make the selected tab bold and change the rounding on the tabs. tab:first-child { -moz-border-radius: 4
px 0
px 0
px 0
px; } tab:last-child { -moz-border-radius: 0
px 4
px 0
px 0
px; } tab[selected="true"] { color: #000066; font-weight: bold; text-decoration: underline; } two rules change the normal tab appearance, the first sets the rounding on the first tab and the second sets the rounding on the last tab. used here is a special mozilla style rule, -moz-border-radius, that creates rounded bor...
...uttons on the toolbar from the commands on the menu. we could add some icons to the buttons to make them clearer. mozilla composer provides some icons for open and save buttons, which we'll just use here to save time. we can set the image for a button using the list-style-image css property. #opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48
px 16
px 64
px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(80
px 16
px 96
px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image. you can think of it as a clip region for the image. you set the property to a...
...lose-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button. the last rule applies to buttons when the mouse is hovering over them. we set the text color to dark blue in this case. finally, some minor changes to the spacing around the items, by setting margins: tabbox { margin: 4
px; } toolbarbutton { margin-left: 3
px; margin-right: 3
px; } after those changes, the find files dialog now looks like the image. as you can see, some simple changes to the style rules has resulted in quite a different appearance to the find files dialog. we could continue by changing the menus, the grippies on the toolbar and the input and checkbox elements. creating a global skin the s...
3D collision detection - Game development
e box constantly changes dimensions to snugly fit the entity contained inside. note: check out the bounding volumes with three.js article to see a practical implementation of this technique. point vs. aabb checking if a point is inside an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...de an aabb is pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...s pretty simple — we just need to check whether the point's coordinates fall inside the aabb; considering each axis separately. ...
...een the point and the sphere's center. if this distance is smaller than or equal to the radius of the sphere, the point is inside the sphere. taking into account that the euclidean distance between two points a and b is (ax-bx)2)+(ay-by)2+(az-bz)\sqrt{(a_x - b_x) ^ 2) + (a_y - b_y)^2 + (a_z - b_z)} , our formula for point vs. ...
Example 2 - Learn web development
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 */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3
px 1
px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : ...
...; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1
px 25
px 2
px 5
px */ width : 10em; /* 100
px */ border : 0.2em solid #000; /* 2
px */ border-radius : 0.4em; /* 4
px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inl...
...ar-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20
px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-to...
...m .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100
px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <...
Example 3 - Learn web development
tion">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 */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3
px 1
px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : ...
...; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1
px 25
px 2
px 5
px */ width : 10em; /* 100
px */ border : 0.2em solid #000; /* 2
px */ border-radius : 0.4em; /* 4
px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inl...
...ar-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20
px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-to...
...m .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100
px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // ...
Example 4 - Learn web development
tion">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 */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3
px 1
px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : ...
...; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1
px 25
px 2
px 5
px */ width : 10em; /* 100
px */ border : 0.2em solid #000; /* 2
px */ border-radius : 0.4em; /* 4
px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inl...
...ar-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20
px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-to...
...m .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100
px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // ...
Example 5 - Learn web development
ry</li> <li class="option" role="option">apple</li> </ul> </div> </form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3
px 1
px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : ...
...; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* ------------ */ .select { font-size : 0.625em; /* 10
px */ font-family : verdana, arial, sans-serif; -moz-box-sizing : border-box; box-sizing : border-box; padding : 0.1em 2.5em 0.2em 0.5em; /* 1
px 25
px 2
px 5
px */ width : 10em; /* 100
px */ border : 0.2em solid #000; /* 2
px */ border-radius : 0.4em; /* 4
px */ box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1
px 2
px */ background : #f0f0f0; background : -webkit-linear-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inl...
...ar-gradient(90deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); background : linear-gradient(0deg, #e3e3e3, #fcfcfc 50%, #f0f0f0); } .select .value { display : inline-block; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; vertical-align: top; } .select:after { content : "▼"; position: absolute; z-index : 1; height : 100%; width : 2em; /* 20
px */ top : 0; right : 0; padding-top : .1em; -moz-box-sizing : border-box; box-sizing : border-box; text-align : center; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-to...
...m .1em 0; background-color : #000; color : #fff; } .select .optlist { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100
px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // ...
Your first form - Learn web development
le nicely. it is beyond the scope of this article to teach you form styling in detail, so for the moment we will just get you to add some css to make it look ok. first of all, add a <style> element to your page, inside your html head. ...
... teach you form styling in detail, so for the moment we will just get you to add some css to make it look ok. first of all, add a <style> element to your page, inside your html head. ...
...<style> </style> inside the style tags, add the following css: form { /* center the form on the page */ margin: 0 auto; width: 400
px; /* form outline */ padding: 1em; border: 1
px solid #ccc; border-radius: 1em; } ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } label { /* uniform size & alignment */ display: inline-block; width: 90
px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300
px; box-sizing: border-box; /* match form field borders */ border: 1
px solid #999; } input:focus, textarea:focus { /* additional highlight for focused element...
...: border-box; /* match form field borders */ border: 1
px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90
px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space between the labels and their text fields */ margin-left: .5em; } save and reload, and you'll see that your form should look much less ugly. note: you can find our version on github at first-form-styled.html (also see it live). sending form data to your web server th...
Adding vector graphics to the Web - Learn web development
you started. you can also go to the svg element reference, find out more details about other toys you can use in svg, and try those out too. this section is all about practising your research skills, and having some fun. if you get stuck and can't get your code working, you can always reset it using the reset button. ...
... some fun. if you get stuck and can't get your code working, you can always reset it using the reset button. ...
...fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> hello! ...
...k" stroke-width="2"> hello! ...
HTML table advanced features and accessibility - Learn web development
place to start; we also have an article specifically on styling tables). ...
...n styling tables). ...
...g: hidden example <!doctype html> <html> <head> <meta charset="utf-8"> <title>my spending record</title> <style> html { font-family: sans-serif; } table { border-collapse: collapse; border: 4
px solid rgb(200,200,200); letter-spacing: 1
px; font-size: 0.8rem; } td, th { border: 2
px solid rgb(190,190,190); padding: 10
px 20
px; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { paddi...
... rgb(190,190,190); padding: 10
px 20
px; } th { background-color: rgb(235,235,235); } td { text-align: center; } tr:nth-child(even) td { background-color: rgb(250,250,250); } tr:nth-child(odd) td { background-color: rgb(245,245,245); } caption { padding: 10
px; } tbody { font-size: 90%; font-style: italic; } tfoot { font-weight: bold; } </style> </head> <body> <table> <caption>how i chose to spend my money</caption> <thead> <tr> <th>purchase</th> <th>location</th> <th>date</th> <th>evaluation</t...
Getting started with React - Learn web development
ents into an html file, but the create-react-app cli is a common starting point for react applications. using it will allow you spend more time building your app, and less time fussing with setup. requirements in order to use create-react-app, you need to have node.js installed. it's recommended that you use the long-term support (lts) version. node includes npm (the node package manager), and n
px (the node package runner). you may also use the yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbas...
... on these, and on terminal commands in general. also bear in mind that react and reactdom produce apps that only work on a fairly modern set of browsers — ie9+ by way of some polyfills. it is recommended that you use a modern browser like firefox, safari, or chrome when working through these tutorials. ...
... writes scripts for starting and serving the application. creates a structure of files and directories that define the basic app architecture. ...
... directories that define the basic app architecture. initializes the directory as a git repository, if you have git installed on your computer. note: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. if you have both package managers installed and explicitly want to use npm, you can add the flag --use-npm when you run create-react-app: n
px create-react-app moz-todo-react --use-npm create-react-app will display a number of messages in your terminal while it works; this is normal! this might take a few minutes, so now might be a good time to go make a cup of tea. when the process is complete, cd into the moz-todo-react directory and run the command npm start. the scripts installed by create-react-app will start being served at a l...
Edit fonts - Firefox Developer Tools
k fonts used when nothing from the font-family css declaration has been applied. fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics. for standard (static) fonts, you will be able to change the settings listed below size the font-size for the inspected element. this can be set using em, rem, %,
px, vh, or vw units. you can select values using the slider or enter a numeric value directly into the text box. note: if you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated uni...
...nspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu. changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained. example: if 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to
px, 2rem becomes 20
px. line height the line-height of the inspected element. this can be set using unitless, em, %, or
px units. you can select values using the slider or enter a numeric value directly into the text box. changing the unit of measure changes the value relative to the font-size setting. example: if the font is 20 pixels high and the line-height is 1.5em, when you change the uni...
... weight the font-weight for the inspected element. you can select values using the slider or enter a numeric value directly into the text box. for non-variable fonts the slider ranges from 100 to 900 in increments of 100. ...
... weight the font-weight for the inspected element. you can select values using the slider or enter a numeric value directly into the text box. for non-variable fonts the slider ranges from 100 to 900 in increments of 100. note: for variable fonts (see below) that define a wght variation axis, this range is custom. ...
AnalyserNode - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="9...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="196" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width=...
... properties inherits properties from its parent, audionode. ...
... properties inherits properties from its parent, audionode. analysernode.fftsize is an unsigned l...
AudioBufferSourceNode - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="9...
...olas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="196" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" ...
...dale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="401" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><r...
...pace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="666" y="30" font-size="12
px" 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 i...
BroadcastChannel: message event - Web APIs
hen the user clicks a button. there are two "receiver" iframes that listen to the broadcast message and write the result into a <div> element. ...
..." iframes that listen to the broadcast message and write the result into a <div> element. ...
...ght: 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: 1
px solid black; padding: .5rem; height: 100
px; 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:...
...olid black; padding: .5rem; height: 100
px; 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: 1
px solid black; padding: .5rem; height: 100
px; 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 l...
CSS numeric factory functions - Web APIs
nitvalue() constructor. ...
...ber); css.vb(number); css.vmin(number); css.vmax(number); css.cm(number); css.mm(number); css.q(number); css.in(number); css.pt(number); css.pc(number); css.
px(number); // <angle> css.deg(number); css.grad(number); css.rad(number); css.turn(number); // <time> css.s(number); css.ms(number); // <frequency> css.hz(number); css.khz(number); // <resolution> css.dpi(number); css.dpcm(number); css.dp
px(number); // <flex> css.fr(number); examples we use the css.vmax() numeric factory function to create a cssunitvalue: let height = css.vmax(50); console.log( height ); // cssunitvalue {value: 50, unit: "vmax"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.
px() factory function: myelement.attribut...
... working draft initial definition ...
... working draft initial definition ...
CSSMathSum - Web APIs
mathsum object. properties cssmathsum.values returns a cssnumericarray object which contains one or more cssnumericvalue objects. event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator and values, and dig into the values a bit. ...
...in the future we may write the last three lines as: console.log( stylemap.get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.get('width').values[1].value ); ...
... // cssunitvalue {value: 30, unit: "percent"} console.log( stylemap.get('width').values[0].value ); // 30 console.log( stylemap.get('width').values[0].unit ); // 'percent' console.log( stylemap.get('width').values[1] ); // cssunitvalue {value: -20, unit: "
px"} console.log( stylemap.get('width').values[1].value ); // -20 console.log( stylemap.get('width').values[1].unit ); // '
px' the specification is still evolving. ...
...').values[1].value ); // -20 console.log( stylemap.get('width').values[1].unit ); // '
px' the specification is still evolving. in the future we may write the last three lines as: console.log( stylemap.get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.get('width').values[1].value ); // cssunitvalue {value: 20, unit: "
px"} console.log( stylemap.get('width').values[1].value.unit ); // '
px' specifications specification status comment css typed om level 1the definition of 'cssmathsum' in that specification. working draft initial definition. ...
CSSPrimitiveValue - Web APIs
y: 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" stroke="#d4dde4" stroke-width="2
px" /><text x="41" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="1...
... cssprimitivevalue.primitivetype read only an unsigned short representing t...
... cssprimitivevalue.primitivetype read only an unsigned short representing the type of the value. possible values are...
...loatvalue() method. css_pc the value is a <length> in picas. the value can be obtained by using the getfloatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_
px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians. the value can be obtained by using the getfloatvalue() method. css_rect the value is a rect() function. the value can be obtained by using the getrectvalue() method. css_rgbcolor the value is an <color>. t...
CanvasRenderingContext2D.filter - Web APIs
filter is applied. initial value. examples to view these examples, make sure to use a browser that supports this feature; see the compatibility table below. applying a blur this example blurs a piece of text using the filter property. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4
px)'; ctx.font = '48
px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like. this example applies the contrast, sepia, and drop-shadow filters to a photo of a gecko. html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div>...
... living standard initial definition. ...
... living standard initial definition. ...
... living standard initial definition. ...
Advanced animations - Web APIs
velocity vectors. to do so, we add the following checks to the draw method: if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } first demo let's see how it looks in action so far. move your mouse into the canvas to start the animation. ...
...anvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end. ...
... window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames. if you replace this method with a semi-transparent fillrect, you can easily create a trailing effect. ...
..., function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); adding mouse control to get some control over the ball, we can make it follow our mouse using the mousemove event, for example. the click event releases the ball and lets it bounce again. ...
Compositing example - Web APIs
.width = width; canvas2.height = height; lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts. ...
... lightmix() colorsphere(); runcomposite(); return; }; and this code, runcomposite(), handles the bulk of the work, relying on a number of utility functions to do the hard parts. ...
...0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.globalcompositeoperation = pop; ctx.drawimage(canvas2, 0, 0, width/2, height/2); ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14
px arial"; ctx.filltext(pop, 5, height/2 - 5); ctx.restore(); var ctx = canvastodrawon.getcontext('2d'); ctx.clearrect(0, 0, width, height) ctx.save(); ctx.drawimage(canvas1, 0, 0, width/2, height/2); ctx.fillstyle = "rgba(0,0,0,0.8)"; ctx.fillrect(0, height/2 - 20, width/2, 20); ctx.fillstyle = "#fff"; ctx.font = "14
px...
... var lightmix = function() { var ctx = canvas2.getcontext("2d"); ct...
CharacterData - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1...
... characterdata.d...
... characterdata.data is a domstring representing the text...
CompositionEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" wi...
... properties this interface also inherits properties of...
......
DataTransfer.getData() - Web APIs
example this example shows the use of the datatransfer object's getdata() and setdata() methods. ...
...xample shows the use of the datatransfer object's getdata() and setdata() methods. ...
...se of the datatransfer object's getdata() and setdata() methods. ...
...ansfer object's getdata() and setdata() methods. ...
Document - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" he...
...depending on the document's type (e.g. html, xml, svg,...
...depending on the document's type (e.g. html, xml, svg, …), a larger api is available: html do...
DocumentFragment - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width...
... properties this interface has no specific properti...
... properties this interface has no specific properties, but inherits those of its parent, nod...
DocumentType - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="12...
... documenttype.entities read only a namedno...
... documenttype.entities read only a namednodemap of entities declared in the dtd. ev...
Element.getBoundingClientRect() - Web APIs
ollleft == 'number' ? t : document.body).scrollleft // for scrolly (((t = document.documentelement) || (t = document.body.parentnode)) && typeof t.scrolltop == 'number' ? 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. ...
...r' ? t : document.body).scrollleft // for scrolly (((t = document.documentelement) || (t = document.body.parentnode)) && typeof t.scrolltop == 'number' ? 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. ...
....body).scrollleft // for scrolly (((t = document.documentelement) || (t = document.body.parentnode)) && typeof t.scrolltop == 'number' ? 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. ...
...t // for scrolly (((t = document.documentelement) || (t = document.body.parentnode)) && typeof t.scrolltop == 'number' ? 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. ...
Element.scrollLeft - Web APIs
as a value less than 0 (greater than 0 for right-to-left elements), scrollleft is set to 0. if specified as a value greater than the maximum that the content can be scrolled, scrollleft is set to the maximum. ...
...han 0 (greater than 0 for right-to-left elements), scrollleft is set to 0. if specified as a value greater than the maximum that the content can be scrolled, scrollleft is set to the maximum. ...
...than 0 for right-to-left elements), scrollleft is set to 0. if specified as a value greater than the maximum that the content can be scrolled, scrollleft is set to the maximum. ...
... specified as a value greater than the maximum that the content can be scrolled, scrollleft is set to the maximum. 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: 100
px; height: 100
px; border: 1
px solid #ccc; overflow-x: scroll; } #content { width: 250
px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification. working draft ...
Element.setCapture() - Web APIs
targettoelement if true, all events are targeted directly to this element; if false, events can also fire at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
... targeted directly to this element; if false, events can also fire at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
...ement; if false, events can also fire at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
...t; if false, events can also fire at descendants of this element. example in this example, the current mouse coordinates are drawn while you mouse around after clicking and holding down on an element. ...
Element - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...it implements the properti...
...it implements the properties of parentnode, childnode, nondocumenttyp...
Comparison of Event Targets - Web APIs
itoriginaltarget and originaltarget todo: only available in a mozilla-based browser? todo: only suitable for extension-developers? ...
...ased browser? todo: only suitable for extension-developers? ...
...mples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150
px; width: 100%; } td { border: 1
px solid #ccc; font-weight: bold; padding: 5
px; min-height: 30
px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's e...
... the eventtarget which the pointing device entered todo: also needs descriptions for dragenter and dragexit events. example <hbox id="outer"> <hbox id="inner" onmouseover="dump('mouseover ' + event.relatedtarget.id + ' > ' + event.target.id + '\n');" onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedtarget.id + '\n');" style="margin: 100
px; border: 10
px solid black; width: 100
px; height: 100
px;" /> </hbox> ...
FocusEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="1...
... properties this interface also inherits properties from its...
... properties this interface also inherits properties from its parent uievent, and indirectly from even...
GlobalEventHandlers.onmousemove - Web APIs
t object as its sole argument. examples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
...mples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
...ates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
... { position: absolute; z-index: 9999; padding: 6
px; background: #ffd; border: 1
px #886 solid; border-radius: 5
px; } 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() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follo...
HTMLElement - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="436" y="30" font-size="12
px" 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, glob...
HTMLImageElement.alt - Web APIs
rs: if you change the css below, please be sure to close the details box using the toggle at the top of the css view before saving. otherwise, readers will find it open by default, which is not the intent here. ...
...find it open by default, which is not the intent here. ...
...reet, quis aliquet odio lobortis. nam ac mauris at risus laoreet cursus vitae et sapien. etiam molestie auctor eros, ac porta risus scelerisque sit amet. ut nunc neque, porta eu auctor at, tempor et arcu. </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. ...
...a photo of a yellow teapot might literally have its alt attribute set to "a yellow teapot". ...
HTMLImageElement.height - Web APIs
or not. if the image is being rendered to a visual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. ...
...eing rendered to a visual medium such as a screen or printer, the height is expressed in css pixels. otherwise, the image's height is represented using its natural (intrinsic) height, adjusted for the display density as indicated by naturalheight. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. ...
...eight, adjusted for the display density as indicated by naturalheight. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400
px wide, the image is drawn at a width of 200
px; otherwise, it's drawn at 300
px. ...
...vided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400
px wide, the image is drawn at a width of 200
px; otherwise, it's drawn at 300
px. <p>image height: <span class="size">?</span>
px (resize to update)</p> <img src="/files/17373/clock-demo-200
px.png" alt="clock" srcset="/files/17373/clock-demo-200
px.png 200w, /files/17374/clock-demo-400
px.png 400w" sizes="(max-width: 400
px) 200
px, 300
px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. var clockimage = documen...
HTMLImageElement.width - Web APIs
ium or not. if the image is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. ...
...is being rendered to a visual medium such as a screen or printer, the width is expressed in css pixels. otherwise, the image's width is represented using its natural (intrinsic) width, adjusted for the display density as indicated by naturalwidth. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. ...
... width, adjusted for the display density as indicated by naturalwidth. example in this example, two different sizes are provided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400
px wide, the image is drawn at a width of 200
px; otherwise, it's drawn at 400
px. ...
...ovided for an image of a clock using the srcset attribute. one is 200
px wide and the other is 400
px wide. further, the sizes attribute is provided to specify the width at which the image should be drawn given the viewport's width. html specifically, for viewports up to 400
px wide, the image is drawn at a width of 200
px; otherwise, it's drawn at 400
px. <p>image width: <span class="size">?</span>
px (resize to update)</p> <img src="/files/16864/clock-demo-200
px.png" alt="clock" srcset="/files/16864/clock-demo-200
px.png 200w, /files/16797/clock-demo-400
px.png 400w" sizes="(max-width: 400
px) 200
px, 400
px"> javascript the javascript code looks at the width to determine the width of the image at the moment. this is done in the window's load and resize event handlers...
IDBOpenDBRequest - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="...
...as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="201" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" w...
... methods no methods, but inherits methods from its parents ...
... methods no methods, but inherits methods from its parents idbrequest and eventtarget. events list...
Index - Web APIs
api, audiolistener, deprecated, method, reference, référence(2), web audio api, setposition void. 152 audiolistener.speedofsound api, audiolistener, deprecated, property, reference, web audio api, speedofsound the speedofsound property of the audiolistener interface is a double value representing the speed of sound, in meters per second. 153 audiolistener.u
px api, audio, audiolistener, property, reference, web audio api, u
px the u
px read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the up direction the listener is pointing in. 154 audiolistener.upy api, audiolistener, property, reference, web audio api, upy the upy read-only property of the audiol...
...ents the cssconditionrule interface, and therefore the cssrule and cssgroupingrule interfaces with a type value of 12 (cssrule.supports_rule). 481 cssunitvalue api, css typed object model api, cssunitvalue, experimental, houdini, interface, reference the cssunitvalue interface of the css typed object model api represents values that contain a single unit type. ...
... 483 cssunitvalue.unit api, css typed object model api, cssunitvalue, experimental, houdini, property, reference, unit the cssunitvalue.unit read-only property of the cssunitvalue interface returns a usvstring indicating the type of unit. ...
...ased upon dommatrixreadonly—adds mutability, allowing you to alter the matrix after creating it. 721 dommatrixreadonly() api, constructor, experimental, geometry, geometry interfaces, reference, matrix the dommatrixreadonly constructor creates a new dommatrixreadonly object which represents 4x4 matrices, suitable for 2d and 3d operations. 722 dommatrixreadonly.fli
px() api, dommatrix, dommatrixreadonly, experimental, fli
px, geometry, geometry interfaces, interface, method, reference, matrix the fli
px() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix flipped about the x-axis. 723 dommatrixreadonly.scale() api, dommatrix, dommatrixreadonly, experimental, geometry, geometry interface...
InputEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="1...
... properties this interface inherits properties from its parents, uievent and event. ...
... properties this interface inherits properties from its parents, uievent and event. inputevent.dataread only returns a d...
InstallEvent - Web APIs
splay: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150"...
...consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="191" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" ...
... properties inherits properties from its ancestor, event. i...
... properties inherits properties from its ancestor, event. installevent.activeworker read only retu...
KeyboardEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width...
... constants the keyboardevent interface defines the following constants. ...
... constants the keyboardevent interface defines the following constants. keyboard locations the following consta...
MouseEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="1...
... properties this interface also inherits properties of its parents, uievent and event...
... properties this interface also inherits properties of its parents, uievent and event. mouseevent.altkey read only return...
OfflineAudioContext - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width...
...,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="211" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y=...
... properties also inherits proper...
... properties also inherits properties from its parent interface, baseaudio...
ProcessingInstruction - Web APIs
tyle="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="#d4dde4" stroke-width="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="1...
...nsolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="331" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436"...
... mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="541" y="30" font-size="12
px" 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 ...
SVGElement - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" hei...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="1...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="431" y="30" font-size="12
px" 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, htmlorforeignele...
ServiceWorkerGlobalScope - Web APIs
nline-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="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" ...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="236" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect ...
... service...
... serviceworkerglobalscope.registration read only ...
SyncEvent - Web APIs
splay: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150"...
...consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="191" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" wid...
... properties inherits properties from its ancestor, event. syncevent.tag...
... properties inherits properties from its ancestor, event. syncevent.tag read only returns the developer-define...
TouchEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
...-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="153.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="1...
... properties this interface inherits properties from its parent, uievent and event. ...
... properties this interface inherits properties from its parent, uievent and event. touchevent.altkey read only a boolean ...
Starting up and shutting down a WebXR session - Web APIs
sistencies among implementations in the browsers that do have it, so it can sometimes also be useful even if webxr is natively available. here we define a getxr() function, which returns the xrsystem object after optionally installing the polyfill, assuming that the polyfill has been included or loaded using a prior <script> tag. ...
...etxr() function, which returns the xrsystem object after optionally installing the polyfill, assuming that the polyfill has been included or loaded using a prior <script> tag. ...
... that the polyfill has been included or loaded using a prior <script> tag. ...
...tag. let webxrpolyfill = null; function getxr(usepolyfill) { let tem
pxr; let temppoly; switch(usepolyfill) { case "if-needed": if (!navigator.xr) { webxrpolyfill = new webxrpolyfill(); } tem
pxr = navigator.xr; break; case "yes": webxrpolyfill = new webxrpolyfill(); tem
pxr = navigator.xr; break; case "no": default: tem
pxr = navigator.xr; break; } return tem
pxr; } const xr = getxr("no"); // get the native xrsystem object const xr = getxr("yes"); // always returns an xrsystem from the polyfill const xr = getxr("if-needed"); // use the polyfill only if navigator.xr missing the returned xrsystem object can then be used according to the documentation provided here on mdn. the global variable webxrpolyfi...
XMLHttpRequest - Web APIs
line-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151...
...e mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="276" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x=...
... if your communication needs to involve receiving ev...
... if your communication needs to involve receiving event data or message data from a server, c...
ARIA annotations - Accessibility
aria annotations can help us here too. let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h3>chris sai...
...aria annotations can help us here too. let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really ...
...aria annotations can help us here too. let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really thin...
...aria annotations can help us here too. let’s say we have a comment box like so: <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this could use ...
ARIA: button role - Accessibility
the example by adding a name to the text box. the button will cause the name to be added to a list. ...
...down="handlebtnkeydown()"> mute audio </button> <span role="button" tabindex="0" aria-pressed="false" onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
...ydown()"> mute audio </button> <span role="button" tabindex="0" aria-pressed="false" onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
...nclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your browser does not support the <code>audio</code> element. ...
-webkit-border-before - CSS: Cascading Style Sheets
the -webkit-border-before css property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet. /* border values */ -webkit-border-before: 1
px; -webkit-border-before: 2
px dotted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the v...
... ...
... ...
... ...
:host - CSS: Cascading Style Sheets
specifications specification status comment css scoping module level 1the definition of ':host' in that specification. working draft initial definition. browser compatibility ...
... specifications specification status comment css scoping module level 1the definition of ':host' in that specification. working draft initial definition. browser compatibility the ...
... specifications specification status comment css scoping module level 1the definition of ':host' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structure...
... specifications specification status comment css scoping module level 1the definition of ':host' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured da...
@supports - CSS: Cascading Style Sheets
expression, resulting in the negation of the original one. the following example returns true if the browser's transform-origin property doesn't consider 10em 10em 10em valid: @supports not (transform-origin: 10em 10em 10em) {} as with any operator, the not operator can be applied to a declaration of any complexity. the following examples are both valid: @supports not (not (transform-origin: 2
px)) {} @supports (display: grid) and (not (display: inline-grid)) {} note: there is no need to enclose the not operator between two parentheses at the top level. to combine it with other operators, like and and or, the parentheses are required. the and operator the and operator creates a new expression from the conjunction of two shorter expressions. it returns true only if both of the shorter...
... = [ '~' | | | '^' | '$' | '*' ]? ...
... '*' ]? ...
...| s examples testing for the support of a given css property @supports (animation-name: test) { … /* css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given css property or a prefixed version @supports ((perspective: 10
px) or (-moz-perspective: 10
px) or (-webkit-perspective: 10
px) or (-ms-perspective: 10
px) or (-o-perspective: 10
px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fallback alternative for text-align-last: justify */ } testing for the support of custom prop...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
'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. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. ...
...tml 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. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. ...
...ate 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. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. ...
...) 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. some css that's not important (the style of the "run" button itself) isn't shown here, for brevity. .runbutton { cursor: pointer; width: 300
px; border: 1
px solid black; font-size: 16
px; text-align: center; margin-top: 12
px; padding-top: 2
px; padding-bottom: 4
px; color: white; background-color: darkgreen; font: 14
px "open sans", "arial", sans-serif; } @keyframes colorchange { 0% { background: yellow } 100% { background: blue } } .box { width: 100
px; height: 100
px; border: 1
px solid black; } .changing { animation: colorchange 2s; } there are two classes here. the "box" class is the basic de...
Using CSS animations - CSS: Cascading Style Sheets
s in a single rule, and set separate durations, iteration counts, etc. for the different animations. let’s look at some quick examples to explain the different permutations: in this first example, we have three animation names set, but only one duration and iteration count. ...
...ation-name: fadeinout, moveleft300
px, bounce; animation-duration: 3s; animation-iteration-count: 1; in this second example, we have three values set on all three properties. in this case each animation is run with the corresponding values in the same position on each property, so for example fadeinout has a duration of 2.5s and an iteration count of 2, etc. animation-name: fadeinout, moveleft300
px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5; in this third case, there are three animations specified, but only two durations and iteration counts. in such cases where there are not enough values to give a separate value to each animation, the values cycle from start to finish. ...
...inout, moveleft300
px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5; in this third case, there are three animations specified, but only two durations and iteration counts. in such cases where there are not enough values to give a separate value to each animation, the values cycle from start to finish. so for example, fadeinout gets a duration of 2.5s and moveleft300
px gets a duration of 5s. we’ve now got to the end of the available duration values, so we start from the beginning again — bounce therefore gets a duration of 2.5s. the iteration counts (and any other property values you specify) will be assigned in the same way. ...
...ycle from start to finish. so for example, fadeinout gets a duration of 2.5s and moveleft300
px gets a duration of 5s. we’ve now got to the end of the available duration values, so we start from the beginning again — bounce therefore gets a duration of 2.5s. the iteration counts (and any other property values you specify) will be assigned in the same way. animation-name: fadeinout, moveleft300
px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1; using animation events you can get additional control over animations — as well as useful information about them — by making use of animation events. these events, represented by the animationevent object, can be used to detect when animations start, finish, and begin a new iteration. each event includes the time at whi...
CSS Grid Layout - CSS: Cascading Style Sheets
xample, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...ion themselves so they actually overlap and layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...layer, similar to css positioned elements. basic example the example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. items have been placed onto the grid using line-based placement. ...
...r-radius: 5
px; 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-template-columns: repeat(3, 1fr); grid-gap: 10
px; grid-auto-rows: minmax(100
px, auto); } .one { grid-column: 1 / 3; grid-row: 1; } .two { grid-column: 2 / 4; grid-row: 1 / 3; } .three { grid-column: 1; grid-row: 2 / 5; } .four { grid-column: 3; grid-row: 3; } .five { grid-column: 2; grid-row: 4; } .six { grid-column: 3; grid-row: 4; } reference css properties grid-template-columns grid-template-rows grid-tem...
Using media queries - CSS: Cascading Style Sheets
so specify a media type. note: in level 3, the not keyword can't be used to negate an individual media feature expression, only an entire media query. only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. when not using only, older browsers would interpret the query screen and (max-width: 500
px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. if you use the only operator, you must also specify a media type. , (comma) commas are used to combine multiple media queries into a single rule. each query in a comma-separated list is treated separately from the others. thus, if any of the queries in a list is true, the entire media statement retur...
...ies styles when the user's primary input mechanism (such as a mouse) can hover over elements: @media (hover: hover) { ... } many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. for example, this css will apply styles only if your browser's viewport width is equal to or narrower than 12450
px: @media (max-width: 12450
px) { ... } if you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is not zero (or none, in level 4). for example, this css will apply to any device with a color screen: @media (color) { ... } if a feature doesn't apply to the device on which the browser is running, expressions involving that media...
...hain the media features to the screen media type: @media screen and (min-width: 30em) and (orientation: landscape) { ... } testing for multiple queries you can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. ...
...d (min-width: 30em) and (orientation: landscape) { ... } testing for multiple queries you can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. for instance, the following rule will apply its styles if the user's device has either a minimum height of 680
px or is a screen device in portrait mode: @media (min-height: 680
px), screen and (orientation: portrait) { ... } taking the above example, if the user had a printer with a page height of 800
px, the media statement would return true because the first query would apply. likewise, if the user were on a smartphone in portrait mode with a viewport height of 480
px, the second query would apply and the media statement would still return true. inverting a query's meani...
align-content - CSS: Cascading Style Sheets
n typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>where <baseline-position> = [ first | last ]? ...
...formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>where <baseline-position> = [ first | last ]? ...
...| space-evenly | stretch<overflow-position> = unsafe | safe<content-position> = center | start | end | flex-start | flex-end examples css #container { height:200
px; width: 240
px; 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, 50
px); } div > div { box-sizing: border-box; border: 2
px solid #8c8c8c; width: 50
px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30
px; } #item2 { background-color: #a0c8ff; min-height: 50
px; } #item3 { background-color: #ffa08c; min-height: 40
px; } #item4 { background-color: #ffff8c; min-height: 60
px; }...
...x solid #8c8c8c; width: 50
px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30
px; } #item2 { background-color: #a0c8ff; min-height: 50
px; } #item3 { background-color: #ffa08c; min-height: 40
px; } #item4 { background-color: #ffff8c; min-height: 60
px; } #item5 { background-color: #ff8cff; min-height: 70
px; } #item6 { background-color: #8cffff; min-height: 50
px; font-size: 30
px; } select { font-size: 16
px; } .row { margin-top: 10
px; } 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:...
align-items - CSS: Cascading Style Sheets
malapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]where <baseline-position> = [ first | last ]? ...
... elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]where <baseline-position> = [ first | last ]? ...
...line<overflow-position> = unsafe | safe<self-position> = center | start | end | self-start | self-end | flex-start | flex-end examples css #container { height:200
px; width: 240
px; 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, 50
px); } div > div { box-sizing: border-box; border: 2
px solid #8c8c8c; width: 50
px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30
px; } #item2 { background-color: #a0c8ff; min-height: 50
px; } #item3 { background-color: #ffa08c; min-height: 40
px; } #item4 { background-color: #ffff8c; min-height: 60
px; }...
...x solid #8c8c8c; width: 50
px; display: flex; align-items: center; justify-content: center; } #item1 { background-color: #8cffa0; min-height: 30
px; } #item2 { background-color: #a0c8ff; min-height: 50
px; } #item3 { background-color: #ffa08c; min-height: 40
px; } #item4 { background-color: #ffff8c; min-height: 60
px; } #item5 { background-color: #ff8cff; min-height: 70
px; } #item6 { background-color: #8cffff; min-height: 50
px; font-size: 30
px; } select { font-size: 16
px; } .row { margin-top: 10
px; } 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: ...
<basic-shape> - CSS: Cascading Style Sheets
mands in the same order, interpolate each path data command as real numbers. in all other cases no interpolation occurs. examples animated polygon in this example, we use the @keyframes at-rule to animate a clip path between two polygons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. ...
... order, interpolate each path data command as real numbers. in all other cases no interpolation occurs. examples animated polygon in this example, we use the @keyframes at-rule to animate a clip path between two polygons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. ...
.... in all other cases no interpolation occurs. examples animated polygon in this example, we use the @keyframes at-rule to animate a clip path between two polygons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. ...
...ons. note that both polygons have the same number of vertices, which is necessary for this type of animation to work. ...
border-block-end - CSS: Cascading Style Sheets
s interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1
px; border-block-end: 2
px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
border-block-start - CSS: Cascading Style Sheets
ctive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-block-start-color border-block-start-style border-block-start-width syntax border-block-start: 1
px; border-block-start: 2
px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-botto...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
border-image-slice - CSS: Cascading Style Sheets
(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. the source image for the borders is as follows: the diamonds are 30
px across, therefore setting 30 pixels as the value for both border-width and border-image-slice will get you complete and fairly crisp diamonds in your border: border-width: 30
px; border-image-slice: 30; these are the default values we have used in this example. however, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to ap...
...scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an svg image). ...
...<label for="width">slide to adjust <code>border-width</code></label> <input type="range" min="10" max="45" id="width"> <output id="width-output">30
px</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">30</output> </li> </ul> css .wrapper { width: 400
px; height: 300
px; } div > div { width: 300
px; height: 200
px; border-width: 30
px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getele...
...ntent: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-output'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + '
px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of '...
border-inline-end - CSS: Cascading Style Sheets
interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1
px; border-inline-end: 2
px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are bor...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
border-inline-start - CSS: Cascading Style Sheets
tive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-start-color border-inline-start-style border-inline-start-width syntax border-inline-start: 1
px; border-inline-start: 2
px dotted; border-inline-start: medium dashed green; the physical border to which border-inline-start maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties ...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
break-inside - CSS: Cascading Style Sheets
oblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid | avoid-page | avoid-column | avoid-region examples avoiding breaking inside a figure in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of paragraphs laid out in multiple columns using column-width: 200
px. we also have a <figure> containing an image and a caption. by default, it is possible for you to get a break between the image and its caption, which is not what we want. to avoid this, we have set break-inside: avoid on the <figure>, which causes them to always stay together. html <article> <h1>main heading</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla vitae fri...
...elit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. ...
... candidate recommendation no change. ...
... candidate recommendation no change. css regions module level 1the definition of 'break-inside' in that specification. ...
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
n multi-column, flexible box, and grid layouts. css grid layout initially defined the grid-column-gap property. this prefixed property is being replaced by column-gap. however, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property. syntax /* keyword value */ column-gap: normal; /* <length> values */ column-gap: 3
px; column-gap: 2.5em; /* <percentage> value */ column-gap: 3%; /* global values */ column-gap: inherit; column-gap: initial; column-gap: unset; the column-gap property is specified as one of the values listed below. values normal the browser's default spacing is used between columns. for multi-column layout this is specified as 1em. for all other layout types it is 0. <length> the size o...
...ed 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: 100
px; column-gap: 20
px; } #flexbox > div { border: 1
px 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: 20
px; } #grid { display: grid; height: 100
px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100
px; column-gap: 20
px; } #grid > div { ...
...gap: 20
px; } #flexbox > div { border: 1
px 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: 20
px; } #grid { display: grid; height: 100
px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100
px; column-gap: 20
px; } #grid > div { border: 1
px solid green; background-color: lime; } result multi-column layout html <p class="content-box"> this is some multi-column text with a 40
px column gap created with the css `column-gap` property. ...
... working draft applies to grid and flexbox css grid layoutthe definition of 'column-gap' in that specification. ...
contain - CSS: Cascading Style Sheets
up below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> each <article> and <img> is given a border, and the images are floated: img { float: left; border: 3
px solid black; } article { border: 1
px solid black; } float interference if we were to insert another image at the bottom of the first article, a large portion of the dom tree may be re-laid out or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up...
...ut or repainted, and this would also interfere with the layout of the second article: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3
px solid black; } article { border: 1
px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the browser understands it only needs to recalculate the containing element's subtree, and not anything ou...
... recommendation init...
... recommendation initial definition ...
element() - CSS: Cascading Style Sheets
f an element to use as the background, specified using the html attribute #id on the element. examples these examples can be viewed live in builds of firefox that support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. ...
...o use as the background, specified using the html attribute #id on the element. examples these examples can be viewed live in builds of firefox that support -moz-element(). a somewhat realistic example this example uses a hidden <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. ...
...den <div> as a background. the background element uses a gradient, but also includes text that is rendered as part of the background. <div style="width:400
px; height:400
px; 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:1024
px; height:1024
px; 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...
...e background for the content including the paragraph "this box uses the element with the #mybackground1 id as its background!". a somewhat more bizarre example this example uses a hidden <button> element in a repeating pattern as its background. this demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices. <div style="width:400
px; height:100
px; 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. working draft deferr...
flex-shrink - CSS: Cascading Style Sheets
t; the flex-shrink property is specified as a single <number>. values <number> see <number>. negative values are invalid. defaults to 1. formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500
px; the flex-basis of the flex items is 120
px.</p> <p>a, b, c have flex-shrink:1 set. 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="ba...
... candidate recommendation initial definition ...
... candidate recommendation initial definition ...
... candidate recommendation initial definition ...
font-size-adjust - CSS: Cascading Style Sheets
the size of lowercase letters to the size of the font). to use this property in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. this means the value specified for the property should generally be the aspect ratio of the first choice font. for example, a style sheet that specifies: font-size: 14
px; font-size-adjust: 0.5; ... is really specifying that the lowercase letters of the font should be 7
px high (0.5 × 14
px). this will still produce reasonable results in browsers that do not support font-size-adjust, where a 14
px font will be used. syntax values none choose the size of the font based only on the font-size property. <number> choose the size of the font so that its lowe...
...hether or not they support font-size-adjust. 0 yields text of zero height (hidden text). formal definition initial valuenoneapplies toall elements. ...
...definition initial valuenoneapplies toall elements. ...
...d ::first-line.inheritedyescomputed valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10
px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10
px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10
px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10
px; } .verdana { font-family: verdana, sans-serif; font-size: 10
px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10
px; } results specifications specification status comment css fonts module leve...
image() - CSS: Cascading Style Sheets
ng the x and y axis, along with a width and height — onto the image source to display only a section of the source image. the section of the image defined in the parameter becomes a standalone image. the syntax looks like so: background-image: image('myimage.webp#xywh=0,20,40,60'); the background image of the element will be the portion of the image myimage.webp that starts at the coordinate 0
px, 20
px (the top left hand corner) and is 40
px wide and 60
px tall. the #xywh=#,#,#,# media fragment syntax takes four comma separated numeric values. the first two represent the x and y coordates for the starting point of the box that will be created. the third value is the width of the box, and the last value is the height. by default, these are pixel values. the spacial dimension definition in t...
...lly flippled, as if transform: scalex(-1) had been set. the text will also be displayed left-to-right. 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. providing fallback images .help::before { content: image("try.webp", "try.svg", "try.gif"); } in this example, the browser will display an image as generated content before the content of the element with the class of help. the image displayed will be a webp image, if webp is supported. if not, the svg example will be shown. if svg is...
...try.webp", "try.svg", "try.gif"); } in this example, the browser will display an image as generated content before the content of the element with the class of help. the image displayed will be a webp image, if webp is supported. if not, the svg example will be shown. if svg is not supported, the gif version will display. ...
...y.svg", "try.gif"); } in this example, the browser will display an image as generated content before the content of the element with the class of help. the image displayed will be a webp image, if webp is supported. if not, the svg example will be shown. if svg is not supported, the gif version will display. putting color on top of a background image .quarterlogo {height: 200
px; width: 200
px; border: 1
px 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. had we ...
inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-end: 3
px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheri...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-start: 3
px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. formal definition initial valueautoapplies toposit...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-end: 3
px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the le...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-start: 3
px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the ...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
<length-percentage> - CSS: Cascading Style Sheets
ax refer to the documentation for <length> and <percentage> for details of the individual syntaxes allowed by this type. examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. ...
...ntage> for details of the individual syntaxes allowed by this type. examples length-percentage examples the following simple example demonstrates several properties that use <length-percentage> values. html <p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200
px; margin: 3rem; padding: 1%; border-radius: 10
px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1
px 1
px 1
px red; border: 5
px solid red; letter-spacing: 3
px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. th...
... editor's draft css values and units module level 3the definition of '<length-percentage>' in that specification. ...
... editor's draft css values and units module level 3the definition of '<length-percentage>' in that specification. candidate recommendation defines <length-percentage>. ...
letter-spacing - CSS: Cascading Style Sheets
lues of letter-spacing bring characters closer together. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.3em; letter-spacing: 3
px; letter-spacing: .3
px; /* global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset; values normal the normal letter spacing for the current font. unlike a value of 0, this keyword allows the user agent to alter the space between characters in order to justify text. <length> specifies extra inter-character space in addition to the default space between char...
... working draft ...
... working draft no change. css level 2 (revision 1)the definition of 'letter-spacing' in that specification. recommendation no change. scalable vector graphics (svg) 1.1 (sec...
... working draft no change. ...
margin-block-end - CSS: Cascading Style Sheets
n element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
margin-block-start - CSS: Cascading Style Sheets
element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
margin-inline-end - CSS: Cascading Style Sheets
margin-bottom or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
margin-inline-start - CSS: Cascading Style Sheets
gin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ margin-inline-start: 10
px; /* an absolute length */ margin-inline-start: 1em; /* relative to the text size */ margin-inline-start: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-inline-start: auto; /* global values */ margin-inline-start: inherit; it relates to margin-block-start, margin-block-end, and margin-inline-end, which define the other margins of the element. value...
... editor's draft initial definition ...
... editor's draft initial definition ...
... editor's draft initial definition ...
mask-type - CSS: Cascading Style Sheets
<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: 100
px; width: 100
px; background-color: rgb(128, 128, 128); border: solid 1
px 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"> ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
... candidate recommendation initial definition. ...
min() - CSS: Cascading Style Sheets
on can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at most 200
px, but will be smaller if the viewport is less than 400
px wide (in which case 1vw would be 4
px, so 50vw would be 200
px). in other words, the maximum width is 200
px. think of the min() value as providing the maximum value a property can have. syntax the min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as t...
... understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks. ...
...rion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks. ...
...setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks. let's look at some css: input, label { padding: 2
px; box-sizing: border-box; display: inline-block; width: min(40%, 400
px); background-color: pink; } form { margin: 4
px; border: 1
px solid black; padding: 4
px; } here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. we declare the input and label to be the lesser of 40% of the form width up to the padding or 400
px wide, whichever is smaller. in other words, the widest that the label and input can be is 400
px. the narrowest they will be is 40% of the form's wid...
offset-anchor - CSS: Cascading Style Sheets
ath that is actually moving along the path. syntax /* keyword values */ offset-anchor: top; offset-anchor: bottom; offset-anchor: left; offset-anchor: right; offset-anchor: center; offset-anchor: auto; /* <percentage> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10
px right 20
px; offset-anchor: right 3em bottom 10
px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's transform-origin, unless offset-path is none, in which case it takes its value from offset-position. <position> a <position> defines an x/y coordinate, to place an item relative to the...
...ther two cause the <div>'s top-right and bottom-left points to move along the path, respectively. ...
...he <div>'s top-right and bottom-left points to move along the path, respectively. ...
...on> <section> <div class="offset-anchor2"></div> </section> <section> <div class="offset-anchor3"></div> </section> css div { offset-path: path('m 0,20 l 200,20'); animation: move 3000ms infinite alternate ease-in-out; width: 40
px; height: 40
px; } section { background-image: linear-gradient(to bottom, transparent, transparent 49%, #000 50%, #000 51%, transparent 52%); border: 1
px solid #ccc; margin-bottom: 10
px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification sta...
outline-style - CSS: Cascading Style Sheets
t] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ...
...user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g. a rounded edge outline with semi-translucent outer pixels that appears to glow. ...
..." */ } /* to make the demo clearer */ * { outline-width: 10
px; padding: 15
px; } 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: 10
px; padding: 15
px; } 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: 10
px; padding: 15
px; } result setting outline style to groove and ridge html <div> <div class="gro...
...yle: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10
px; padding: 15
px; } 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: 10
px; padding: 15
px; } result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10
px; padding: 15
px; } result specifications specification status comment cs...
padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
...values as the padding-left property. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-rl; padding-block: 20
px 40
px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification. editor's draft initial definition ...
padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
...e, direction, and text-orientation. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20
px 40
px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification. editor's draft initial definition ...
<resolution> - CSS: Cascading Style Sheets
ed below. as with all css dimensions, there is no space between the unit literal and the number. units dpi represents the number of dots per inch. screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. as 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm. dpcm represents the number of dots per centimeter. as 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi. dp
px represents the number of dots per
px unit. due to the 1:96 fixed ratio of css in to css
px, 1dp
px is equivalent to 96dpi, which corresponds to the default resolution of images displayed in css as defined by image-resolution. x alias for dp
px. note: although the number 0 is always the same regardless of unit, the unit may not be omitted. in other words, 0 is invalid and does not represent 0d...
...ten dpi the number must use digits only. 0 the unit is required. ...
...ten dpi the number must use digits only. 0 the unit is required. ...
...ust use digits only. 0 the unit is required. specifications specification status comment css values and units module level 4the definition of '<resolution>' in that specification. editor's draft adds the x unit. css values and units module level 3the definition of '<resolution>' in that specification. candidate recommendation adds the dp
px unit. media queriesthe definition of '<resolution>' in that specification. recommendation initial definition. ...
text-overflow - CSS: Cascading Style Sheets
rcentage> is resolved against the width of the line box. values lower than 0 are clipped to 0. values greater than the width of the line box are clipped to the width of the line box. ...
...solved against the width of the line box. values lower than 0 are clipped to 0. values greater than the width of the line box are clipped to the width of the line box. ...
...th of the line box. values lower than 0 are clipped to 0. values greater than the width of the line box are clipped to the width of the line box. ...
...f the line box. values lower than 0 are clipped to 0. values greater than the width of the line box are clipped to the width of the line box. ...
scale() - CSS: Cascading Style Sheets
it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences. ...
...dia query that will turn off animations if the user has reduced animation specified in their system preferences. ...
... working draft initial definition ...
... working draft initial definition ...
scaleZ() - CSS: Cascading Style Sheets
inate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. the scaling is not isotropic, and the angles of the element are not conserved. scalez(-1) defines an axial symmetry, with the z-axis passing through the origin (as specified by the transform-origin property). in the above interactive examples, perspective: 550
px; (to create a 3d space) and transform-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube. note: scalez(sz) is equivalent to to scale3d(1, 1, sz). syntax scalez(s) values s is a <number> representing the scaling factor to apply on the z-coordinate of each point of the element. cartesian coordinates on...
... ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
...eous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane. ...
... applies to the 3d space and can't be represented on the plane. 10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width: 80
px; height: 80
px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400
px) translatez(-100
px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400
px) scalez(2) translatez(-100
px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification. editor's draft i...
<transform-function> - CSS: Cascading Style Sheets
on>rotatez(360deg)</option> <option>rotate3d(1, 1, 1, 90deg)</option> <option>scale(1.5)</option> <option>scalex(1.5)</option> <option>scaley(1.5)</option> <option>scalez(1.5)</option> <option>scale3d(1, 1.5, 1.5)</option> <option>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100
px, 100
px)</option> <option>translatex(100
px)</option> <option>translatey(100
px)</option> <option>translatez(100
px)</option> <option>translate3d(50
px, 50
px, 50
px)</option> <option>perspective(200
px)</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 {...
...ion> <option>translatex(100
px)</option> <option>translatey(100
px)</option> <option>translatez(100
px)</option> <option>translate3d(50
px, 50
px, 50
px)</option> <option>perspective(200
px)</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: 400
px; height: 200
px; padding: 50
px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100
px; height: 100
px; 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%; position: absolute; backface-v...
... background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100
px; height: 100
px; 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%; position: absolute; backface-visibility: inherit; font-size: 60
px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50
px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50
px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50
px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50
px); } .top { background: rgba(...
...90,.7); transform: translatez(50
px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50
px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50
px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50
px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50
px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50
px); } .select-form { margin-top: 50
px; } javascript const selectelem = document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.
Challenge solutions - Developer guides
unter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. solution the following rule achieves this effect: ul { border: 10
px solid lightblue; width: 100
px; } layout default image position fixed image position challenge change your sample document, doc2.html, adding this tag to it near the end, just before </body>: <img id="fixed-pin" src="yellow-pin.png" alt="yellow map pin"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the image ...
...n.png" alt="yellow map pin"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the image appears to the right of the second list. challenge add a rule to your stylesheet that places the image in the top right of your document. ...
...llow map pin"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the image appears to the right of the second list. challenge add a rule to your stylesheet that places the image in the top right of your document. ...
... solution cut and paste the lines between /* print only */ and /* end print only */ into a file named style4_print.css. ...
<input type="email"> - HTML: Hypertext Markup Language
describing the problem they need help with. we want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email validate against both the standard e-mail address validation and the specified pattern, you can implement this easily. ...
...nt to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email validate against both the standard e-mail address validation and the specified pattern, you can implement this easily. ...
...provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email validate against both the standard e-mail address validation and the specified pattern, you can implement this easily. ...
...but for security purposes, we require that the address be an internal corporate e-mail address. since inputs of type email validate against both the standard e-mail address validation and the specified pattern, you can implement this easily. ...
<input type="image"> - HTML: Hypertext Markup Language
html <form> <p>login to your account</p> <div> <label for="userid">...
... html <form> <p>login to your account</p> <div> <label for="userid">user id</label> <input type="text" id="userid" ...
... 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 f...
...> <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: 10
px; } label { display: inline-block; width: 70
px; text-align: right; padding-right: 10
px; } #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 set to contain, which indicates that the image should be drawn at the largest size that will f...
<input type="search"> - HTML: Hypertext Markup Language
h) is entered into your database. a note on styling there are useful pseudo-classes available for styling valid/invalid form elements: :valid and :invalid. in this section, we'll use the following css, which will place a check (tick) next to inputs containing valid values, and a cross next to inputs containing invalid values. input:invalid ~ span:after { content: '✖'; padding-left: 5
px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5
px; position: absolute; } the technique also requires a <span> element to be placed after the form element, which acts as a holder for the icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. making input required you can use...
...aced directly after them very well. making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <input type="search" id="mysearch" name="q" placeholder="search the site..." required> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10
px; } input:invalid ~ span:after { content: '✖'; padding-left: 5
px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5
px; position: absolute; } this renders like so: in addition, if you try to submit the form with no search term entered into it, the browser will show a message. the following example is from firefox: different messages...
...elow requires that the entered value be 4–8 characters in length. <form> <div> <label for="mysearch">search for user</label> <input type="search" id="mysearch" name="q" placeholder="user ids are 4–8 characters in length" required size="30" minlength="4" maxlength="8"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10
px; } input:invalid ~ span:after { content: '✖'; padding-left: 5
px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5
px; position: absolute; } this renders like so: if you try to submit the form with less than 4 characters, you'll be given an appropriate error message (which differs between browsers). if you try to go beyond 8 character...
...rs followed by four numbers. the following example covers it: <form> <div> <label for="mysearch">search for product by id:</label> <input type="search" id="mysearch" name="q" placeholder="two letters followed by four numbers" required size="30" pattern="[a-z]{2}[0-9]{4}"> <button>search</button> <span class="validity"></span> </div> </form> input { margin-right: 10
px; } input:invalid ~ span:after { content: '✖'; padding-left: 5
px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5
px; position: absolute; } this renders like so: examples you can see a good example of a search form used in context at our website-aria-roles example (see it live). specifications specification status c...
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
<kbd>n</kbd> would be perfectly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...
...ld be perfectly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...
...e perfectly valid. depending on your style sheet, though, you may find it useful to do this kind of nesting. ...
.... depending on your style sheet, though, you may find it useful to do this kind of nesting. ...
Inline elements - HTML: Hypertext Markup Language
f the inline element's influence.</div> in this example, the <div> block-level element contains some text. within that text is a <span> element, which is an inline element. ...
...ement's influence.</div> in this example, the <div> block-level element contains some text. within that text is a <span> element, which is an inline element. ...
... changing element levels you can change the visual presentation of an element us...
... changing element levels you can change the visual presentation of an element using the css dis...
dx - SVG: Scalable Vector Graphics
for <altglyph>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining gl...
... for <altglyph>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if...
... for <tref>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of ...
... for <tref>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more valu...
dy - SVG: Scalable Vector Graphics
for <altglyph>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining g...
... for <altglyph>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. ...
... for <tref>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of ...
... for <tref>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more valu...
Positions - SVG: Scalable Vector Graphics
is is slightly different than the way you're taught to graph as a kid (y axis is flipped). however, this is the same way elements in html are positioned (by default, ltr documents are considered not the rtl documents which position x from right-to-left). example: the element <rect x="0" y="0" width="100" height="100" /> defines a rectangle from the upper left corner, that spans from there 100
px to the right and to the bottom. what are "pixels"? in the most basic case one pixel in an svg document maps to one pixel on the output device (a.k.a. the screen). but svg wouldn't have the "scalable" in its name, if there weren't several possibilities to change this behaviour. much like absolute and relative font sizes in css, svg defines absolute units (ones with a dimensional identifier like ...
... with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers. without further specification, one user unit equals one screen unit. to explicitly change this behaviour, there are several possibilities in svg. we start with the svg root element: <svg width="100" height="100"> the above element defines a simple svg canvas with 100x100
px. one user unit equals one screen unit. <svg width="200" height="200" viewbox="0 0 100 100"> the whole svg canvas here is 200
px by 200
px in size. however, the viewbox attribute defines the portion of that canvas to display. these 200x200 pixels display an area that starts at user unit (0,0) and spans 100x100 user units to the right and to the bottom. this effectively zooms in on the 100x100 uni...
...ystem maps one user pixel to one device pixel. ...
...ngths in the svg file with specific dimensions, like "in" or "cm", are then calculated in a way that makes them appear 1:1 in the resulting image. ...
XML data - Archive of obsolete content
<depth>3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, style9.css. ...
...e a new css file, style9.css. ...
...s. ...
Tabboxes - Archive of obsolete content
e buttons can stay on the main dialog, outside of the tabs. <vbox flex="1"> <tabbox selectedindex="1"> <tabs> <tab label="search"/> <tab label="options"/> </tabs> <tabpanels> <tabpanel id="searchpanel" orient="vertical"> <description> enter your search criteria below and select the find button to begin the search. ...
...tton to begin the search. ...
...you can...
Making sure your theme works with RTL locales - Archive of obsolete content
-moz-locale-dir css pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left: :-moz-locale-dir(ltr) matches if the user interface is being rendered left to right. :-moz-locale-dir(rtl) matches if the user interface is being rendered right to left. example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0
px 396
px 34
px 360
px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0
px 516
px 34
px 480
px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode. gecko 1.9.1 (firefox 3.5) and earlier the chromedir attribute firefox, thunderbird and seam...
...irefox, thunderbird and seamonkey expose an attribute named chromedir on certain elements. all you have to do is add css rules to your theme that test for the value of this attribute, and use that to apply any rtl-specific rules that you may have. that's how the default theme works, so you can use it as an example. toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0
px 398
px 34
px 360
px); } toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] { -moz-image-region: rect(0
px 516
px 34
px 478
px); } this way, if chromedir is "rtl", the second rule will override the first, and the theme will work in rtl. note that not all elements will have the chromedir attribute, so you may need to refer to an ancestor element that does. for example: /* we want...
...d margins. instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-style -moz-border-start-width -moz-border-end -moz-border-end-color -moz-border-end-style -moz-border-end-width #urlbar-search-splitter { min-width: 8
px; -moz-margin-start: -4
px; border: none; background: transparent; } testing your theme testing your theme for rtl compatibility is easy, and you do not even have to go through the hassle of downloading a rtl locale. the force rtl extension enables you to switch the interface of firefox from ltr to rtl and the other way around dynamically by toggling a menu item. ...
Browser Detection and Cross Browser Support - Archive of obsolete content
left) == 'number') { // opera 5/6 do not implement the standard correctly // and assume that elm.style.left and similar properties // are numbers. elm.style.left = x; elm.style.top = y; } else { // gecko/internet explorer 4+ // w3c dom style states that elm.style.left is a string // containing the length followed by the unit. e.g. ...
....left = x; elm.style.top = y; } else { // gecko/internet explorer 4+ // w3c dom style states that elm.style.left is a string // containing the length followed by the unit. e.g. 10
px // gecko will allow you to omit the unit only in quirks // mode. // gecko requires the unit when operating in standards // mode. elm.style.left = x + '
px'; elm.style.top = y + '
px'; } } else if (typeof(elm.left) == 'number') { // navigator 4 elm.left = x; elm.top = y; } } standards only consider how simple this function is if you code it according to the w3c standards. function moveelement(id, x, y) { // move the element with id to x,y // where x,y are the horizontal // and vertical position in pixels v...
...mber') { // navigator 4 elm.left = x; elm.top = y; } } standards only consider how simple this function is if you code it according to the w3c standards. function moveelement(id, x, y) { // move the element with id to x,y // where x,y are the horizontal // and vertical position in pixels var elm = document.getelementbyid(id); if (elm) { elm.style.left = x + '
px'; elm.style.top = y + '
px'; } } ask yourself this: "is supporting non-standard browsers worth the development and maintenance costs?" example 3 - detecting specific gecko branches // return the rv value of a gecko user agent // as a floating point number. // returns -1 for non-gecko browsers, // 0 for pre netscape 6.1/gecko 0.9.1 browsers // number > 0 where each port...
-ms-scrollbar-arrow-color - Archive of obsolete content
rcentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
...pha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
...mber> | <angle> examples the following example shows how to use -ms-scrollbar-arrow-color and -ms-scrollbar-face-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. div { width: 150
px; height: 150
px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10
px; } .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 amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="greenscrollbox"> l...
-ms-scrollbar-base-color - Archive of obsolete content
entage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
...alue>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
...alue>? )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: 150
px; height: 150
px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10
px; } .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> ...
-ms-scrollbar-face-color - Archive of obsolete content
hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
... <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. ...
...ercentage><hue> = <number> | <angle> examples this example uses -ms-scrollbar-face-color and -ms-scrollbar-arrow-color to display a scroll bar with a blue scroll box and arrows, and a scroll bar with a green scroll box and arrows. div { width: 150
px; height: 150
px; overflow-y: scroll; border-style: solid; border-width: thin; font-family: sans-serif; float: left; margin-right: 10
px; } .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 amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div> <div class="greenscrollbox"> l...
-ms-scrollbar-highlight-color - Archive of obsolete content
> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
...percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
...umber> | <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. ...
-ms-scrollbar-track-color - Archive of obsolete content
a()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
...> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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. ...
... <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. ...
Crisp pixel art look with image-rendering - Game development
ll experimental, but there is partial support in most browsers. the steps to achieve this effect are: create a <canvas> element and set its width and height attributes to the original, smaller resolution. set its css width and height properties to be 2x or 4x the value of the html width and height. if the canvas was created with a 128 pixel width, for example, we would set the css width to 512
px if we wanted a 4x scale. set the <canvas> element's image-rendering css property to some value that does not make the image blurry. either crisp-edges or pixelated will work. check out the image-rendering article for more information on the differences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. the original image we wa...
...ng article for more information on the differences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. ...
...re information on the differences between these values, and which prefixes to use depending on the browser. an example let's have a look at an example. ...
Extra lives - Game development
the number of lives that remain, and a text label that will be shown on screen when the player loses one of their lives. defining the new text labels defining the texts look like something we already did in the score lesson. ...
... like something we already did in the score lesson. add the following lines below the existing scoretext definition inside your create() function: livestext = game.add.text(game.world.width-5, 5, 'lives: '+lives, { font: '18
px arial', fill: '#0095dd' }); livestext.anchor.set(1,0); lifelosttext = game.add.text(game.world.width*0.5, game.world.height*0.5, 'life lost, click to continue', { font: '18
px arial', fill: '#0095dd' }); lifelosttext.anchor.set(0.5); lifelosttext.visible = false; the livestext and lifelosttext objects look very similar to the scoretext one — they define a position on the screen, the actual text to display, and the font styling. the former is anchored on its top right edge to align properly with the screen, and the latter is centered, both using anchor.set(). the l...
...probably noticed we're using the same styling for all three texts: scoretext, livestext and lifelosttext. if we ever want to change the font size or color we will have to do it in multiple places. ...
The box model - Learn web development
model in the standard box model, if you give a box a width and a height attribute, this defines the width and height of the content box. any padding and border is then added to that width and height to get the total size taken up by the box. this is shown in the image below. if we assume that the box has the following css defining width, height, margin, border, and padding: .box { width: 350
px; height: 150
px; margin: 10
px; padding: 25
px; border: 5
px solid black; } the space taken up by our box using the standard box model will actually be 410
px (350 + 25 + 25 + 5 + 5), and the height 210
px (150 + 25 + 25 + 5 + 5), as the padding and border are added to the width used for the content box. note: the margin is not counted towards the actual size of the box — sure, it affec...
...nd padding to get the real size of the box, and you would be right! for this reason, css had an alternative box model introduced some time after the standard box model. using this model, any width is the width of the visible box on the page, therefore the content area width is that width minus the width for the padding and border. the same css as used above would give the below result (width = 350
px, height = 150
px). by default, browsers use the standard box model. if you want to turn on the alternative model for an element you do so by setting box-sizing: border-box on it. by doing this you are telling the browser to take the border box as the area defined by any size you set. .box { box-sizing: border-box; } if you want all of your elements to use the alternative box model, and thi...
...the second paragraph has a margin-top of 30 pixels. the margins have collapsed together so the actual margin between the boxes is 50 pixels and not the total of the two margins. you can test this by setting the margin-top of paragraph two to 0. the visible margin between the two paragraphs will not change — it retains the 50 pixels set in the bottom-margin of paragraph one. if you set it to -10
px, you'll see that the overall margin becomes 40
px — it subtracts from the 50
px. there are a number of rules that dictate when margins do and do not collapse. for further information see the detailed page on mastering margin collapsing. the main thing to remember for now is that margin collapsing is a thing that happens. if you are creating space with margins and don't get the space you expec...
Responsive design - Learn web development
tion) and apply css selectively to style the page appropriately for the user's needs. for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least 800 pixels wide. the css for the .container selector will only be applied if these two things are true. @media screen and (min-width: 800
px) { .container { margin: 1em 2em; } } you can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes. the points at which a media query is introduced, and the layout changed, are known as breakpoints. a common approach when using media queries is to create a simple single-column layout for narrow-screen devices (e...
...ter amounts of screen real estate. in this example, we want to set our level 1 heading to be 4rem, meaning it will be four times our base font size. that's a really large heading! we only want this jumbo heading on larger screen sizes, therefore we first create a smaller heading then use media queries to overwrite it with the larger size if we know that the user has a screen size of at least 1200
px. html { font-size: 1em; } h1 { font-size: 2rem; } @media (min-width: 1200
px) { h1 { font-size: 4rem; } } we have edited our responsive grid example above to also include responsive type using the method outlined. you can see how the heading switches sizes as the layout goes to the two column version. on mobile the heading is smaller: on desktop, however, we see the larger ...
...could zoom in and pan around the website to view the bits they were interested in, but it looked bad. you will still see this today if you have the misfortune to come across a site that does not have a responsive design. the trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. if you've got a narrow screen layout that kicks in at 480
px viewport width or less, and the viewport is set at 960
px, you'll never see your narrow screen layout on mobile. by setting width=device-width you are overriding apple's default width=960
px with the actual width of the device, so your media queries will work as intended. so you should always include the above line of html in the head of your documents. there are other settings you can use with t...
CSS FAQ - Learn web development
thand property using shorthand properties for defining style rules is good because it uses a very compact syntax. using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. this means that a previous rule for a single attribute could be implicitly overridden. ...
... good because it uses a very compact syntax. using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. this means that a previous rule for a single attribute could be implicitly overridden. ...
...: 12
px; font-family: verdana; font-weight: bold; } .stocksymbol { font: 14
px arial; color: red; } <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ... </div> in the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order is important. #stockticker { font-weight: bold; font: 12
px verdana; /* font-weight is now set to normal */ } use of the * selector the * wildcard selector refers to any element, and it has to be used with particular care. body * { font-weight: normal; } #stockticker { font: 12
px verdana; } .corpname { font-weight: bold; } .stockup { color: red; } <div id="section"> nys: <span class="corpname"><span class="stockup">ge</span></span> +1.0 ... </div...
Example - Learn web development
<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: 400
px; /* to see the limits of the form */ padding: 1em; border: 1
px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90
px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textare...
... margin-top: 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90
px; text-align: right; } input, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300
px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1
px solid #999; } input:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some te...
... #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height: 5em; /* to allow users to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90
px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; } result ...
From object to iframe — other embedding technologies - Learn web development
option. select the embed map option, which will give you some <iframe> code — copy this. insert it into the input box below, and see what the result is in the output. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer. ...
...s reset it using the reset button. if you get really stuck, press the show solution button to see an answer. ...
...2> <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: 100
px;"> </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: 16
px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10
px; 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;...
HTML table basics - Learn web development
<colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below). the first two columns need to be left unstyled. add a background color to the third column. the value for your style attribute is background-color:#97db9a; set a separate width on the fourth column. ...
...if you get stuck, or want to check your work, you can find our version on github as timetable-fixed.html (see it live also). ...
...e is background-color: #97db9a; add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. the values for your style attribute are background-color:#dcc48e; border:4
px solid #c1437a; the last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42
px; see how you get on with the example. if you get stuck, or want to check your work, you can find our version on github as timetable-fixed.html (see it live also). summary that just about wraps up the basics of html tables. in the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people. overview: tabl...
Basic math in JavaScript — numbers and operators - Learn web development
pixels) are defined by the variables x and y, which are initially both given a value of 50. open in new window in the editable code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. let's try the following: change the line that calculates x so the box is still 50
px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the box is 75
px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator. change the line that calculates x so the box is 250
px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator. change the line that calculate...
...calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the box is 75
px high, but the 75 is calculated using the numbers 25 and 3 and an arithmetic operator. change the line that calculates x so the box is 250
px wide, but the 250 is calculated using two numbers and the remainder (modulo) operator. change the line that calculates y so the box is 150
px high, but the 150 is calculated using three numbers and the subtraction and division operators. change the line that calculates x so the box is 200
px wide, but the 200 is calculated using the number 4 and an assignment operator. ...
... don't worry if you totally mess the code up. you can always press the reset button to get things working again. ...
What is JavaScript? - Learn web development
amazing what you can achieve with a few lines of javascript code.) the three layers build on top of one another nicely. let's take a simple text label as an example. ...
... the three layers build on top of one another nicely. let's take a simple text label as an example. ...
... can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1
px; text-transform: uppercase; text-align: center; border: 2
px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1
px 1
px 2
px rgba(0,0,200,0.4); border-radius: 10
px; padding: 3
px 10
px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeventlistener('click', updatename); function updatename() { let name = prompt('enter a new name'); para.textcontent = 'player 1: ' + name; } try c...
Working with Svelte stores - Learn web development
o develop our own custom store to persist the todo information to web storage, allowing our todos to persist over page reloads. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and event...
...ng from the svelte repl you won't be able to complete this step. for security reasons the svelte repl works in a sandboxed environment which will not let you access web torage, and you will get a "the operation is insecure" error. in order to follow this section you'll have to clone the repo and go to the mdn-svelte-tutorial/06-stores folder or you can directly download the folder's content with n
px degit opensas/mdn-svelte-tutorial/06-stores. so, to implement a custom store that saves its content to web storage, we will need a writable store that: initially reads the value from web storage, and if it's not present initializes it with a default value. whenever the value is modified, updates the store itself and also the data in local storage. moreover, because web storage only suppor...
...ript transitions. it also has several easing functions to specify the rate of change over time. have a look at the ease visualizer to explore the various ease functions available. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/07-next-steps or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/07-next-steps remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storage. this allowed us to sh...
MozBeforePaint
because modern operating systems and hardware won't let the browser display more frames than that anyway. limiting the frame rate avoids wasting work, thereby saving cpu usage and power and improving overall system performance. example this example performs a simple animation, moving a box a short distance after a short period of time. ...
...n operating systems and hardware won't let the browser display more frames than that anyway. limiting the frame rate avoids wasting work, thereby saving cpu usage and power and improving overall system performance. example this example performs a simple animation, moving a box a short distance after a short period of time. ...
...simple animation, moving a box a short distance after a short period of time. <!doctype html> <html> <body> <div id="d" style="width:100
px; height:100
px; 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("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </html> as you can see, each time the mozbeforepaint event fires, our step() method is called. this computes the current position for the anim...
Extras
> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30
px" height="15
px" depth="15
px" voffset="-15
px"> <mtext> <svg width="30
px" height="30
px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> ...
..."15s" repeatcount="indefinite"/> <g transform="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 l 10 20 l 0 15 l 10 10"/> </g> </g> </g> </svg> </mtext> </mpadded> </msqrt> <mo>=</mo> <msubsup> <mo>∫</mo> <mn>0</mn> <mfrac> <mi>π</mi> <mn>2</mn> </mfrac> </msubsup> <msup> <mi>θ</mi> <mtext> <svg width="15
px" height="15
px"> <defs> <radialgradient id="radgrad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-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" ...
... fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-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="5
px" cx="5
px" cy="5
px"/> </g> </svg> </mtext> </msup> <mrow> <mo>ⅆ</mo> <mi>θ</mi> </mrow> </math> <div style="width: 300
px; margin-left: auto; margin-right: auto;"> <svg width="300
px" height="250
px"> <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-opacit...
nsIDOMWindowUtils
identifiers, [array, size_is(count)] in print32 axs, [array, size_is(count)] in print32 ays, [array, size_is(count)] in pruint32 arxs, [array, size_is(count)] in pruint32 arys, [array, size_is(count)] in float arotationangles, [array, size_is(count)] in float aforces, in pruint32 count, in long amodifiers, [optional] in boolean aignorerootscrollframe); void setcssviewport(in float awidth
px, in float aheight
px); void setdisplayport(in float ax
px, in float ay
px, in float awidth
px, in float aheight
px); void setresolution(in float axresolution, in float ayresolution); void startpccountprofiling(); void stoppccountprofiling(); void suppresseventhandling(in boolean asuppress); void suspendtimeouts(); nsidomfile wra...
...o the specified size in css pixels, regardless of the size of the enclosing widget/view. this triggers reflow. the caller of this method must have universalxpconnect privileges. note: after calling this method, the window.innerwidth and window.innerheight properties return the size of the viewport you've specified instead of the size of the browser widget. void setcssviewport( in float awidth
px, in float aheight
px ); parameters awidth
px the width of the viewport in css pixels. aheight
px the height of the viewport in css pixels. setdisplayport() set the "displayport" to be <x
px, y
px, width
px, height
px> in units of css pixels, regardless of the size of the enclosing widget/view. this will *not* trigger reflow. <x, y> is relative to the top-left of the css viewport. this mean...
...e the viewport bounds. it's legal to set a displayport that extends beyond the css viewport in any direction (left/right/top/bottom). it's also legal to set a displayport that extends beyond the document's bounds. the value of the pixels rendered outside the document bounds is not yet defined. the caller of this method must have universalxpconnect privileges. void setdisplayport( in float ax
px, in float ay
px, in float awidth
px, in float aheight
px ); parameters ax
px ay
px awidth
px aheight
px setresolution() get/set the resolution at which rescalable web content is drawn. currently this is only (some) thebes content. setting a new resolution does *not* trigger reflow. this api is entirely separate from textzoom and fullzoom; a resolution scale can be applied t...
Plug-in Basics - Plugins
windowed or windowless is not meaningful if the plug-in is invoked with the hidden attribute. you can also create hidden plug-ins using the object element. though the object element has no hidden attribute, you can create css rules to override the sizing attributes of the object element object { visibility: visible; } object.hiddenobject { visibility: hidden !important; width: 0
px !important; height: 0
px !important; margin: 0
px !important; padding: 0
px !important; border-style: none !important; border-width: 0
px !important; max-width: 0
px !important; max-height: 0
px !important; } in this case, the object element that picks up these special style definitions would have a class of hidden. using the class attribute ...
... embedding activex controls in plug-ins or embedding plug-ins in activex applications. the following examples demonstrate this use of nested object elements with markup more congenial to gecko included as children of the parent object element. ...
...ontrols in plug-ins or embedding plug-ins in activex applications. the following examples demonstrate this use of nested object elements with markup more congenial to gecko included as children of the parent object element. ...
AnimationEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" ...
... properties also inherits properties from its p...
... properties also inherits properties from its parent event. animationevent.animationn...
Attr - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
..."consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="188.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height...
...ily="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="303.5" y="30" font-size="12
px" 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...
AudioContext - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width...
... properties also inherits properties from its parent interface,...
... properties also inherits properties from its parent interface, baseaudiocontext. audiocontext.basela...
AudioNode - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="9...
... description the audio routing graph each audio...
... description the audio routing graph each audionode has inputs and outputs, and multiple...
BeforeInstallPromptEvent - Web APIs
splay: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" wi...
... properties inherits properties from its paren...
... properties inherits properties from its parent, event. beforeinstallpromptevent.pla...
BluetoothDevice - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" wi...
...name; readonly attribute bluetoo...
...name; readonly attribute bluetoothremotegattserver? gatt; readonly attr...
BroadcastChannel - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" w...
... properties this interface also inherits properties fr...
... properties this interface also inherits properties from its parent, eventtarget. broadcastc...
CSSCounterStyleRule - Web APIs
ay: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width...
... csscounterstylerule.name is a domstring object that con...
... csscounterstylerule.name is a domstring object that contains the serialization of the <counter-s...
CSSStyleDeclaration.setProperty() - Web APIs
or 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: 500
px; max-width: 1000
px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20
px; height: 30
px; line-height: 30
px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70
px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40p...
...000
px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20
px; height: 30
px; line-height: 30
px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70
px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40
px; height: 150
px; line-height: 150
px; background: red; border: 5
px 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-m...
...nction randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + '
px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.a...
CSSValueList - Web APIs
y: 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" stroke="#d4dde4" stroke-width="2
px" /><text x="41" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" h...
... cssvaluelist.lengthread only an unsigned long representing the number of cssval...
... cssvaluelist.lengthread only an unsigned long representing the number of cssvalues in the list. methods cssvaluelis...
CSS Painting API - Web APIs
custom properties are accessible to the paintworklet. specificat...
...custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1 working draft initial definition. ...
...n use the <image> with the css paint() function: li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2
px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3
px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1
px); } we've included a custom property in the selector block defining a boxcolor. custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1 working draft initial definition. ...
Manipulating video using canvas - Web APIs
en screen effect") using javascript code. the document content the html document used to render this content is shown below. ...
...code. the document content the html document used to render this content is shown below. ...
... content the html document used to render this content is shown below. ...
Basic animations - Web APIs
<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: 29
px; position: fixed; left: 0; top: 0; right: 0; font-family: monospace; height: 30
px; opacity: .4; display: flex; transition: .5s } .banner:hover { opacity: 1 } div#selector>div { flex-basis: 30% } @keyframes diss { from { opacity: 1 } to { ...
...0; font-family: monospace; height: 30
px; 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 3
px #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: 7
px } .keypress { position: fixed; ...
... var n = c.createlineargradient(t.x, t.y, t.x + this.w, t.y + this.h); i.length - 1 == e ? ...
DOMRect - Web APIs
e-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" stroke-width="2
px" /><text x="76" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width=...
... properties domrect inherits properties from its parent, domrectreadonly. the differe...
... properties domrect inherits properties from its parent, domrectreadonly. the difference is that they are not read-only anymore.
Document: wheel event - Web APIs
ection. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...nd scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
Element: mouseenter event - Web APIs
es the mouseenter event to change the border on the div when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the div to make it more visible. ...
... css styling the div to make it more visible. ...
...const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5
px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1
px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode)...
Element: mouseleave event - Web APIs
he mouseenter event to change the border on the <div> when the mouse enters the space alloted to it. it then adds an item to the list with the number of the mouseenter or mouseleave event. html <div id='mousetarget'> <ul id="unorderedlist"> <li>no events yet!</li> </ul> </div> css styling the <div> to make it more visible. ...
...ss styling the <div> to make it more visible. ...
...const mousetarget = document.getelementbyid('mousetarget'); const unorderedlist = document.getelementbyid('unorderedlist'); mousetarget.addeventlistener('mouseenter', e => { mousetarget.style.border = '5
px dotted orange'; entereventcount++; addlistitem('this is mouseenter event ' + entereventcount + '.'); }); mousetarget.addeventlistener('mouseleave', e => { mousetarget.style.border = '1
px solid #333'; leaveeventcount++; addlistitem('this is mouseleave event ' + leaveeventcount + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode)...
Element.releasePointerCapture() - Web APIs
rns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
...exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
... recommendation non-stable version. ...
Element.setPointerCapture() - Web APIs
rns undefined. exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
...exceptions exception explanation invalidpointerid pointerid does not match any of the active pointers. example this example sets pointer capture on a <div> when you press down on it. this lets you slide the element horizontally, even when you pointer moves outside of its boundaries. ...
... recommendation non-stable version. ...
Element: wheel event - Web APIs
d, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...hanges of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...f the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
ErrorEvent - Web APIs
ram" 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="2
px" /><text x="38.5" y="30" font-size="12
px" 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" heig...
... errorevent.message read only is a domstring containing a human-readable error me...
... errorevent.message read only is a domstring containing a human-readable error message describing the problem. errorevent...
ExtendableEvent - Web APIs
splay: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150"...
...it is not available when it is a window, or the...
...it is not available when it is a window, or the scope of another kind of worker. const...
File - Web APIs
splay: 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" stroke="#d4dde4" stroke-width="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">blob</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" ...
... instance properties file.prototype.lastmodified read only returns the last modified t...
... instance properties file.prototype.lastmodified read only returns the last modified time of the file, in millisecond since the u...
GlobalEventHandlers.onwheel - Web APIs
ef is a function name or a function expression. the function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
... name or a function expression. the function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
...function receives a wheelevent object as its sole argument. examples this example shows how to scale an element using the mouse (or other pointing device) wheel. ...
HTMLFormControlsCollection - Web APIs
ne-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="2
px" /><text x="71" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x=...
... methods this interface inherits the methods o...
... methods this interface inherits the methods of its parent, htmlcollection. htmlform...
HTMLImageElement.sizes - Web APIs
sed to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width information. see syntax in using media queries for details on how to construct a media condition. source size values the source size value is a css length. it may be specified using font-relative units (such as em or ex), absolute units (such as
px or cm), or the vw unit, which lets you specify the width as a percentage of the viewport width (1vw being 1% of the viewport width). note: the source size value must not be specified as a percentage of the container size; that is, lengths such as 50% or 100% are not allowed, as there would be uncertainty as to what the specified value is a percentage of. example in this example, a blog-like ...
...x-width: 30em) 20em"> <p>then there's even more amazing stuff to say down here. ...
... let image = document.queryselector("article img"); let ...
HTMLElement.focus() - Web APIs
living standard html 5.1the definition of 'focus' in that specification. recommendation html5the definiti...
... living standard html 5.1the definition of 'focus' in that specification. recommendation html5the definition of 'focus' i...
... living standard html 5.1the definition of 'focus' in that specification. recommendation html5the definition of 'focus' in that specification. recommendation document obj...
HashChangeEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150"...
... hashchangeevent.newurl read only the new url to which th...
... hashchangeevent.newurl read only the new url to which the window is navigating. hashchangeevent.
IDBCursorWithValue - Web APIs
: 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="#fff" stroke="#d4dde4" stroke-width="2
px" /><text x="46" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" wid...
... properties inherits properties from its parent interface, idbcursor. ...
... properties inherits properties from its parent interface, idbcursor. idbcursorwithvalue.value read only ret...
IDBDatabase - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width=...
... idbdatabase.version read only a 6...
... idbdatabase.version read only a 64-bit integer that contains the version o...
IDBRequest - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="...
... idbrequest.error read only returns a domexception in the event of an unsuccessful req...
... idbrequest.error read only returns a domexception in the event of an unsuccessful request, indicating what went wrong. idbreq...
KeyboardEvent.key - Web APIs
2. release the shift key. finally, release 2. ...
...ey. finally, release 2. ...
...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: -20
px; margin-right: -20
px; } .fx > div { padding-left: 20
px; padding-right: 20
px; } .fx > div:first-child { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10
px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) ...
MediaKeyMessageEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width=...
... properties inherits properties from its paren...
... properties inherits properties from its parent, event. mediakeymessageevent.message...
MediaKeySession.onkeystatuseschange - Web APIs
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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" wi...
...} specifications specification status comment...
...} specifications specification status comment encrypted media extensionsthe d...
MediaKeySession.onmessage - Web APIs
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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" wi...
...} specifications specification status comment ...
...} specifications specification status comment encrypted media extensionsthe defin...
MediaQueryList.addListener() - Web APIs
tus changes. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event. return value void. ...
...sed, the callback is a standard function, and the event object is a mediaquerylistevent, which inherits from event. return value void. ...
...r mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'addlistener' in that specification. working draft initial definition ...
MediaQueryList.media - Web APIs
the media read-only property of the mediaquerylist interface is a domstring representing a serialized media query. syntax var media = mediaquerylist.media; value a domstring representing a serialized media query. examples this example runs the media query (max-width: 600
px) and displays the value of the resulting mediaquerylist's media property in a <span>. ...
...perty of the mediaquerylist interface is a domstring representing a serialized media query. syntax var media = mediaquerylist.media; value a domstring representing a serialized media query. examples this example runs the media query (max-width: 600
px) and displays the value of the resulting mediaquerylist's media property in a <span>. ...
...vascript let mql = window.matchmedia('(max-width: 600
px)'); document.queryselector(".mq-value").innertext = mql.media; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the result's media property. html <span class="mq-value"></span> a simple <span> to receive the output. css .mq-value { font: 18
px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1
px solid #dde; } result specifications specification status comment css object model (cssom) view modulethe definition of 'media' in that specification. working draft initial definition ...
MediaQueryList.removeListener() - Web APIs
istener(func) parameters func a function or function reference representing the callback function you want to remove. in the original implementation, the callback was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, and the callback is a standard function. return value void. ...
... was a non-standard mediaquerylistlistener object. in the new implementation the standard event mechanism is used, and the callback is a standard function. return value void. ...
...r mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'removelistener' in that specification. working draft initial definition ...
MediaQueryList - Web APIs
f possible, you should generally use removeeventlistener() to remove change notification callbacks (which should have previously been added using addeventlistener()). events the following events are delivered to mediaquerylist objects: change sent to the mediaquerylist when the result of running the media query against the document changes. for example, if the media query is (min-width: 400
px), the change event is fired any time the width of the document's viewport changes such that its width moves across the 400
px boundary in either direction. also available using the onchange event handler property. examples this simple example creates a mediaquerylist and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the ...
...across the 400
px boundary in either direction. also available using the onchange event handler property. examples this simple example creates a mediaquerylist and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page. ...
...then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page. var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addeventlistener('change', screentest); note: you can find this example on github (see the source code, and also see it running live). ...
MediaQueryListEvent.matches - Web APIs
the matches read-only property of the mediaquerylistevent interface is a boolean that returns true if the document currently matches the media query list, or false if not. syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not. ...
... list, or false if not. syntax var matches = mediaquerylistevent.matches; value a boolean; returns true if the document currently matches the media query list, false if not. ...
...r mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'matches' in that specification. working draft initial definition ...
MediaQueryListEvent.media - Web APIs
the media read-only property of the mediaquerylistevent interface is a domstring representing a serialized media query. syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query. ...
...tevent interface is a domstring representing a serialized media query. syntax var media = mediaquerylistevent.media; value a domstring representing a serialized media query. ...
...r mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'media' in that specification. working draft initial definition ...
MediaQueryListEvent - Web APIs
ace, event. mediaquerylistevent.matchesread only a boolean that returns true if the document currently matches the media query list, or false if not. mediaquerylistevent.mediaread only a domstring representing a serialized media query. methods the mediaquerylistevent interface inherits methods from its parent interface, event. ...
...listevent.mediaread only a domstring representing a serialized media query. methods the mediaquerylistevent interface inherits methods from its parent interface, event. ...
...r mql = window.matchmedia('(max-width: 600
px)'); function screentest(e) { if (e.matches) { /* the viewport is 600 pixels wide or less */ para.textcontent = 'this is a narrow screen — less than 600
px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600
px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status comment css object model (cssom) view modulethe definition of 'mediaquerylistevent' in that specification. working draft initial definition ...
MediaSource - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width=...
... properties mediasource.sou...
... properties mediasource.sourcebuffers read only returns a sourcebu...
MessageEvent - Web APIs
play: 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" stroke="#d4dde4" stroke-width="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" he...
... properties this interface also inherits properties from its parent, event. mes...
... properties this interface also inherits properties from its parent, event. messageevent.data read only the data sent ...
MouseEvent.relatedTarget - Web APIs
event.relatedtarget is a similar property for focus events. syntax var target = instanceofmouseevent.relatedtarget return value an eventtarget object or null. example try moving your mouse cursor into and out of the red and blue boxes. ...
...et is a similar property for focus events. syntax var target = instanceofmouseevent.relatedtarget return value an eventtarget object or null. example try moving your mouse cursor into and out of the red and blue boxes. ...
... null. example try moving your mouse cursor into and out of the red and blue boxes. ...
Node - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" he...
... node.baseuriread only returns a domstrin...
... node.baseuriread only returns a domstring representing the base url of the document...
PageTransitionEvent - Web APIs
ram" 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="...
... pagetransitionevent.persisted read only indicates if th...
... pagetransitionevent.persisted read only indicates if the document is loading from a cache. exa...
PerformanceLongTaskTiming - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x...
... specifica...
... specifications specification status ...
PerformanceResourceTiming - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x...
... properties this interface extends the following performanceentry properties for ...
... properties this interface extends the following performanceentry properties for resource performance entry types by quali...
ProgressEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" h...
... properties also inherits properties from its paren...
... properties also inherits properties from its parent event. progressevent.lengthcomputabl...
RadioNodeList - Web APIs
y: 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="2
px" /><text x="41" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" ...
... radionodelist.value if the underlying element collection cont...
... radionodelist.value if the underlying element collection contains radio buttons, the value property re...
Range.commonAncestorContainer - Web APIs
<ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
...> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
... </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline. ...
Range.getBoundingClientRect() - Web APIs
dingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range. the range's content <b>starts here</b> and continues on until it <b>ends here</b>. ...
... working draft initial specification. ...
...} p { width: 200
px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}
px`; highlight.style.top = `${clientrect.y}
px`; highlight.style.width = `${clientrect.width}
px`; highlight.style.height = `${clientrect.height}
px`; result specification specification status comment css object model (cssom) view modulethe definition of 'range.getboundingclientrect()' in that specification. working draft initial specification. ...
SVGAnimationElement: beginEvent event - Web APIs
, but not when it repeats). it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...
...it repeats). it may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a dom method. ...
...andler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300
px" height="100
px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100
px; border: 1
px solid #ddd; overflow-y: scroll; padding: 10
px 30
px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) a...
SVGAnimationElement: endEvent event - Web APIs
ach animation repeat. this event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method. ...
...epeat. this event may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was ended with a dom method. ...
... examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300
px" height="100
px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100
px; border: 1
px solid #ddd; overflow-y: scroll; padding: 10
px 30
px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); let btn = document.queryselector('button'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent ...
SVGAnimationElement: repeatEvent event - Web APIs
object. the value is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values will be >= 1. this is supported in firefox, but not in chrome. ...
...ue is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values will be >= 1. this is supported in firefox, but not in chrome. ...
...ndler property onrepeat examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300
px" height="100
px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100
px; border: 1
px solid #ddd; overflow-y: scroll; padding: 10
px 30
px; } let svgelem = document.queryselector('svg'); let animateelem = document.queryselector('animatemotion'); let list = document.queryselector('ul'); animateelem.addeventlistener('beginevent', () => { let listitem = document.createelement('li'); listitem.textcontent = 'beginevent fired'; list.appendchild(listitem); }) an...
SourceBuffer - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width...
... sourcebuffer.appendwindowstart controls ...
... sourcebuffer.appendwindowstart controls the timestamp for the start of the append...
SourceBufferList - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" w...
... event handlers sourcebufferl...
... event handlers sourcebufferlist.onaddsourcebuffer the event handler ...
TaskAttributionTiming - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="20...
... t...
... taskattributiontiming.containersrc read on...
TimeEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height...
...f...
...for this event type, indicates the repeat ...
UIEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="...
... properties this interface also inherits properties of its parent, event. uievent.cancel...
... properties this interface also inherits properties of its parent, event. uievent.cancelbubble is a boolean indicating whether...
WebGLContextEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="17...
... webglcontextevent.statusmessage a read-only property ...
... webglcontextevent.statusmessage a read-only property containing additional information about t...
Movement, orientation, and motion: A WebXR example - Web APIs
then references are obtained to the four <div> blocks into which we'll output the current contents of each of the key matrices for informational purposes while our scene is running. then we look to see if navigator.xr is defined. if it isn't—and/...
...locks into which we'll output the current contents of each of the key matrices for informational purposes while our scene is running. then we look to see if navigator.xr is defined. if it isn't—and/or the enableforcepolyfill configuration constant is set to true—we install the webxr polyfill by instantiating the webxrpolyfill class. ...
...tion constant is set to true—we install the webxr polyfill by instantiating the webxrpolyfill class. handling the startup and shutdown ui then we call the setu
pxrbutton() function, which handles configuring the "enter/exit webxr" button to enable or disable it as necessary depending on the availability of webxr support for the session type specified in the session_type constant. ...
Example and tutorial: Simple synth keyboard - Web APIs
>current waveform: </span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660
px; height: 110
px; white-space: nowrap; margin: 10
px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16
px "open sans", "lucida grande", "arial", sans-serif; border: 1
px solid black; border-radius: 5
px; width: 20
px; height: 80
px; text-align: center; box-shadow: 2
px 2
px darkgray; display: inline-block; position: relative; margin-ri...
...ight: 110
px; white-space: nowrap; margin: 10
px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16
px "open sans", "lucida grande", "arial", sans-serif; border: 1
px solid black; border-radius: 5
px; width: 20
px; height: 80
px; text-align: center; box-shadow: 2
px 2
px darkgray; display: inline-block; position: relative; margin-right: 3
px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10
px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: in...
...moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10
px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6
px 0 0; } .settingsbar { padding-top: 8
px; font: 14
px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30
px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; r...
Window.getComputedStyle() - Web APIs
r or is ::part() or ::slotted(). note: valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. ...
... note: valid pseudo-element selector refers to syntactic validity, e.g. ::unsupported is considered valid, even though the pseudo-element itself is not supported. examples in this example we style a <p> element, then retrieve those styles using getcomputedstyle(), and print them into the text content of the <p>. ...
...ing the css history leak and privacy-related changes coming to css :visited for examples of how this is implemented. during css transitions, getcomputedstyle returns the original property value in firefox, but the final property value in webkit. in firefox, properties with the value auto return the used value, not the value auto. so if you apply top:auto and bottom:0 on an element with height:30
px and a containing block of height:100
px, firefox's computed style for top returns 70
px, as 100 − 30 = 70. specifications specification status comment css object model (cssom)the definition of 'getcomputedstyle()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'getcomputedstyle()' in that...
Window.getDefaultComputedStyle() - Web APIs
the returned style is a cssstyledeclaration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...yle is a cssstyledeclaration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
...claration object. the object is of the same type as the object returned by window.getcomputedstyle(), but only takes into account user-agent and user rules. ...
Window.matchMedia() - Web APIs
e matches property, which will be true if the document meets the media query's requirements. if you need to be kept aware of whether or not the document matches the media query at all times, you can instead watch for the change event to be delivered to the object. there's a good example of this in the article on window.devicepixelratio. ...
...e article on window.devicepixelratio. examples this example runs the media query (max-width: 600
px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that. javascript let mql = window.matchmedia('(max-width: 600
px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded. html <span class="mq-value"></span> a simple <sp...
...l.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded. html <span class="mq-value"></span> a simple <span> to receive the output. css .mq-value { font: 18
px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1
px solid #dde; } result see testing media queries programmatically for additional code examples. specifications specification status comment css object model (cssom) view modulethe definition of 'window.matchmedia()' in that specification. working draft initial definition ...
XRPermissionDescriptor - Web APIs
es the local-floor reference space in an immersive-vr environment. if the permissions api is found to be available (by checking to see if navigator.permissions is defined), its query() method is called, specifying the permission descriptor we've established, xrpermissiondesc. when the returned promise resolves, we check the returned status. if permission has been granted, we call a function setu
pxr() that handles preparing the webxr environment for use. if permission is conditional based on prompting, we call a function promptandsetu
pxr() that would handle asking for permission before enabling and starting up the environment. and for any other returned state—which is almost certainly denied, which is the only other option as of this article's writing—we do nothing, since we can't use w...
...we do nothing, since we can't use webxr. if the permission request promise is rejected, the error is handled (currently by just dumping it to the console using domxref("console.log()")}}). ...
...ate error if permission isn't available, and tries to start up the webxr session using the same setu
pxr() function called by the granted case. let xrpermissiondesc = { name: "xr", mode: "immersive-vr", requiredfeatures: [ "local-floor" ] }; if (navigator.permissions) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setu
pxr(); break; case "prompt": promptandsetu
pxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setu
pxr(); } specifications specification status comment webxr device apithe definition of 'xrpermissiondescriptor' in that specification. working draft initi...
XRRigidTransform.matrix - Web APIs
0\\ 0 & 0 & 1 & 0\\ 0 & 0 & 0 & 1 \end{bmatrix} this is a transform that will not change either the orientation or position of any point, vector, or object to which it's applied. next, the position is placed into the right-hand column, like this, resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change. ...
... the orientation or position of any point, vector, or object to which it's applied. next, the position is placed into the right-hand column, like this, resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change. here
px, py, and pz are the values of the x, y, and z members of the dompointreadonly position. ...
...zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix} the final transform matrix is calculated by multiplying the translation matrix by the rotation matrix, in the order (translation * rotation). ...
-moz-context-properties - CSS: Cascading Style Sheets
rete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element. you first need to specify on the embedding element the properties whose values you wish to expose to the embedded svg, using the -moz-context-properties property. ...
...ax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element. you first need to specify on the embedding element the properties whose values you wish to expose to the embedded svg, using the -moz-context-properties property. ...
...for example: .img1 { width: 100
px; height: 100
px; -moz-context-properties: fill, stroke; fill: lime; stroke: purple; } now that you've done this, the svg image can use the values of the fill and stroke properties, for example: <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' stroke-width='30
px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by giving them the context-fill/context-stroke keywords in their values, along with a fallback color for t...
:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state. /* matches any checked/selected radio, checkbox, or option */ :checked { margin-left: 25
px; border: 1
px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element. note: because browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from browser to browser. 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="...
...</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> <option value="opt3">pears</option> </select> css div, select { margin: 8
px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3
px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3
px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3
px lime; color: red; } result toggl...
...xt]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12
px; padding: 5
px 11
px; background-color: #ff7; border: 1
px solid; border-radius: 3
px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; } result image gallery you can use the :checked pseudo-class ...
:focus-visible - CSS: Cascading Style Sheets
ote the difference in behavior from elements styled with :focus. <input value="default styles"><br> <button>default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> input, button { margin: 10
px; } .focus-only:focus { outline: 2
px solid black; } .focus-visible-only:focus-visible { outline: 4
px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus. this matches the native focus behavior for controls like <button>. <custom-button tabinde...
...ne: 4
px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus. this matches the native focus behavior for controls like <button>. ...
... accessibility concerns low vision make sure the visual focus indicator can be seen by people with low vision. this will also benefit anyone use a screen in a brightly lit space (like outside in the sun). wcag 2.1 sc 1.4.11 non-text contrast requires that the visual focus indicat...
:indeterminate - CSS: Cascading Style Sheets
living standard no change. html5the definition of ':indeterminate' in that specification. recommendation d...
... living standard no change. html5the definition of ':indeterminate' in that specification. recommendation defines the semantics of html and constraint validation. selectors level 4the definition o...
... living standard no change. html5the definition of ':indeterminate' in that specification. recommendation defines the semantics of html and constraint validation. selectors level 4the definition of ':...
:not() - CSS: Cascading Style Sheets
uding <html> and <body>. this selector only applies to one element; you cannot use it to exclude all ancestors. for instance, body :not(table) a will still apply to links inside of a table, since <tr> will match with the :not() part of the selector. ...
...g <html> and <body>. this selector only applies to one element; you cannot use it to exclude all ancestors. for instance, body :not(table) a will still apply to links inside of a table, since <tr> will match with the :not() part of the selector. ...
...tml> and <body>. this selector only applies to one element; you cannot use it to exclude all ancestors. for instance, body :not(table) a will still apply to links inside of a table, since <tr> will match with the :not() part of the selector. 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: 2
px 2
px 3
px 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` or `.fancy` */ /* note that this syntax is not well supported yet. */...
:valid - CSS: Cascading Style Sheets
we then absolutely position different generated content depending on whether the form's data is valid ...
......
...we then absolutely position different generated content depending on whether the form's data is valid or invalid — a green check or a red cross, r...
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
note: this media feature is also implemented by webkit and by ie 11 for windows phone 8.1 as -webkit-device-pixel-ratio. ...
...ce-pixel-ratio and -webkit-max-device-pixel-ratio. syntax <number> the number of device pixels per css pixel. media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dp
px. ...
... -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based browsers that do not support dp
px. example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dp
px), /* the standard way */ (min-resolution: 192dpi) /* dp
px fallback */ note: see this csswg article for compatibility good practices regarding resolution and dp
px. specifications not part of any standard. ...
any-pointer - CSS: Cascading Style Sheets
h at least one coarse pointer. the big checkbox takes precedence because it is declared after the small one. ...
...rse pointer. the big checkbox takes precedence because it is declared after the small one. ...
...big checkbox takes precedence because it is declared after the small one. html <input id="test" type="checkbox" /> <label for="test">look at me!</label> css input[type="checkbox"]:checked { background: gray; } @media (any-pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15
px; height: 15
px; border: 1
px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30
px; height: 30
px; border: 2
px solid red; } } result specifications specification status comment media queries level 4the definition of 'any-pointer' in that specification. candidate r...
aspect-ratio - CSS: Cascading Style Sheets
candidate recommendation...
... candidate recommendation no change. media queriesthe definition of 'aspect-rati...
... candidate recommendation no change. media queriesthe definition of 'aspect-ratio' in that specification. recommendation initial definition. ...
Coordinate systems - CSS: Cascading Style Sheets
<span id="screeny">0</span> </p> </div> </div> </div> css the css is pretty much just for appearances here. the class "outer" is used for the containing box, which is intentionally too wide to show in the mdn window, to allow you to scroll it horizontally. the "inner" box is the one that we track events in and in which we show the mouse coordinates. ...
...="screeny">0</span> </p> </div> </div> </div> css the css is pretty much just for appearances here. the class "outer" is used for the containing box, which is intentionally too wide to show in the mdn window, to allow you to scroll it horizontally. the "inner" box is the one that we track events in and in which we show the mouse coordinates. ...
...s pretty much just for appearances here. the class "outer" is used for the containing box, which is intentionally too wide to show in the mdn window, to allow you to scroll it horizontally. the "inner" box is the one that we track events in and in which we show the mouse coordinates. .outer { width: 1000
px; height: 200
px; background-color: red; } .inner { position: relative; width: 500
px; height: 150
px; top: 25
px; left: 100
px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; } result here you can see the results in action. as you mouse in and around the blue box, watch the values of the mou...
Basic Concepts of Multicol - CSS: Cascading Style Sheets
qually between the columns. therefore, the column width should be seen as a minimum width, as column boxes are likely to be wider due to the additional space. the column box will only shrink to be smaller than the declared column width in the case of a single column with less available width than the value of column-width. in the below example we use the column-width property with a value of 200
px. we get as many 200 pixel columns as will fit the container, with the extra space shared equally. using column-count and column-width together if you specify both properties on a multicol container then column-count will act as a maximum number of columns. therefore the behaviour as described for column-width will happen, until the number of columns in column-count is reached. after this poin...
... of columns in column-count is reached. after this point no more columns will be drawn, and the extra space is distributed evenly between the existing columns, even if there is enough room for more columns of the specified column-width size. when using both properties together you may get fewer columns than specified in the value for column-count. in this next example we use column-width of 200
px and column-count of 2. even if there is space for more than two columns, we get two. if there is not enough space for two columns of 200
px, however, we get one. the columns shorthand you can use the columnsshorthand to set column-count and column-width. if you set a length unit, this will be used for column-width, set an integer and it will be used for column-count. you can set both, separati...
...shorthand to set column-count and column-width. if you set a length unit, this will be used for column-width, set an integer and it will be used for column-count. you can set both, separating the two values with a space. this css would give the same result as example 1, column-count set to 3. .container { columns: 3; } this css would give the same result as example 2, with column-width of 200
px. .container { columns: 200
px; } this css would give the same result as example 3, with both column-count and column-width set. .container { columns: 2 200
px; } next steps in this guide we've learned the basic use of multiple-column layout. in the next guide, we will look at how much we can style the columns themselves. ...
Styling Columns - CSS: Cascading Style Sheets
ications such as css grid layout. the initial value of column-gap in multicol is 1em. this means your columns will not run into each other. in other layout methods the initial value for column-gap is 0. if you use the keyword value “normal” the gap will be set to 1em. you can change the gap by using any length unit as the value of column-gap. in the example below, the column-gap is set to 40
px. the allowed value for column-gap is a <length-percentage>, this means percentages are allowed. percentage values for column-gap are calculated as a percentage of the width of the multicol container. column rules the specification defines column-rule-width, column-rule-style and column-rule-color, providing a shorthand column-rule. these properties work in exactly the same way as the border ...
... the same way as the border properties: any valid border-style can be used as a column-rule-style. these properties are applied to the element which is the multicol container and therefore all columns will have the same rule. rules are only drawn between columns and not on the outer edges. rules should also only be drawn between columns which have content. in this next example i have created a 5
px dotted rule with a color of rebeccapurple, using the longhand values. note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. instead, the rule overlays the gap. in this next example we have a very wide rule of 40
px and a 10
px gap. the rule displays under the content of the columns. in order to make space on both sides of t...
...alues. note that the rule itself does not take up any space: a wide rule will not push the columns apart to make space for the rule. instead, the rule overlays the gap. in this next example we have a very wide rule of 40
px and a 10
px gap. the rule displays under the content of the columns. in order to make space on both sides of the rule, the gap would need to be increased to be larger than 40
px. summary this details all the current ways in which column boxes can be styled. in the next guide we will take a look at making elements inside a container span across all columns. ...
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
ty the flex-basis property specifies the initial size of the flex item before any space distribution happens. the initial value for this property is auto. if flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. this would be the case if you had given your item a width of 200 pixels. in that case 200
px would be the flex-basis for this item. if your item is instead auto-sized, then auto resolves to the size of its content. at this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. the following live example can help to demonstrate this. in this example i have created a series of inflexible boxes, with bot...
...content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. the following live example can help to demonstrate this. in this example i have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0. here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a flex-basis of 150
px, whereas the other two items have no width and so are sized according to their content width. in addition to the auto keyword, you can use the content keyword as the flex-basis. this will result in the flex-basis being taken from the content size even if there is a width set on the item. this is a newer keyword and has less browser support, however you can always get the same effect by using a...
...ing this removal of negative free space. the items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them. you can see this min-content flooring happen in the below example, where the flex-basis is resolving to the size of the content. if you change the width on the flex container — increasing it to 700
px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that min-content size. as the box gets smaller space is then just removed from the third item. in practice the shrinking behaviour does tend to give you reasonable results. you don’t usually want your content to disappear completely or for boxes to ...
Typical use cases of Flexbox - CSS: Cascading Style Sheets
ample relate to the different ways you might want to constrain the media object in your design. to prevent the image growing too large, add a max-width to the image. as that side of the media object is using the initial values of flexbox it can shrink but not grow, and uses a flex-basis of auto. any width or max-width applied to the image will become the flex-basis. .image img { max-width: 100
px; } you could also allow both sides to grow and shrink in proportion. if you set both sides to flex: 1, they will grow and shrink from a flex-basis of 0, so you will end up with two equal-sized columns. you could either take the content as a guide and set both to flex: auto, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such ...
...on. if you set both sides to flex: 1, they will grow and shrink from a flex-basis of 0, so you will end up with two equal-sized columns. you could either take the content as a guide and set both to flex: auto, in which case they would grow and shrink from the size of the content or any size applied directly to the flex items such as a width on the image. .media .content { flex: 1; padding: 10
px; } .image { flex: 1; } you could also give each side different flex-grow factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. this will mean they use a flex-basis of 0 but distribute that space at different rates according to the flex-grow factor you have assigned. the flex properties we use to do this are described in detail in the guide controllin...
...for example setting the side with the image to flex: 1 and the content side to flex: 3. this will mean they use a flex-basis of 0 but distribute that space at different rates according to the flex-grow factor you have assigned. the flex properties we use to do this are described in detail in the guide controlling ratios of flex items along the main axis. .media .content { flex: 3; padding: 10
px; } .image { flex: 1; } flipping the media object to switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. the media object now displays the other way around. i have achieved this in the live example by adding a class of flipped alongside the existing .media class. this means you can s...
Using z-index - CSS: Cascading Style Sheets
<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 positioning <br />z-index: 8; </div> css div { padding: 10
px; opacity: 0.7; text-align: center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150
px; height: 350
px; top: 10
px; left: 10
px; border: 1
px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100
px; position: relative; top: 30
px; border: 1
px dashed #696; background-color: #cfc; margin: 0
px 50
px 0
px 50
px; } #rel...
... center; } b { font-family: sans-serif; } #abs1 { z-index: 5; position: absolute; width: 150
px; height: 350
px; top: 10
px; left: 10
px; border: 1
px dashed #900; background-color: #fdd; } #rel1 { z-index: 3; height: 100
px; position: relative; top: 30
px; border: 1
px dashed #696; background-color: #cfc; margin: 0
px 50
px 0
px 50
px; } #rel2 { z-index: 2; height: 100
px; position: relative; top: 15
px; left: 20
px; border: 1
px dashed #696; background-color: #cfc; margin: 0
px 50
px 0
px 50
px; } #abs2 { z-index: 1; position: absolute; width: 150
px; height: 350
px; top: 10
px; right: 10
px; border: 1
px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70
px; border: 1
px dashed #996; background-color: #ffc; margin: 0p...
...position: relative; top: 15
px; left: 20
px; border: 1
px dashed #696; background-color: #cfc; margin: 0
px 50
px 0
px 50
px; } #abs2 { z-index: 1; position: absolute; width: 150
px; height: 350
px; top: 10
px; right: 10
px; border: 1
px dashed #900; background-color: #fdd; } #sta1 { z-index: 8; height: 70
px; border: 1
px dashed #996; background-color: #ffc; margin: 0
px 50
px 0
px 50
px; } ...
Stacking with floated blocks - CSS: Cascading Style Sheets
ne told you about z-index). ...
...ition: 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: 10
px; text-align: center; } b { font-family: sans-serif; } #abs1 { position: absolute; width: 150
px; height: 200
px; top: 10
px; right: 140
px; border: 1
px dashed #900; background-color: #fdd; } #sta1 { height: 100
px; border: 1
px dashed #996; background-color: #ffc; margin: 0
px 10
px 0
px 10
px; text-align: left; } #flo1 { margin: 0
px 10
px 0
px 20
px; float: left; width: 150
px; height: 200
px; border: 1
px dashed #090; background-color: #cfc; } #flo2 { margin: 0
px 20p...
... height: 200
px; top: 10
px; right: 140
px; border: 1
px dashed #900; background-color: #fdd; } #sta1 { height: 100
px; border: 1
px dashed #996; background-color: #ffc; margin: 0
px 10
px 0
px 10
px; text-align: left; } #flo1 { margin: 0
px 10
px 0
px 20
px; float: left; width: 150
px; height: 200
px; border: 1
px dashed #090; background-color: #cfc; } #flo2 { margin: 0
px 20
px 0
px 10
px; float: right; width: 150
px; height: 200
px; border: 1
px dashed #090; background-color: #cfc; } #abs2 { position: absolute; width: 150
px; height: 100
px; top: 130
px; left: 100
px; border: 1
px dashed #990; background-color: #fdd; } ...
The stacking context - CSS: Cascading Style Sheets
ex: 6;</code> </div> <h1>division element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>division element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>division element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> css * { margin: 0; } html { padding: 20
px; font: 12
px/20
px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1
px dashed #696; padding: 10
px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190
px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40
px; left: 180
px; width: 330
px; borde...
...font: 12
px/20
px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1
px dashed #696; padding: 10
px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190
px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40
px; left: 180
px; width: 330
px; border: 1
px dashed #900; background-color: #fdd; padding: 40
px 20
px 20
px; } #div4, #div5 { border: 1
px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15
px; padding: 25
px 10
px 5
px; } #div5 { z-index: 1; margin-top: 15
px; padding: 5
px 10
px; } #div6 { z-index: 3; position: absolute; top: 20
px; left: 180
px; width: 150
px; height: 125
px; border: 1
px dash...
...color: #fdd; padding: 40
px 20
px 20
px; } #div4, #div5 { border: 1
px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15
px; padding: 25
px 10
px 5
px; } #div5 { z-index: 1; margin-top: 15
px; padding: 5
px 10
px; } #div6 { z-index: 3; position: absolute; top: 20
px; left: 180
px; width: 150
px; height: 125
px; border: 1
px dashed #009; padding-top: 125
px; background-color: #ddf; text-align: center; } result ...
Basic Shapes - CSS: Cascading Style Sheets
tent in over the shape. therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-radius. the below css creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels. .shape { float: left; shape-outside: inset(20
px 10
px 20
px 10
px round 10
px); } using the same rules as we use for the margin shorthand, you can set more than one offset at once. if there is only one value, it applies to all sides. if there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. if there are three values, the top is set to the first value, the left and right a...
... to the first value and the right and left offsets are set to the second. if there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. if there are four values, they apply to the top, right, bottom, and left, respectively. so, the above rules could also be described as: .shape { float: left; shape-outside: inset(20
px 10
px round 10
px); } in the example below we have an inset() shape used to pull content over the floated element. change the offset values to see how the shape changes. you can also add the box value that you wish to use as a reference box. in the example below change the reference box from margin-box to border-box, padding-box or content-box to see how the reference box used as the starting p...
... may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value. in the below example i have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. this gives a total width for the reference box of 140 pixels. i have given a value of 50% for the shape-radius value which means that our radius is 70
px. i have then set the position value to 30%. in the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset(). as an additional example, if you use the keywords top left for position, you can make a quarter circle shape in the top left corn...
CSS values and units - CSS: Cascading Style Sheets
55. an integer may be preceded by a + or - symbol, with no space between the symbol and the integer. numbers a <number> represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. numbers may also be preceded by a + or - symbol. dimensions a <dimension> is a <number> with a unit attached to it, for example 45deg, 100ms, or 10
px. the attached unit identifier is case insensitive. there is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid. css uses dimensions to specify: <length> (distance units) <angle> <time> <frequency> <resolution> these are all covered in subsections below. distance units where a distance unit, also known as a length, is allowed as a...
...of viewport's larger dimension. absolute length units are fixed to a physical length: either an inch or a centimeter. many of these units are therefore more useful when the output is a fixed size media, such as print. for example, mm is a physical millimeter, 1/10th of a centimeter. absolute length units unit name equivalent to cm centimeters 1cm = 96
px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96
px pc picas 1pc = 1/16th of 1in pt points 1pt = 1/72th of 1in
px pixels 1
px = 1/96th of 1in when including a length value, if the length is 0, the unit identifier is not required. otherwise, the...
... second. resolution unit resolution units are represented by the type <resolution>. they represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a css inch, centimeter, or pixel. it accepts the following values: unit description dpi dots per inch. dpcm dots per centimetre. dp
px, x dots per
px unit. percentages a <percentage> is a type that represents a fraction of some other value. percentage values are always relative to another quantity, for example a length. each property that allows percentages also defines the quantity to which the percentage refers. this quantity can be a value of another property of the same element, the value of a property of an ance...
align-self - CSS: Cascading Style Sheets
working draft update to latest syntax definitions. css flexible ...
... working draft update to latest syntax definitions. css flexible box layout modulethe definition of 'align-self...
... working draft update to latest syntax definitions. css flexible box layout modulethe definition of 'align-self' in that specification. candida...
attr() - CSS: Cascading Style Sheets
r is sparse. the attr() css function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. it can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned. /* simple usage */ attr(data-count); attr(title); /* with type */ attr(src url); attr(data-count number); attr(data-width
px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width
px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the html element referenced in the css. <type-or-unit> is a keyword representing either the type of the attribute's value, or its unit, as in html some attributes have implicit units. if the use ...
... that is including the unit (e.g. 12.5em). if it is not valid, that is not a length or out of the range accepted by the css property, the default value is used. if the given unit is a relative length, attr() computes it to an absolute length. leading and trailing spaces are stripped. 0, or, if 0 is not a valid value for the property, the property's minimum value. em, ex,
px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc <length> the attribute value is parsed as a css <number>, that is without the unit (e.g. 12.5), and interpreted as a <length> with the specified unit. if it is not valid, that is not a number or out of the range accepted by the css property, the default value is used. if the given unit is a relative length, attr() computes it to an ab...
...e is missing or contains an invalid value. if not set, css will use the default value defined for each <type-or-unit>. ...
background-origin - CSS: Cascading Style Sheets
dding box. content-box the background is positioned relative to the content box. formal definition initial valuepadding-boxapplies toall elements. ...
... the background is positioned relative to the content box. formal definition initial valuepadding-boxapplies toall elements. ...
...so applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10
px double; padding: 10
px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4
px solid black; padding: 10
px; 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, 0
px 0
px; background-origin: content-box, padding-box; } specifications specification status comment ...
background-repeat - CSS: Cascading Style Sheets
appens using space is when there isn't enough room to display one image. round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room (space left >= half of the image width) for another one to be added. when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260
px, repeated three times, might stretch until each repetition is 300
px wide, and then another image will be added. they will then compress to 225
px. no-repeat the image is not repeated (and hence the background image painting area will not necessarily be entirely covered). the position of the non-repeated background image is defined by the background-position css property. ...
...</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 example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12
px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160
px; height: 70
px; } /* 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; } /* mu...
... specifications specification status comment css backgrounds and borders module level 3the definition of 'background-repeat' in that specification. candidate recommendation adds support for multiple background images, the two-value syntax allowing distinct repet...
border-bottom-left-radius - CSS: Cascading Style Sheets
alue of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
...r 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-bottom-left-radius: 40
px 40
px; } . an arc of ellipse is used as the border div { border-bottom-left-radius: 40
px 20
px; } . the box is a square: an arc of circle is used as the border div { border-bottom-left-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { ...
...is a square: an arc of circle is used as the border div { border-bottom-left-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { border-bottom-left-radius: 40%; } . the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3
px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification. candidate recommendation initial definition ...
border-bottom-right-radius - CSS: Cascading Style Sheets
e of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. ...
... 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-bottom-right-radius: 40
px 40
px; } . an arc of ellipse is used as the border div { border-bottom-right-radius: 40
px 20
px; } . the box is a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div {...
...a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; } . the box is not a square: an arc of ellipse is used as the border div { border-bottom-right-radius: 40%; } . the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3
px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification. candidate recommendation initial definition ...
border-top-left-radius - CSS: Cascading Style Sheets
by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3
px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle to use for the border in that corner. with two values: the first value is a <length> or a <percentage> denoting the horizontal semi-major axis of...
...rcentagesrefer 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: 40
px 40
px; } an arc of ellipse is used as the border div { border-top-left-radius: 40
px 20
px; } 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 { border-top-left-radius: 40%; } ...
... candidate recommendation initial definition ...
border-width - CSS: Cascading Style Sheets
mples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-bottom-width border-left-width border-right-width border-top-width syntax /* keyword values */ border-width: thin; border-width: medium; border-width: thick; /* <length> values */ border-width: 4
px; border-width: 1.2rem; /* vertical | horizontal */ border-width: 2
px 1.5em; /* top | horizontal | bottom */ border-width: 1
px 2em 1.5cm; /* top | right | bottom | left */ border-width: 1
px 2em 0 4rem; /* global keywords */ border-width: inherit; border-width: initial; border-width: unset; the border-width property may be specified using one, two, three, or four values. when one value is ...
...width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6
px wide border on all 4 sides</p> <p id="bival"> two different values: 2
px wide top and bottom border, 10
px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9
px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6...
... wide border on all 4 sides</p> <p id="bival"> two different values: 2
px wide top and bottom border, 10
px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9
px bottom, and zero width right and left</p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6
px; } #bival { border: solid red; border-width: 2
px 10
px; } #treval { border: dotted orange; border-width: 0.3em 0 9
px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status comment css backgrounds and borders module level 3the defi...
bottom - CSS: Cascading Style Sheets
erty has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ bottom: 3
px; bottom: 2.4em; /* <percentage>s of the height of the containing block */ bottom: 10%; /* keyword value */ bottom: auto; /* global values */ bottom: inherit; bottom: initial; bottom: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the bottom edge of the containing block. for relatively positioned ele...
...rmal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed. ...
...the difference in behavior of the bottom property, when position is absolute versus fixed. 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: 30
px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1
px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification. working draft adds behavior for sticky positioning. css level 2 (revision 1)the def...
column-rule - CSS: Cascading Style Sheets
at sets the individual 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 individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). syntax column-rule: dotted; column-rule: solid 8
px; column-rule: solid blue; column-rule: thick inset blue; /* global values */ column-rule: inherit; column-rule: initial; column-rule: unset; the column-rule property is specified as one, two, or three of the values listed below, in any order. values <'column-rule-width'> is a <length> or one of the three keywords, thin, medium, or thick. see border-width for details. <'column-rule-style'...
... take note of how the `column-rule` property is used to adjust the style, width, and color of the rule that appears between the columns. </p> css .content-box { padding: 0.3em; background: #ff7...
...olumn-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length formal syntax <'column-rule-width'> | <'column-rule-style'> | <'column-rule-color'> examples example 1 /* same as "medium dotted currentcolor" */ p.foo { column-rule: dotted; } /* same as "medium solid blue" */ p.bar { column-rule: solid blue; } /* same as "8
px solid currentcolor" */ p.baz { column-rule: solid 8
px; } p.abc { column-rule: thick inset blue; } example 2 html <p class="content-box"> this is a bunch of text split into three columns. take note of how the `column-rule` property is used to adjust the style, width, and color of the rule that appears between the columns. </p> css .content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2
px #33f; } ...
margin - CSS: Cascading Style Sheets
o the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>. note: margins create extra space around an element. in contrast, padding creates extra space within an element. syntax /* apply to all four sides */ margin: 1em; margin: -3
px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2
px 1em 0 auto; /* global values */ margin: inherit; margin: initial; margin: unset; the margin property may be specified using one, two, three, or four values. each value is a <length>, a <percentage>, or the keyword auto. negative values draw the el...
... ]{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: 10
px; /* all sides: 10
px margin */ margin: 1.6em 20
px; /* top and bottom: 1.6em margin */ /* left and right: 20
px margin */ margin: 10
px 3% -1em; /* top: 10
px margin */ /* left and right: 3% margin */ /* bottom: -1em margin */ margin: 10
px 3
px 30
px 5
px; /* top: 1...
... /* all sides: 10
px margin */ margin: 1.6em 20
px; /* top and bottom: 1.6em margin */ /* left and right: 20
px margin */ margin: 10
px 3% -1em; /* top: 10
px margin */ /* left and right: 3% margin */ /* bottom: -1em margin */ margin: 10
px 3
px 30
px 5
px; /* top: 10
px margin */ /* right: 3
px margin */ /* bottom: 30
px margin */ /* left: 5
px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box i...
max-block-size - CSS: Cascading Style Sheets
d be vertical rather than horizontal). see the example in writing-mode, which shows the different writing modes in action. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...s three classes. the first, standard-box, is applied to both boxes, as seen above. it provides standard styling including the minimum and maximum block sizes, font size, and so forth. after that come the classes horizontal and vertical, which add the writing-mode property to the box, with the value set to horizontal-tb or vertical-rl depending on which class is used. ...
...th boxes, as seen above. it provides standard styling including the minimum and maximum block sizes, font size, and so forth. after that come the classes horizontal and vertical, which add the writing-mode property to the box, with the value set to horizontal-tb or vertical-rl depending on which class is used. .standard-box { padding: 4
px; background-color: #abcdef; color: #000; font: 16
px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160
px; min-block-size: 100
px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that specification. editor's draft ini...
offset-position - CSS: Cascading Style Sheets
ion of the offset-path. syntax /* keyword values */ offset-position: auto; offset-position: top; offset-position: bottom; offset-position: left; offset-position: right; offset-position: center; /* <percentage> values */ offset-position: 25% 75%; /* <length> values */ offset-position: 0 0; offset-position: 1cm 2cm; offset-position: 10ch 8em; /* edge offsets values */ offset-position: bottom 10
px right 20
px; offset-position: right 3em bottom 10
px; offset-position: bottom 10
px right; offset-position: top right 10
px; /* global values */ offset-position: inherit; offset-position: initial; offset-position: unset; values auto the initial position is the position of the box specified by the position property. <position> a <position>. a position defines an x/y coordinate, to place an it...
... working draft initial definition ...
... working draft initial definition ...
outline-color - CSS: Cascading Style Sheets
is placed over is high enough that people experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the text and background color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66
px and bold or larger, or 24
px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert. for the ...
... recommendation no change. css level 2 (revision 1)the definition of 'outline-col...
... recommendation no change. css level 2 (revision 1)the definition of 'outline-color' in that specification. recommendation initial definition. browser compatibility the compatibility ta...
outline-width - CSS: Cascading Style Sheets
ry. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is often more convenient to use the shorthand property outline when defining the appearance of an outline. ...
...rd values */ outline-width: thin; outline-width: medium; outline-width: thick; /* <length> values */ outline-width: 1
px; outline-width: 0.1em; /* global values */ outline-width: inherit; the outline-width property is specified as any one of the values listed below. values <length> the width of the outline specified as a <length>. thin depends on the user agent. typically equivalent to 1
px in desktop browsers (including firefox). medium depends on the user agent. typically equivalent to 3
px in desktop browsers (including firefox). thick depends on the user agent. typically equivalent to 5
px in desktop browsers (including firefox). formal definition initial valuemediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the comp...
...mediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the computed value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2
px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20
px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2
px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specifications speci...
overflow-block - CSS: Cascading Style Sheets
um dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...r adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...t, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1
px solid black; width: 250
px; height: 100
px; } #div1 { overflow-block: hidden; margin-bottom: 120
px;} #div2 { overflow-block: scroll; margin-bottom: 120
px;} #div3 { overflow-block: visible; margin-bottom: 120
px;} #div4 { overflow-block: auto; margin-bottom: 120
px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-block' in that specification. w...
padding - CSS: Cascading Style Sheets
ast, margin creates extra space around an element. constituent properties this property is a shorthand for the following css properties: padding-bottom padding-left padding-right padding-top syntax /* apply to all four sides */ padding: 1em; /* vertical | horizontal */ padding: 5% 10%; /* top | horizontal | bottom */ padding: 1em 2em 2em; /* top | right | bottom | left */ padding: 5
px 1em 0 2em; /* global values */ padding: inherit; padding: initial; padding: unset; the padding property may be specified using one, two, three, or four values. each value is a <length> or a <percentage>. negative values are invalid. when one value is specified, it applies the same padding to all four sides. when two values are specified, the first padding applies to the top and bottom, the...
...solute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20
px 50
px; } h3 { background-color: cyan; padding: 110
px 50
px 50
px 110
px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10
px; /* all sides: 10
px padding */ padding: 10
px 20
px; /* top and bottom: 10
px padding */ /* left and right: 20
px padding */ padding: 10
px 3% 20
px; ...
...d-color: cyan; padding: 110
px 50
px 50
px 110
px; } result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10
px; /* all sides: 10
px padding */ padding: 10
px 20
px; /* top and bottom: 10
px padding */ /* left and right: 20
px padding */ padding: 10
px 3% 20
px; /* top: 10
px padding */ /* left and right: 3% padding */ /* bottom: 20
px padding */ padding: 1em 3
px 30
px 5
px; /* top: 1em padding */ /* right: 3
px padding */ /* bottom: 30
px padding */ /* left: 5
px padding */ specifications specification ...
page-break-inside - CSS: Cascading Style Sheets
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. ...
...<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. ...
...i>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: 90
px; width: 200
px; columns: 1; column-width: 100
px; } .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. working draft ...
paint() - CSS: Cascading Style Sheets
custom properties are accessible to the paintworklet. specificat...
...custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1the definition of 'paint notation' in ...
...custom properties are accessible to the paintworklet. ...
perspective-origin - CSS: Cascading Style Sheets
erspective-origin: right; } .pobl { perspective-origin: bottom left; } .pobm { perspective-origin: bottom; } .pobr { perspective-origin: bottom right; } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100
px; height: 100
px; margin: 24
px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300
px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100
px; height: 100
px; border: none; line-height: 100
px; font-family: sans-serif; font-size: 60
px; color: white; text-align: center; } /* define ea...
...face-visibility: visible; perspective: 300
px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100
px; height: 100
px; border: none; line-height: 100
px; font-family: sans-serif; font-size: 60
px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50
px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50
px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50
px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50
px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50
px); } .bottom {...
...ey(180deg) translatez(50
px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50
px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50
px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50
px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50
px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10
px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification. editor's draft initial ...
radial-gradient() - CSS: Cascading Style Sheets
adient ray that extends horizontally from the center towards the right. percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. each shape is a single color determined by the color on the gradient ray it intersects. ...
...xtends horizontally from the center towards the right. percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. each shape is a single color determined by the color on the gradient ray it intersects. ...
... shape is a single color determined by the color on the gradient ray it intersects. examples simple gradient <div class="radial-gradient"></div> .radial-gradient { width: 240
px; height: 120
px; } .radial-gradient { background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); } non-centered gradient <div class="radial-gradient"></div> .radial-gradient { width: 240
px; height: 120
px; } .radial-gradient { background-image: radial-gradient(farthest-corner at 40
px 40
px, #f35 0%, #43e 100%); } more radial-gradient examples please see using css gradients for more examples. specifications specification status comment css images module level 3the definition of 'radial-gradients()' in that specification. candidate recom...
repeating-conic-gradient() - CSS: Cascading Style Sheets
nted by the conic gradient will not be accessible to screen reader users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. ...
... gradient will not be accessible to screen reader users. if the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document. ...
...ns understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples black and white starburst div { width: 200
px; height: 200
px; } <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: 200
px; height: 200
px; } <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. specifications specification status comment css images module level 4the definition of 'repeatin...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
://github.com/mdn/interactive-examples and send us a pull request. css grid layout initially defined the grid-row-gap property. this prefixed property is being replaced by row-gap. however, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above. syntax /* <length> values */ row-gap: 20
px; row-gap: 1em; row-gap: 3vmin; row-gap: 0.5cm; /* <percentage> value */ row-gap: 10%; /* global values */ row-gap: inherit; row-gap: initial; row-gap: unset; values <length-percentage> is the width of the gutter separating the rows. <percentage> values are relative to the dimension of the element. formal definition initial valuenormalapplies tomulti-column elements, flex containers, gr...
...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: 300
px; row-gap: 20
px; } #flexbox > div { border: 1
px solid green; background-color: lime; flex: 1 1 auto; width: 100
px; height: 50
px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20
px; } #grid { display: grid; height: 200
px; grid-template-columns: 200
px; grid-template-rows: repeat(3, 1fr); row-...
...-gap: 20
px; } #flexbox > div { border: 1
px solid green; background-color: lime; flex: 1 1 auto; width: 100
px; height: 50
px; } result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20
px; } #grid { display: grid; height: 200
px; grid-template-columns: 200
px; grid-template-rows: repeat(3, 1fr); row-gap: 20
px; } #grid > div { border: 1
px solid green; background-color: lime; } result specifications specification status comment css box alignment module level 3the definition of 'row-gap' in that specification. working draft initial definition ...
scroll-snap-coordinate - CSS: Cascading Style Sheets
the scroll-snap-coordinate css property defines the x and y coordinate positions within an element that will align with its nearest ancestor scroll container's scroll-snap-destination for each respective axis. /* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50
px 50
px; /* single coordinate */ scroll-snap-coordinate: 100
px 100
px, 100
px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been transformed, the snap coordinates are likewise transformed, thus aligning the snap points with the element as it is displayed. syntax values none specifies that the element does not contribute to a snap poin...
...5, 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 class="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: 20
px; } .scrollcontainer { width: 100
px; overflow: auto; white-space: nowrap; scroll-snap-type: mandatory; font-size: 0; } .scrollcontainer > div { width: 100
px; height: 100
px; display: inline-block; line-height: 100
px; text-align: center; font-size: 50
px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25
px 0; } .coord...
... ...
scroll-snap-type - CSS: Cascading Style Sheets
proximity-scroll-snapping" dir="rtl"> <div>y prox. ...
...<div>3</div> <div>4</div> <div>5</div> </div> </div> css /* setup */ html, body, .holster { height: 100%; } .holster { display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; outline: 1
px dashed lightgray; flex: none; } .container.x { width: 100%; height: 128
px; flex-flow: row nowrap; } .container.y { width: 256
px; height: 256
px; flex-flow: column nowrap; } /* 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; } .conta...
...ap */ .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: 128
px; font-size: 64
px; width: 100%; height: 128
px; } .y.container > div { line-height: 256
px; font-size: 128
px; width: 256
px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64
px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } ...
scrollbar-width - CSS: Cascading Style Sheets
ng mechanism. while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative. wcag criterion 2.1.1 (keyboard) has been in place for a long time to advise on basic keyboard accessibility, and this should include scrolling of content areas. and introduced in wcag 2.1, criterion 2.5.5 (target size) advises that touch targets should be at least 44
px in width and height (although the problem is compounded on high-resolution screens; thorough testing is advised). mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoappli...
...gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dandelion cucumber e...
...gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dandelion cucumber earthnut pea peanu...
text-justify - CSS: Cascading Style Sheets
onsequat justo id, feugiat leo. cras eu elementum dui.</p> <p class="char"><code>text-justify: inter-character</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. ...
...o. cras eu elementum dui.</p> <p class="char"><code>text-justify: inter-character</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. ...
...<p class="char"><code>text-justify: inter-character</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, feugiat leo. cras eu elementum dui.</p> p { font-size: 1.5em; border: 1
px solid black; padding: 10
px; width: 95%; margin: 10
px auto; text-align: justify; } .none { text-justify: none; } .auto { text-justify: auto; } .dist { text-justify: distribute; } .word { text-justify: inter-word; } .char { text-justify: inter-character; } specifications specification status comment css text module level 3the definition of 'text-justify' in that specification. working draft ...
text-rendering - CSS: Cascading Style Sheets
xt-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard. however, gecko and webkit browsers let you apply this property to html and xml content on windows, macos, and linux. one very visible effect is optimizelegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20
px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family). syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. for differences in how this value is interpreted by the browser, see the compatibility table. optimizespeed the browser emphasizes rende...
... same as optimizelegibility. formal definition initial valueautoapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrates how optimizelegibility is used by browsers automatically when the font-size is smaller than 20
px. ...
... specifiedanimation typediscrete formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrates how optimizelegibility is used by browsers automatically when the font-size is smaller than 20
px. html <p class="small">lyowat - ff fi fl ffl</p> <p class="big">lyowat - ff fi fl ffl</p> css .small { font: 19.9
px "constantia", "times new roman", "georgia", "palatino", serif; } .big { font: 20
px "constantia", "times new roman", "georgia", "palatino", serif; } result optimizespeed vs optimizelegibility this example shows the difference between the appearance of optimizespeed and optimizelegibility (in your browser; other browsers may vary). html <p class="speed">lyowat - ff fi fl ffl</p> <p class="...
Cross-browser audio basics - Developer guides
<!-- 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: 80
px; float: left; } #progress { margin-left: 80
px; border: 1
px solid black; } #bar { height: 20
px; background-color: green; width: 0; } now let's wire this thing up with javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = doc...
...tion) * 100), 10) + "%"; }); } you should end up with something like this: seeking using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar. fortunately this isn't too difficult to implement. ...
...) + "%"; }); } you should end up with something like this: seeking using the seek bar this is a good start, but it would be nice to be able to navigate the audio using the progress bar. fortunately this isn't too difficult to implement. ...
Video player styling basics - Developer guides
se64,ivborw0kggoaaa ... '); } when the data-state of the button is changed, the appropriate image will also be changed. all the other buttons are treated in a similar way. progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-radius:2
px; -webkit-border-radius:2
px; border-radius:2
px; } like the <button> elements, <progress> also has a default border, which is removed here. it is also given a slight rounded corner for aesthetic reasons. the color property is also defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it increases. as mentioned in the previous articl...
...is.offsetwidth; video.currenttime = pos * video.duration; }); fullscreen the fullscreen implemention hasn't changed. responsive styling now that the player has its basic look and feel taken care of, some other styling changes — involving media queries — need to be made in order to make it responsive. the player currently works fairly well until displayed on a "medium" screen (e.g. 1024
px/64em) or smaller. in this case, the margins and padding on the <figure> element need to be removed so that all the available space is taken advantage of, and the buttons are a bit too small so this needs to be altered by setting a new height on the element that has the .controls class set on it: @media screen and (max-width:64em) { figure { padding-left:0; padding-right:0; h...
...since the height of the .controls class element will now vary, a fixed height is no longer required — it is therefore set to auto. the definitions for the elements within the .controls element now also need to changed: @media screen and (max-width:42.5em) { .controls { height:auto; } .controls > * { display:block; width:1...
<a>: The Anchor element - HTML: Hypertext Markup Language
ents as an image, you can create a link with a download attribute and the canvas data as a data: url: example painting app with save link html <p>paint by holding down the mouse button and moving it. ...
...a data: url: example painting app with save link html <p>paint by holding down the mouse button and moving it. ...
...a: url: example painting app with save link html <p>paint by holding down the mouse button and moving it. ...
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
correct directionality to use based on the contents of the <bdi>. examples no <bdi> with only ltr this example lists the winners of a competition using <span> elements only. when the names only contain ltr text the results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1
px solid #3f87a6; max-width: calc(100% - 40
px - 6
px); padding: 20
px; width: calc(100% - 40
px - 6
px); border-width: 1
px 1
px 1
px 5
px; } no <bdi> with rtl text this example lists the winners of a competition using <span> elements only, and one of the winners has a name consisting of rtl text. in this case the "- 1", which consists of characters with neutral or weak directionality, will a...
... only, and one of the winners has a name consisting of rtl text. in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1
px solid #3f87a6; max-width: calc(100% - 40
px - 6
px); padding: 20
px; width: calc(100% - 40
px - 6
px); border-width: 1
px 1
px 1
px 5
px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements. these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <l...
...<bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements. these elements instruct the browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1
px solid #3f87a6; max-width: calc(100% - 40
px - 6
px); padding: 20
px; width: calc(100% - 40
px - 6
px); border-width: 1
px 1
px 1
px 5
px; } specifications specification status comment html living standardthe definition of '<bdi>' in that specification. living standard html5the definition of '<bdi>' in that specification. recommendation ...
<img>: The Image Embed element - HTML: Hypertext Markup Language
cause it can leak information from tls-protected resources to insecure origins. sizes one or more strings separated by commas, indicating a set of source sizes. each source size consists of: a media condition. this must be omitted for the last item in the list. a source size value. media conditions describe properties of the viewport, not of the image. for example, (max-height: 500
px) 1000
px proposes to use a source of 1000
px width, if the viewport is not higher than 500
px. source size values specify the intended display size of the image. user agents use the current source size to select one of the sources supplied by the srcset attribute, when those sources are described using width (w) descriptors. the selected source size affects the intrinsic size of the image (the ima...
...te in user agents that support srcset. <img src="https://udn.realityripple.com/samples/61/869e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd7824ce30c9587f0d8548b946ee9fb1293d2eccdb6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included. ...
...e27c81e.png" alt="mdn logo" srcset="/static/external/6c/6c98485e5d8acac9fecd7824ce30c9587f0d8548b946ee9fb1293d2eccdb6cf1.png 2x"> using the srcset and sizes attributes the src attribute is ignored in user agents that support srcset when w descriptors are included. when the (max-width: 600
px) media condition matches, the 200 pixel-wide image will load (it is the one that matches 200
px most closely), otherwise the other image will load. <img src="/files/16864/clock-demo-200
px.png" alt="clock" srcset="/files/16864/clock-demo-200
px.png 200w, /files/16797/clock-demo-400
px.png 400w" sizes="(max-width: 600
px) 200
px, 50vw"> to see the resizing in action, view the example on a separate page, so you can actually resize the content area. security and ...
<input type="date"> - HTML: Hypertext Markup Language
d pseudo-elements to add an icon next to the input, based on whether or not the current value is valid. we had to put the icon on a <span> next to the input, not on the input itself, because in chrome at least the input's generated content is placed inside the form control, and can't be styled or shown effectively. label { display: flex; align-items: center; } span::after { padding-left: 5
px; } input:invalid + span::after { content: '✖'; } input:valid+span::after { content: '✓'; } important: client-side form validation is no substitute for validating on the server. it's easy for someone to modify the html, or bypass your html entirely and submit the data directly to your server. if your server fails to validate the received data, disaster could strike with data that is ba...
...utton>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9). of course, this doesn't stop people from entering invalid dates, or incorrect formats. so we still have a problem. span { position: relative; } span::after { right: -18
px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } at the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a javascript library such as jquery date picker. examples in this example, we create 2 sets of ui elements f...
... we create a new <input> element, try setting its type to date, then immediately check what its type is — unsupporting browsers will re...
<input type="range"> - HTML: Hypertext Markup Language
ge control: <input type="range" id="volume" min="0" max="11" value="7" step="1"> screenshotlive sample this control is horizontal (at least on most if not all major browers; others might vary). standards according to the specification, making it vertical requires adding css to change the dimensions of the control so that it's taller than it is wide, like this: css #volume { height: 150
px; width: 50
px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1"> result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to...
...0" max="11" value="7" step="1"> </div> css now we need some css. first is the css for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things. .slider-wrapper { display: inline-block; width: 20
px; height: 150
px; padding: 0; } then comes the style information for the <input> element within the reserved space: .slider-wrapper input { width: 150
px; height: 20
px; margin: 0; transform-origin: 75
px 75
px; transform: rotate(-90deg); } the size of the control is set to be 150 pixels long by 20 pixels tall. the margins are set to 0 and the transform-origin is shifted to the middle...
...finally, we rotate counter-clockwise by 90°. the result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom. ...
<input type="week"> - HTML: Hypertext Markup Language
> here's the css used in the above example. here we make use of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. ...
...of the :valid and :invalid css properties to style the input based on whether or not the current value is valid. we had to put the icons on a <span> next to the input, not on the input itself, because in chrome the generated content is placed inside the form control, and can't be styled or shown effectively. div { margin-bottom: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers. making week values required in addition you c...
...ek" name="week"> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> <option value="2017" selected>2017</option> <option value="2018">2018</option> </select> </span> </div> </div> </form> the week values are dynamically generated by the javascript code below. div { margin-bottom: 10
px; position: relative; } input[type="number"] { width: 100
px; } input + span { padding-right: 30
px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5
px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5
px; } the other part of the code that may be of interest is the feature detection code. to detect whether the brows...
<table>: The Table element - HTML: Hypertext Markup Language
this helps people navigating with the aid of assistive technology such as a screen reader, people experienc...
... this helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and p...
... this helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with co...
Preloading content with rel="preload" - HTML: Hypertext Markup Language
of <link> elements is their ability to accept media attributes. ...
... types or full-blown media queries, allowing you to do responsive preloading! ...
...utf-8"> <title>responsive preload example</title> <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600
px)"> <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601
px)"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <h1>my site</h1> </header> <script> var mediaquerylist = window.matchmedia("(max-width: 600
px)"); var header = document.queryselector('header'); if (mediaquerylist.matches) { header.style.backgroundimage = 'url(bg-image-narrow.png)'; } else { header.style.backgroundimage = 'url(bg-image-wide.png)'; } </script> </body> we include media attributes on our <link> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image i...
Add to Home screen - Progressive web apps (PWAs)
: "shows random fox pictures. hey, at least it isn't cats.", "display": "fullscreen", "icons": [ { "src": "icon/fox-icon.png", "sizes": "192x192", "type": "image/png" } ], "name": "awesome fox pictures", "short_name": "foxes", "start_url": "/pwa-examples/a2hs/index.html" } appropriate icon as shown in the above manifest listing, we are including a 192 x 192
px icon for use in our app. you can include more sizes if you want; android will choose the most appropriate size for each different use case. you could also decide to include different types of icons so devices can use the best one they are able to (e.g., chrome already supports the webp format). note that the type member in each icon's object specifies the icon's mimetype, so the browser can quic...
...first of all, we declare a deferredprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display...
...first of all, we declare a deferredprompt variable (which we'll explain later on), get a reference to our install button, and set it to display: none initially: let deferredprompt; const addbtn = document.queryselector('.add-button'); addbtn.style.display = 'none'; w...
Media - Progressive web apps (PWAs)
or example, an element that is disabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. ...
...is disabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. ...
...sabled or read-only has the disabled attribute or the readonly attribute. selectors can specify these attributes like any other attributes, by using square brackets: [disabled] or [readonly]. ...
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
everything else specifies details about the gradient mask itself. applying the svg effect to (x)html is accomplished by assigning the target class defined above to an element, like this: <p class="target" style="bac...
...everything else specifies details about the gradient mask itself. applying the svg effect to (x)html is accomplished by assigning the target class defined above to an element, like this: <p class="target" style="background:lime;">...
...et dolore magna aliqua.</b> ut enim ad minim veniam. </p> <button onclick="toggleradius()">toggle radius</button> <svg height="0"> <clippath id="clipping-path-1" clippathunits="objectboundingbox"> <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> <rect x="0.5" y="0.2" width="0.5" height="0.8"/> </clippath> </svg> .target { clip-path: url(#clipping-path-1); } p { width: 300
px; border: 1
px solid #000; display: inline-block; } this establishes a clipping area made of a circle and rectangle, assigns it the id #clipping-path-1, then references it in the css. the clip path can be assigned to any element with the target class. you can make changes to the svg in real time and see them immediately affect the rendering of the html. for example, you can resize the circle ...
textLength - SVG: Scalable Vector Graphics
yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16
px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" ...
...these events will be sent any time the slider's value changes, even if the user hasn't stopped mo...
...er() on the slider control, to receive any input events which occur. these events will be sent any time the slider's value changes, even if the user hasn't stopped moving it, so we can responsively adjust the text width. when an "input" event occurs, we call svglength.newvaluespecifiedunits() to set the value of textlength to the slider's new value, using the svglength interface's svg_lengthtype_
px unit type to indicate that the value represents pixels. 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. after updating the text width, the contents of the widthdisplay box are updated with the new value as well, and we're finished. result here's what the example looks like. try draggin...
<text> - SVG: Scalable Vector Graphics
ern, clipping path, mask, or filter to <text>, like any other svg graphics element. if text is included in svg not inside of a <text> element, it is not rendered. this is different than being hidden by default, as setting the display property won't show the text. ...
...t>, like any other svg graphics element. if text is included in svg not inside of a <text> element, it is not rendered. this is different than being hidden by default, as setting the display property won't show the text. ...
..., as setting the display property won't show the text. html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13
px sans-serif; } .heavy { font: bold 30
px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40
px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: 0; animatable: yes y the y coordin...
page-mod - Archive of obsolete content
you could use this icon: . private windows if your add-on has not opted into private browsing, then your page-mods will not attach content scripts to documents loaded into private windows, even if their urls match the pattern you have specifi...
..., and the workaround is no longer needed. name:contentstyle type: string,array use this option to load one or more stylesheet rules into the targeted documents. each stylesheet rule is supplied as a separate string. to supply multiple rules, pass an array of strings: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.org", contentstyle: [ "div { padding: 10
px; color: red }", "img { display: none }" ] }); content styles specified by this option are loaded after those specified by the contentstylefile option. name: attachto type: string,array if this option is not specified, content scripts: are not attached to any tabs that are already open when the page-mod is created. are attached to all documents whose url matches the rule: so ...
content/mod - Archive of obsolete content
ify a page content. globals constructors functions attachto(modification, window) function applies given modification to a given window. 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: 4
px 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. window : nsidomwindow the window to be modified. detachfrom(modification, window) function removes attached modification from a given window. if window is not specified, modification is removed from all...
...tion from a given window. if window is not specified, modification is removed from all the windows it's being attached to. 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: 4
px solid gray }" }); // assuming window points to the content page we want to modify attachto(style, window); // ... detachfrom(style, window); parameters modification : object the modification we want to remove from the target window : nsidomwindow the window to be modified. if window is not provided modification is removed from all targets it's being attached to. gettargetwindow(target) fu...
Modifying the Page Hosted by a Tab - Archive of obsolete content
or more content scripts into it using attach() method of tab object. the job of these scripts is to interact with web content. here's a simple example: var button = require("sdk/ui/button/action").actionbutton({ id: "style-tab", label: "style tab", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'document.body.style.border = "5
px solid red";' }); } }); to run this example, save an icon file named "icon-16.png" in add-on's "data" directory. you could download this icon: . this add-on creates a button with mozilla favicon as an icon. it has a click handler which fetches the active tab and loads a script into the page hosted by the active tab. the script is specified using the contentscript option, and just draws a r...
...() returns a worker object containing the port property you use to send messages to the content script. let's rewrite the example above to pass a message from the add-on to the content script. ...
Boxes - Archive of obsolete content
contents, you should probably add align="start" attribute to the box. ...
...ge from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5
px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5
px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5
px"/> </box> </window> ...
Canvas code snippets - Archive of obsolete content
ll get a 'security error" code: "1000' error. remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10
px'; iframe.width = windowwidth + '
px'; iframe.style.visibility = 'hidden'; iframe.src = this.url; // here is where the magic happens... add a listener to the // frame's onload event iframe.addeventlistener('load', this.remotepageloaded, true); //append to the end of the page window.document.body.appendchild(iframe); return; }; remotecanvas.prototype.remotepagelo...
...ototype.remotepageloaded = function() { // look back up the iframe by id var ldrframe = document.getelementbyid('test-iframe'); // get a reference to the window object you need for the canvas // drawwindow method var remotewindow = ldrframe.contentwindow; //draw canvas var canvas = document.createelement('canvas'); canvas.style.width = remotecanvas.canvas_width + '
px'; canvas.style.height = remotecanvas.canvas_height + '
px'; canvas.width = remotecanvas.canvas_width; canvas.height = remotecanvas.canvas_height; var windowwidth = window.innerwidth - 25; var windowheight = window.innerheight; var ctx = canvas.getcontext('2d'); ctx.clearrect(0, 0, remotecanvas.canvas_width, remotecanvas.canvas_height...
StringView - Archive of obsolete content
aabiadqaqbeaaaaaaaaaaaaaaaaaa7qeaabaagqaqcwaaaaaaaaaaaaaaaaaa+qeaabiadqaabuaaaaaaabuaaaaaaaaa/geaacaaaaaaaaaaaaaaaaaaaaaaaaaaegiaabecgaaqcwaaaaaaaaaaaaaaaaaahgiaacaaaaaaaaaaaaaaaaaaaaaaaaaaoaiaabiacwcoa0aaaaaaaaaaaaaaaaaaagluaxquywbjcnrzdhvmzi5jaf9fsknsx0xju1rfxwbkzxjlz2lzdgvyx3rtx2nsb25lcwbyzwdpc3rlcl90bv9jbg9uzxmax19kb19nbg9iywxfzhrvcnnfyxv4agnvbxbszxrlzc42mzu5af9fzg9fz2xvymfsx2r0b3jzx2f1ef9maw5
px2fycmf5x2vudhj5agzyyw1lx2r1bw15af9fznjhbwvfzhvtbxlfaw5pdf9hcnjhev9lbnryeqbozwxsby5jaf9frljbtuvfru5ex18ax19kq1jfru5ex18ax19pbml0x2fycmf5x2vuzabfrfloqu1jqwbfx2luaxrfyxjyyxlfc3rhcnqax0dmt0jbtf9prkztrvrfvefctevfaf9fbgliy19jc3vfzmluaqbfsvrnx2rlcmvnaxn0zxjutunsb25lvgfibguazgf0yv9zdgfydabwdxrzqebhtelcq18yljiunqbfzwrhdgeax2zpbmkax19sawjjx3n0yxj0x21haw5aqedmsujdxziumi41af9fzgf0yv9zdgfydabfx2dtb25fc3rhcnrfx...
...*/ swhelloworld.r...
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
ibute. for example, flex="1" indicates that the element should extend to fill that axis; if there are two elements with flex="1" in a row, they are adjusted to be of equal size. you can assign flex="2" (or higher values) as a size multiplier for elements. in listing 4, the second label will be displayed twice as big as the first (figure 3). <hbox> <label value="label1" flex="1" style="border: 1
px solid;"/> <label value="label2" flex="2" style="border: 1
px solid;"/> </hbox> listing 4: growing with flex figure 3: output of listing 4 ordinal within a xul box, elements will ordinarily be laid out following their order of appearance in the source code (laid out left to right or top to bottom). use the ordinal attribute to alter their order. the ordinal attribute takes positive integer...
...ul overlay document, elements in the base document with the same id values will have their attributes and values merged with the overlay document. try overwriting the contents of overlaydocument.xul with listing 25 and re-saving. <?xml version="1.0" encoding="utf-8"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox id="box1" align="center" style="border: 1
px solid; margin: 1em;"> <button label="button 1"/> <button label="button 2" insertbefore="label1"/> </hbox> <button label="button 3"/> </overlay> listing 25: substitute code for overlaydocument.xul let's open base.xul in a firefox window again. as shown in figure 20, the style attribute from the element with the id "box1" in the overlay document has been merged with the markup for th...
XUL user interfaces - Archive of obsolete content
ar> <statusbarpanel id="status"/> </statusbar> </vbox> </window> make a new css file, style7.css. ...
...ing-left: 5
px; } /* the group box */ .demo-group { padding: 1em; } .demo-group grid { margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4
px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date input box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1
px inset -moz-dialog; margin: 4
px; padding: 0
px 4
px; } #status { padding: 4
px; } #status[warning] { color: red; } make a new text file, script7.js. copy and paste the content from h...
JXON - Archive of obsolete content
cument: /* 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", "keyvalue": "alert(\"welcome!\");" }, "style": "p:first-letter {\n font: italic bold 30
px georgia, serif;\n}" }, "body": { "h1": "my html document", "p": "hello world!!" } } }; /* create the document */ var omyhtmldoc = jxon.unbuild(omyhtmlstruct, "http://www.w3.org/1999/xhtml"); …and here is the output of alert((new xmlserializer()).serializetostring(omyhtmldoc)): <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <...
... jxon.unbuild(omyhtmlstruct, "http://www.w3.org/1999/xhtml"); …and here is the output of alert((new xmlserializer()).serializetostring(omyhtmldoc)): <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>my html document</title> <script type="text/javascript"> alert("welcome!"); </script> <style> p:first-letter { font: italic bold 30
px georgia, serif; } </style> </head> <body> <h1>my html document</h1> <p>hello world!!</p> </body> </html> note: as we already said in the note within code considerations, despite the bidirectional conversion between xml and json is lossless regarding the whole content and the structure of an xml document, it is not lossless regarding the ordering of elements, which for some xml dialec...
Clipboard Test - Archive of obsolete content
<style></style> <style>.description{ display: block; font-size: 13pt; color: #444; font-style: italic; margin-bottom: 7
px; } .method>.returns{display: none;} .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5
px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:80
px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300
px; vertical-align:top;margin-right:30
px} .method>.params>.param>.type{display:inline-block; width:100
px; vertical-align:top;font-wei...
...features can get and set the clipboard in various flavors of data type. ...
MenuItems - Archive of obsolete content
'addbookmark.png'); } this technique can also be used to apply an image for the menu element, except you would want to use the "menu-iconic:" class instead. <menuitem id="bookmark" class="menu-iconic" label="bookmarks" image="bookmarks.png"/> menu icon animation in order to animate the menu item icon on hover a -moz-image-region rule can be applied. in this example we use an image that is 16
px wide and 32
px high. the top 16
px square is the icon in normal state the bottom part in hovered state. note that the image element is on a child level underneath the menu or menuitem, and it will have the class menu-iconic-icon. hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addboo...
...s on a child level underneath the menu or menuitem, and it will have the class menu-iconic-icon. hence, -moz-image-region is not applied to the menu itself, but one level lower: <menuitem id="add-bookmark" class="menuitem-iconic" label="add bookmark" image="addbookmark.png"/> #add-bookmark { list-style-image: url('addbookmark.png'); } #add-bookmark .menu-iconic-icon { -moz-image-region: rect(0
px, 16
px, 16
px, 0
px) !important; } #add-bookmark:hover .menu-iconic-icon { -moz-image-region: rect(16
px, 16
px, 32
px, 0
px) !important; } this behavior is fundamentally different to other html elements, such as <li> or <div> where list-style-image and -moz-image-region can be applied at the same element level. checkbox menu items sometimes, you will want to have an item on a menu that acts as a ...
Building Trees - Archive of obsolete content
really see the photos, since the tree’s rows are too small! it’s not normal to put photos in a tree like this—instead, the images would be used for icons. on the other hand, you could use a stylesheet to change the default height of the tree rows. you cannot make each row a different height, but you can change the height of all rows with some css: treechildren::-moz-tree-row { height: 150
px; } since no elements are constructed by the tree builder, you cannot use the style or class attributes to change the style of a cell (this is the case with all trees). you must use syntax like that above to change the appearance. in the example above, it changes the height of a row to 150 pixels. you may want to change the syntax to refer to a specific treechildren element rather than all of the...
... « previousnext » ...
Anonymous Content - Archive of obsolete content
it. this would be created with a box to hold the image and two buttons. the image element has to be placed outside the xbl as it will differ with each use. xul: <box class="zoombox"> <image src="images/happy.jpg"/> <image src="images/angry.jpg"/> </box> xbl: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1
px solid black"> <children includes="image"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag. there are two images, so both will be added next to each other. this results in a display that is equivalent to the following: <binding id="zoombox"> <content> ...
...m out"/> </xul:box> </content> </binding> the explicit children in the xul file will be placed at the location of the children tag. there are two images, so both will be added next to each other. this results in a display that is equivalent to the following: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1
px solid black"> <xul:image src="images/happy.jpg"/> <xul:image src="images/angry.jpg"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> from the dom's perspective, the child elements are still in their original location. that is, the outer xul box has two children, which are the two images. the inner box with the border has one child, th...
Element Positioning - Archive of obsolete content
of extra space. if one button has a maximum width, the second will still continue to grow and take all of the remaining space. if a box has a maximum width or height, the children cannot grow larger than that maximum size. if a box has a minimum width or height, the children cannot shrink smaller than that minimum size. ...
...second will still continue to grow and take all of the remaining space. if a box has a maximum width or height, the children cannot grow larger than that maximum size. if a box has a minimum width or height, the children cannot shrink smaller than that minimum size. examples of setting widths and heights <button label="1" style="width: 100
px;"/> <button label="2" style="width: 100em; height: 10
px;"/> <button label="3" flex="1" style="min-width: 50
px;"/> <button label="4" flex="1" style="min-height: 2ex; max-width: 100
px"/> <textbox flex="1" style="max-width: 10em;"/> <description style="max-width: 50
px">this is some boring but simple wrapping text.</description> example 1 the first button will be displayed with a width of 100 pixels (
px means pixels). you need to add the unit or the...
Stacks and Decks - Archive of obsolete content
e, a progress bar might be created using a bar and a label overlaid on top of it. shadowing with stacks one convenient use of the stack element however is that you could emulate a number of css properties with it. for example, you could create an effect similar to the text-shadow property with the following: example 1 : source view <stack> <description value="shadowed" style="padding-left: 1
px; padding-top: 1
px; font-size: 15pt"/> <description value="shadowed" style="color: red; font-size: 15pt;"/> </stack> both description elements create text with a size of 15 points. the first, however is offset one pixel to the right and down by adding a padding to its left and top sides. this has the result of drawing the same text 'shadowed' again but slightly offset from the other. the sec...
...make the shadow blink). it is also useful as mozilla doesn't currently support css text shadowing. a disadvantage is that the area taken up by the shadow makes the size of the stack larger. shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1
px; padding-top: 1
px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some platforms. note that events such as mouse clicks and keypresses are passed to the element on the top of the stack, that is, the last element in the stack. that means that buttons will only work properly as the last element of the ...
splitter - Archive of obsolete content
ox contents, and the presence or absence of a collapse attribute on the splitter. for: <vbox></vbox> <splitter/> <vbox></vbox> ...the splitter will not move, unless there is a collapse attribute on the splitter, which will cause it to collapse as soon as it is dragged. for: <vbox/> <splitter/> <vbox height="500"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 100
px intrinsic height of the lower box, where it will stop (or collapse if the splitter has a collapse attribute). for: <vbox/> <splitter/> <vbox height="500" minheight="200"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 200
px minheight, where it will stop or collapse. for: <vbox/> <splitter/> <vbox height="500" style="min-height: 50"> <vbox height="100"/> </vbox> ...
...top (or collapse if the splitter has a collapse attribute). for: <vbox/> <splitter/> <vbox height="500" minheight="200"> <vbox height="100"/> </vbox> ...the splitter can be dragged down to the 200
px minheight, where it will stop or collapse. for: <vbox/> <splitter/> <vbox height="500" style="min-height: 50"> <vbox height="100"/> </vbox> ...the splitter can be dragged down below the 100
px intrinsic height of the lower box, causing the child box to overflow, until reaching the min-height, at which point it will stop or collapse. that should also work with a minheight attribute specifying a value less than the intrinsic height. (however, because of bug 513597, only specifying both minheight and minwidth attributes, or specifying min-height or min-width in css, actually works to allo...
titlebar - Archive of obsolete content
the mouse button is released. ...
...n="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10
px; -moz-box-shadow: 0 1
px 8
px rgba(0, 0, 0, 0.8); margin: 8
px 12
px 16
px;"/> </window> it can be opened from the error console like this: open("file:///users/markus/sites/hudwindow.xul", "", "chrome=1, titlebar=0") attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, d...
CommandLine - Archive of obsolete content
</window> original document information author: georges-etienne legendre last updated date: august 21st, 2007 ...
...</window> original document information author: georges-etienne legendre last updated date: august 21st, 2007 ...
Create Your Own Firefox Background Theme - Archive of obsolete content
nd. finished your design? you can submit it right now! creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000
px wide × 200
px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have ...
...eme footer image in older versions of firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. it will be anchored to the bottom-left corner of the browser window. footer images are optional. view a sample theme footer here. image requirements dimensions should be 3000
px wide × 100
px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the upper portion of the image if the find bar is open or if an extension adds more height to the bottom of the window. the left-hand side of the image shou...
Summary of Changes - Archive of obsolete content
face we could introduce dom 3 core textcontent attribute here which is supported by mozilla 1.5+ and is a perfect equivalent to innertext. ...
...m 3 core textcontent attribute here which is supported by mozilla 1.5+ and is a perfect equivalent to innertext. ...
-moz-border-bottom-colors - Archive of obsolete content
)<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... ...
-moz-border-left-colors - Archive of obsolete content
)<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... ...
-moz-border-right-colors - Archive of obsolete content
)<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... ...
-moz-border-top-colors - Archive of obsolete content
)<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
... ...
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
ortunately, the behavior can be overcome in all cases with a single css2 rule. tables and inheritance in css terms, tables are like any other element when it comes to inheritance. if a css property can be inherited, then table elements and their components (tr, td, etc.) should inherit just as any other element would. for example, if an author writes: <style type="text/css"> body {font-size: 11
px;} </style> ...then the text inside table cells should also be 11 pixels in size. browsers from the version-four era, however, treated tables differently. in these browsers, a table's text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules, and led many authors to create wo...
...in size. browsers from the version-four era, however, treated tables differently. in these browsers, a table's text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body. this represented a violation of css inheritance rules, and led many authors to create workarounds such as: <style type="text/css"> body, table, td {font-size: 11
px;} </style> recreating legacy behavior to avoid "breaking" older pages that were authored with old-browser behaviors in mind, mozilla and related browsers will mimic old browsers when in "quirks" mode. to do this, the gecko rendering engine uses the following rule in the quirk.css user agent file: /* quirk: cut off all font inheritance in tables and captions except for family. */ table, caption...
CSS pixel - MDN Web Docs Glossary: Definitions of Web-related terms
the css pixel—denoted in css with the suffix
px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes. that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person. when a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance. ...
...s. that definition, of course, leaves a lot of wiggle room, as the terms "be comfortably seen" and "an arm's length away" are imprecise, varying from person to person. when a user is sitting at a desk in front of a desktop, the display is generally substantially farther away from their eyes than when they're on a cell phone, for instance. as such, it generally suffices to say that when the unit
px is used, the goal is to try to have the distance 96
px equal about 1 inch on the screen, regardless of the actual pixel density of the screen. in other words, if the user is on a phone with a pixel density of 266 dpi, and an element is placed on the screen with a width of 96
px, the actual width of the element would be 266 device pixels. learn more technical reference css values and units modu...
Debugging CSS - Learn web development
d values that change how the element is laid out. this includes a description of properties that you may not have explicitly used on the element, but which do have initial values set. in this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses. compare the two boxes with classes box1 and box2. they both have the same width applied (400
px), however box1 is visually wider. you can see in the layout panel that it is using content-box. this is the value that takes the size you give the element and then adds on the padding and border width. the element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. this means that the space taken up on the page by ...
... it is using content-box. this is the value that takes the size you give the element and then adds on the padding and border width. the element with a class of box2 is using border-box, so here the padding and border is subtracted from the size that you have given the element. this means that the space taken up on the page by the box is the exact size that you specified — in our case width: 400
px. note: find out more in examining and inspecting the box model. solving specificity issues sometimes during development, but in particular when you need to edit the css on an existing site, you will find yourself having a hard time getting some css to apply. no matter what you do, the element just doesn't seem to take the css. what is generally happening here is that a more specific select...
Test your skills: Selectors - Learn web development
below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors two without changing the html, make the following changes to the look of the content in this example: give the element with an id of special a yellow background. give the element with a class of alert a 1
px grey border. if the element with a class of alert also has a class of stop, make the background red. if the element with a class of alert also has a class of go, make the background green. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.
...kground color of #333 and foreground of white. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors four in this task try the following: make any paragraph that directly follows an h2 element red. remove the bullets and add a 1
px grey bottom border only to list items that are a direct child of the ul with a class of list. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors five in this final task add css using attribute selectors to do the following: t...
Test your skills: backgrounds and borders - Learn web development
rs below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. backgrounds and borders 1 in this task we want you to add a background, border, and some simple styling to a page header: give the box a 5
px black solid border, with rounded corners of 10
px. add a background image (use the url balloons.jpg) and size it so that it covers the box. give the <h2> a semi-transparent black background color, and make the text white. the finished example should look like the image below. try updating the live code below to recreate the finished example: download the starting point for this task to ...
...d make the text white. the finished example should look like the image below. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. backgrounds and borders 2 in this task we want you to add background images, a border, and some other styling to a decorative box: give the box a 5
px lightblue border, and round the top left corner 20
px and the bottom right corner 40
px the heading uses the star.png image as a background image, with a single centered star on the left and a repeating pattern of stars on the right. make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this. ...
Test your skills: Multicol - Learn web development
just covered. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
...at the bottom of this page. multicol one in this task you need to create three columns, with a 50
px gap between each column. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. multicol two create columns which have a minimum width of 200
px. then, add a 5
px, grey rule between each column, ensuring there is 10
px of space between the edge of the rule and the column content. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. multicol three cause the element containing the headi...
How CSS works - Learn web development
ets the previous html snippet —it renders the above dom tree and then outputs it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it. again, the html is as follows: <p> let's use: <span>cascading</span> <span>style</span> <span>sheets</span> </p> let's suppose we apply the following css to it: span { border: 1
px solid black; background-color: lime; } the browser will parse the html and create a dom from it, then parse the css. since the only rule available in the css has a span selector, the browser will be able to sort the css very quickly! it will apply that rule to each one of the three <span>s, then paint the final visual representation to the screen. the updated output is as follows: in our d...
...u have two rules with the same specificity you can also offer alternatives for browsers that don't support new css. this works particularly well when you want to use a value that is quite new and not supported everywhere. for example, some older browsers do not support calc() as a value. i might give a fallback width for a box in pixels, then go on to give a width with a calc() value of 100% - 50
px. old browsers will use the pixel version, ignoring the line about calc() as they don't understand it. new browsers will interpret the line using pixels, but then override it with the line using calc() as that line appears later in the cascade. .box { width: 500
px; width: calc(100% - 50
px); } we will look at many more ways to support varying browsers in later lessons. and finally you've ne...
Typesetting a community school homepage - Learn web development
fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a suitable service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10
px. give your headings and other element types appropriate font-sizes defined using a suitable relative unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. ...
...e unit. give your body text a suitable line-height. center your top level heading on the page. give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit. give your body text some letter-spacing and word-spacing, as appropriate. give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20
px. links: give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page. make it so that links are underlined by default, but when you hover or focus them, the underline disappears. remove the default focus outline from all the links on the page. give the active state a noticeably different styling so it stands ou...
How can we design for all types of users? - Learn web development
text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page. font size you can specify font size on a website either through relative units or absolute units. absolute units absolute units are not proportionally calculated but refer to a size set in stone, so to speak, and are expressed most of the time in pixels (
px). for instance, if in your css you declare this: body { font-size:16
px; } … you are telling the browser that whatever happens, the font size must be 16 pixels. modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%". yet, for many years internet explorer adamantly displayed 16 pixels as 16 pixels. in this case, zooming di...
...unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. it is said that "em" is the width of a capital “m” in the alphabet (roughly speaking, an “m” fits into a square). rem-based sizes: rem this unit is proportional to the root element's font size and is expressed as portions of 1, like em. suppose we wanted a base font size of 16
px and an h1 (main heading) at the equivalent of 32
px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16
px). here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <h1>this is our main heading <span class="subheading...
Example - Learn web development
equired">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <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: 400
px; padding: 1em; border: 1
px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120
px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250
px; box-sizing: border-box; border: 1
px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:...
...idth: 120
px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250
px; box-sizing: border-box; border: 1
px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250
px; box-sizing: border-box; margin-left: 136
px; border: 1
px solid #999; } button { margin: 20
px 0 0 124
px; } label { position: relative; } label em { position: absolute; right: 5
px; top: 20
px; } result ...
Build your own function - Learn web development
e them in a new folder called icons in the same location as your html file. note: the warning and chat icons were originally found on iconfinder.com, and designed by nazarrudin ansyari — thanks! (the actual icon pages were since moved or removed.) next, find the css inside your html file. we'll make a few changes to make way for the icons. first, update the .msgbox width from: width: 200
px; to width: 242
px; next, add the following lines inside the .msgbox p { ... } rule: padding-left: 82
px; background-position: 25
px center; background-repeat: no-repeat; now we need to add code to our displaymessage() function to handle displaying the icons. add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backg...
...handle displaying the icons. add the following block just above the closing curly brace (}) of your function: if (msgtype === 'warning') { msg.style.backgroundimage = 'url(icons/warning.png)'; panel.style.backgroundcolor = 'red'; } else if (msgtype === 'chat') { msg.style.backgroundimage = 'url(icons/chat.png)'; panel.style.backgroundcolor = 'aqua'; } else { msg.style.paddingleft = '20
px'; } here, if the msgtype parameter is set as 'warning', the warning icon is displayed and the panel's background color is set to red. if it is set to 'chat', the chat icon is displayed and the panel's background color is set to aqua blue. if the msgtype parameter is not set at all (or to something different), then the else { ... } part of the code comes into play, and the paragraph is simply gi...
Introduction to events - Learn web development
the apis built into the browser. a simple example let's look at a simple example of what we mean here. you've already seen events and event handlers used in many of the examples, but let's recap just to cement our knowledge. ...
... at a simple example. 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: 10
px; } now some javascript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. if they are, we call the preventdefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user...
A first splash into JavaScript - Learn web development
it into tangible tasks. example — guess the number game in this article we'll show you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800
px; min-width: 480
px; margin: 0 auto; } .lastresult { color: white; padding: 3
px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100. see if you can guess it in 10 turns or fewer. we'll tell you if your guess was too high or too low.</p> <div class="for...
... the browser returns undefined, because paragraphs don't have the value property. to change the text inside a paragraph, you need the textcontent property instead. try this: guesses.textcontent = 'where is my paragraph?'; now for some fun stuff. try entering the below lines, one by one: guesses.style.backgroundcolor = 'yellow'; guesses.style.fontsize = '200%'; guesses.style.padding = '10
px'; guesses.style.boxshadow = '3
px 3
px 6
px black'; every element on a page has a style property, which itself contains an object whose properties contain all the inline css styles applied to that element. this allows us to dynamically set new css styles on elements using javascript. finished for now... so that's it for building the example. you got to the end — well done! try your final code...
Componentizing our Svelte app - Learn web development
objective: to learn how to break our app into components and share information among them. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components. a component is a reusable, ...
...r dispatching lots of events. stores allows you to share reactive data among components that are not hierarchically related. we will look at stores later on in the series. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place. we can display, add, edit and delete todos, mark them ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
field and add button for adding a new todo. todosstatus: displays the "x out of y items completed" status heading. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons. let's create a component that will...
...ight have multiple todosstatus instances active, so you need a way to reference each particular instance. that's why you have to specify a variable to bind each specific instance to. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/06-stores or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessi...
Dynamic behavior in Svelte: working with variables and props - Learn web development
ps, render javascript expressions into our markup, modify the components state and iterating over lists. code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode. repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dyn...
... about it and not rely on the visibility of top-level variables. besides, it's a good practice to make our code clear and explicit about what information it is using. the code so far git to see the state of the code as it should be at the end of this article, access your copy of our repo like this: cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: n
px degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode. repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 summary that will do for now! in this article we already implemented most of our desired functionality. our app can dis...
Introducing a complete toolchain - Learn web development
tools — for tidying javascript, css, and html. code linting tools — for linting our code. library installation tools we'll use npm to install our tools, which you first met in chapter 2. you should have node.js and npm installed already, but if not, refer back to that section. note: though it's not clear from the install process, installing npm also installs a complimentary tool called n
px. we will use n
px later on this chapter to help run tools that are installed as local dependencies to the project. npm will be used to install subsequent parts of our toolchain. first of all, however, we'll install git to help with revision control. code revision control it's possible you've heard of "git" before. git is currently the most popular source code revision control tool available to...
...nsformation to start working with our project, we’ll run the parcel server on the command line. in its default mode it will watch for changes in your code and automatically install your dependencies. this is nice because we don't have to flit back and forth between the code and the command line. to start parcel off in the background, go to your terminal and run the following command: n
px parcel src/index.html you should see an output like this (once the dependencies have been installed): server running at http://localhost:1234 ✨ built in 129ms. parcel also installs the dependencies that we will use in our code, including react, react-dom, react-async-hook, date-fns, and format-number. this first run will therefore be longer than a typical run of parcel. note: if...
Lightweight themes
nd. finished your design? you can submit it right now! creating a theme header image the header image is displayed as the background of the top of the browser window, nestling in behind the toolbars, address bar, search bar and the tab strip. it will be anchored to the top-right corner of the browser window. view a sample theme header here. image requirements dimensions should be 3000
px wide × 200
px high png or jpg file format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have ...
...ill compete with the browser ui. firefox may reveal more of the lower portion of the image if another toolbar or other ui element is added to the top of the window. the upper right-hand side of the image should have the most important information - as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image. ultrawide monitors can run to 3440
px wide, to look good on these monitors, ensure the left of the image fades to a solid color. online image editor resources pixlr — pixlr offers professional and easy-to-use tools for creating and editing images within a browser. photoshop — tweak, rotate and touch up photos with photoshop® express, a free online photo editor. submitting your theme image to get started submitting your ...
Creating MozSearch plugins
h</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelw
pxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7yk...
...h5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mz
pxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're...
Debugging Table Reflow
editor's note: the following examples are not shown correctly due to the wiki's technical constraint. ...
...at this step the final size is 360 twips. min_con des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final 360 540 1230 -1 -1 -1 -1 -1 -1 360 there was no change till the entrance of balancecolumnwidths balancecolumnwidths en count=1 ***start table dump*** mcolwidths=360 360 360 360 col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd78...
Obsolete Build Caveats and Tips
version of it !), or 2005 professional from build_instructions those who need to work with the code for firefox 3/mozilla 1.9 and earlier can check out the latest source using cvs. in reality, you should probably not need to do this, since that code is very obsolete. this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.110%29.as
px note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows. if you're using visual studio, go to project properties > c/c++ > language > treat wchar_t as built-in type and set it to "yes". from source_code/mercurial mozilla-2.0 (firefox 4.0) code for the firefox 4.0 (gecko 2.0) release lives in releases/mozilla-2.0. to get this...
...ve the windows server 2008 sdk installed, uninstall it. the sdk will break builds even if you try to use other sdks. other possible workarounds: use another sdk (the one shipped with visual studio 9). delete the vcvars32.bat file and repair your visual studio installation with the setup program. edit vcvars32.bat to correct the problem (see http://blogs.msdn.com/windowssdk/arc...vironment.as
px "workaround: repair the vs2008 command line build environment by editing c:\program files\microsoft visual studio 9.0\vc\bin\vcvars32.bat manually"). sdks older than the server 2003 r2 platform sdk aren't supported either. from windows build prerequisites [en-us] microsoft visual c++ (msvc) depending on what you're building, you will need to use one of several available versions of micro...
Performance best practices for Firefox front-end engineers
tion of anything. since everything is pending a reflow, the answer isn't available, so everything stalls until the reflow is complete and the script can be given an answer. flushing layout also means that styles must be flushed to calculate the most up-to-date state of things, so it's a double-whammy. ...
... is not dirty, and size, position, and style information is cheap to query for. here's an example: async function matchwidth(elem, otherelem) { let width = await window.promisedocumentflushed(() => { // do _not_ under any circumstances write to the dom in one of these // callbacks! return elem.clientwidth; }); requestanimationframe(() => { otherelem.style.width = `${width}
px`; }); } please see the section on promisedocumentflushed in detecting and avoiding synchronous style flushes for more information on how to use the api. note that queries for size and position information are only expensive if the dom has been written to. otherwise, we're doing a cheap look-up of cached information. if we work hard to move all dom writes into requestanimationframe(), then we ...
overflow-clip-box-block
ding box. content-box this keyword makes the clipping be related to the content box. ...
...keyword makes the clipping be related to the content box. ...
overflow-clip-box-inline
ding box. content-box this keyword makes the clipping be related to the content box. ...
...keyword makes the clipping be related to the content box. ...
overflow-clip-box
ng box. content-box this keyword makes the clipping be related to the content box. ...
...yword makes the clipping be related to the content box. ...
Basics
<mrow> <mn>5</mn> <mo>&invisibletimes;</mo> <mi>x</mi> <mo>&invisibletimes;</mo> <msup> <mi>y</mi> <mn>4</mn> </msup> </mrow> <mo>+</mo> <msup> <mi>y</mi> <mn>5</mn> </msup> </mrow> </maction> </mtd> </mtr> </mtable> </mtd> </mtr> </mtable> </math> </div> css content .control { text-decoration: none; font-weight: bold; font-size: 200%; } input { color: red; } [class="inputmath"] { border: 1
px dotted; } javascript content function setselection(id,value) { document.getelementbyid(id).setattribute("selection",value); } function expand() { setselection("a11","2"); setselection("a12","2"); setselection("a13","2"); setselection("a21","2"); setselection("a22","2"); setselection("a23","2"); setselection("a31","2"); setselection("a32","2"); setselection("a33","2"); setselect...
...</mrow> <mi>α</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>π</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58
px; } ...
Using the viewport meta tag to control layout on mobile browsers
the browser provides scrollbars for the user to scroll around and access all the content. narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. users can then pan and zoom to see different areas of the page. for example, if a mobile screen has a width of 640
px, pages might be rendered with a virtual viewport of 980
px, and then it will be shrunk down to fit into the 640
px space. this is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. this virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices. enter viewport meta tag howev...
...ecause many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. this virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices. enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980
px for example, media queries that kick in at 640
px or 480
px or less will never be used, limiting the effectiveness of such responsive design techniques. to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let web developers control the viewport's size and scale. many other mobile browsers now support this tag, although it is not part of any web standard. apple's doc...
Mozilla Quirks Mode Behavior
rather than using the foreground color. collapse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts like an inline, not a block. give floated img a 3
px margin (bug 58899). residual style tags' size info does not take precedence over heading tags' size (bug 77352). use box-sizing:border-box for most input types and textarea. give form a margin-bottom:1em (bug 41806). in quirks mode css class and id names are case insensitive. in standards mode they are case sensitive. (this also applies to getelementsbyclassname.) stylesheets li...
...e insensitive. in standards mode they are case sensitive. (this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other than text/css. the css parser accepts colors not beginning with #, except in shorthands. the css parser interprets unitless numbers as
px (except for line-height and any other properties where they have distinct meaning, and except in shorthands). in quirks mode, the css parser allows {} around the contents of style attributes (bug 99554). this behavior is being removed in firefox 27, for interoperability. (bug 915053) an empty string for the background attribute sets the background url to empty only in quirks mode. the topmargi...
nsIContentViewManager
u can queryinterface() the nsiframeloader object to nsicontentviewmanager. see getting access to content views for details. once you have the view manager, you can call getcontentviewsin() to get a list of the content views for a given portion of the browser display, then use those nsicontentview objects to manipulate the content views. method overview void getcontentviewsin(in float ax
px, in float ay
px, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, [optional] out unsigned long alength, [retval, array, size_is(alength)] out nsicontentview aresult); attributes attribute type description rootcontentview nsicontentview the root content view. read only. methods getcontentviewsin() returns an array of ns...
...ctangle is specified using an anchor point, then four distances to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are relative to the browser element. void getcontentviewsin( in float ax
px, in float ay
px, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long alength, optional [retval, array, size_is(alength)] out nsicontentview aresult ); parameters ax
px the x coordinate of the anchor point of the rectangle, in css pixels. ay
px the y coordinate of the anchor point of the rectangle, in css pixels. atopsize the dis...
Using COM from js-ctypes
ptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms695279%28v=vs.85%29.as
px let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms688715%28v=vs.85%29.as
px let couninitialize = lib.declare('couninitialize', winabi, void // return ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms686615%28v=vs.85%29.
...et coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms688715%28v=vs.85%29.as
px let couninitialize = lib.declare('couninitialize', winabi, void // return ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms686615%28v=vs.85%29.as
px let cocreateinstance = lib.declare('cocreateinstance', winabi, hresult, // return refclsid, // rclsid lpunknown, // punkouter dword, // dwclscontext refiid, // riid lpvoid // *ppv ); // helper functions function checkhresult(hr /*primative hresult*/, funcname /*jsstr*/) { // primative because thats what is returned by declar...
Paint Flashing Tool - Firefox Developer Tools
n. the first way applies the transition to the element's margin-left, while the second way moves the element using the transform property. ...
...you should see that the margin-left version...
AbstractRange - Web APIs
a collapsed range is one whose start position and ...
...a collapsed range is one whose start position and end position are the same, resulting in ...
AudioListener - Web APIs
he forward and up values are linearly independent of each other. the default is 0. audiolistener.forwardz represents the longitudinal (back and forth) position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up values are linearly independent of each other. the default is -1. audiolistener.u
px represents the horizontal position of the top of the listener's head in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up values are linearly independent of each other. the default is 0. audiolistener.upy represents the vertical position of the top of the listener's head in the same cartesian coordinate sytem as the position (p...
...valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
BaseAudioContext - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" w...
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="231" y="30" font-size="12
px" 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 m...
BeforeUnloadEvent - Web APIs
ram" 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="17...
...las,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="201" y="30" font-size="12
px" 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 wind...
CSSPositionValue.CSSPositionValue() - Web APIs
n. syntax cvar csspositionvalue = new csspositionvalue(x, y) parameters x a position along the web page's horizontal axis. ...
... cvar csspositionvalue = new csspositionvalue(x, y) parameters x a position along the web page's horizontal axis. ...
CSSPositionValue.x - Web APIs
x property of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis. ...
...of the csspositionvalue interface returns returns the item's position along the web page's horizontal axis. ...
CSSPositionValue.y - Web APIs
the y property of the csspositionvalue interface returns the item's position along the vertical axis. ...
... the y property of the csspositionvalue interface returns the item's position along the vertical axis. ...
CSSUnitValue - Web APIs
the cssunitvalue interface of the css typed object model api represents values that contain a single unit type. for example, "42
px" would be represented by a cssnumericvalue. constructor cssstylevalue.cssunitvalue() creates a new cssunitvalue object. properties cssunitvalue.value returns a double indicating the number of units. cssunitvalue.unit returns a usvstring indicating the type of unit. event handlers none. methods none. examples the following shows a method of creating a csspositionvalue from individual cssunitvalue constructors. ...
...reates a new cssunitvalue object. properties cssunitvalue.value returns a double indicating the number of units. cssunitvalue.unit returns a usvstring indicating the type of unit. event handlers none. methods none. examples the following shows a method of creating a csspositionvalue from individual cssunitvalue constructors. let pos = new csspositionvalue( new cssunitvalue(5, "
px"), new cssunitvalue(10, "
px")); specifications specification status comment css typed om level 1the definition of 'cssunitvalue' in that specification. working draft initial definition. ...
Using dynamic styling information - Web APIs
e, you can adapt the following example for the element(s) you want to style. <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2
px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" onclick="alterstyle(this);"> click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button onclick="resetstyle('p1');">reset background color</button> </body> </html> the getcomputedstyle() method on the document.defaultvie...
...ttribute method to specify the css property and its value. var el = document.getelementbyid('some-element'); el.setattribute('style', 'background-color:darkblue;'); be aware, however, that setattribute removes all other style properties that may already have been defined in the element's style object. if the some-element element above had an in–line style attribute of say style="font-size: 18
px", that value would be removed by the use of setattribute. ...
CanvasRenderingContext2D.fillText() - Web APIs
example writes the words "hello world" using the filltext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels across. <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this example follows. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50
px serif'; ctx.filltext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context. with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call filltext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text size this example writes the words "h...
...rif font), then call filltext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text size this example writes the words "hello world," restricting its width to 140 pixels. html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50
px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification. living standard ...
CanvasRenderingContext2D.strokeText() - Web APIs
example writes the words "hello world" using the stroketext() method. html first, we need a canvas to draw into. this code creates a context 400 pixels wide and 150 pixels high. <canvas id="canvas" width="400" height="150"></canvas> javascript the javascript code for this example follows. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50
px serif'; ctx.stroketext('hello world', 50, 90); this code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context. with that in hand, we set the font to 50-pixel-tall "serif" (the user's default serif font), then call stroketext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text size this example writes the word...
...f font), then call stroketext() to draw the text "hello world," starting at the coordinates (50, 90). result restricting the text size this example writes the words "hello world," restricting its width to 140 pixels. html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50
px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification. living standard ...
CanvasRenderingContext2D.textAlign - Web APIs
nment this example demonstrates the three "physical" values of the textalign property: "left", "center", and "right". html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30
px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manuall...
...xt alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", although this is also the default for english-language text. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30
px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification. living standard ...
Optimizing canvas - Web APIs
ers. the ui would change only upon user input, the gameplay layer would change with every new frame, and the background would remain generally unchanged. ...
...hange only upon user input, the gameplay layer would change with every new frame, and the background would remain generally unchanged. <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: 480
px; height: 320
px; position: relative; border: 2
px 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. this will...
Pixel manipulation with canvas - Web APIs
ouse cursor. for this, we need the current position of the mouse with layerx and layery, then we look up the pixel data on that position in the pixel array that getimagedata() provides us. finally, we use the array data to set a background color and a text in the <div> to display the color. ...
... for this, we need the current position of the mouse with layerx and layery, then we look up the pixel data on that position in the pixel array that getimagedata() provides us. finally, we use the array data to set a background color and a text in the <div> to display the color. ...
CustomElementRegistry.define() - Web APIs
; img.src = imgurl; icon.appendchild(img); // create some css to apply to the shadow dom var style = document.createelement('style'); style.textcontent = '.wrapper {' + 'position: relative;' + '}' + '.info {' + 'font-size: 0.8rem;' + 'width: 200
px;' + 'display: inline-block;' + 'border: 1
px solid black;' + 'padding: 10
px;' + 'background: white;' + 'border-radius: 10
px;' + 'opacity: 0;' + 'transition: 0.6s all;' + 'posit...
... + 'border: 1
px solid black;' + 'padding: 10
px;' + 'background: white;' + 'border-radius: 10
px;' + 'opacity: 0;' + 'transition: 0.6s all;' + 'position: absolute;' + 'bottom: 20
px;' + 'left: 10
px;' + 'z-index: 3;' + '}' + 'img {' + 'width: 1.2rem' + '}' + '.icon:hover + .info, .icon:focus + .info {' + 'opacity: 1;' + '}'; // att...
DataTransfer.dropEffect - Web APIs
l 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. ...
...start="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...
DataTransfer.effectAllowed - Web APIs
value to be lowercased; thus, linkmove will become linkmove, and so on. example this example shows the use of the effectallowed and dropeffect properties. ...
...ecome linkmove, and so on. example this example shows the use of the effectallowed and dropeffect properties. ...
DataTransferItemList.length - Web APIs
living standard html 5.1the definition of 'length' in that specification. recommendation not included in w3c html5 recommendation ...
... living standard html 5.1the definition of 'length' in that specification. recommendation not included in w3c html5 recommendation ...
DataTransferItemList.remove() - Web APIs
living standard html 5.1the definition of 'remove()' in that specification. recommendation not included in w3c html5 recommendation ...
... living standard html 5.1the definition of 'remove()' in that specification. recommendation not included in w3c html5 recommendation ...
Element.animate() - Web APIs
posite operation or iteration composite operation in your options list: composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200
px) would not override an earlier rotate(20deg) value but result in translatex(-200
px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or r...
... animation. examples in the demo down the rabbit hole (with the web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely. notice the array of objects passed as keyframes and also the timing options block. document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0
px)' }, { transform: 'translatey(-300
px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e. a single keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyfram...
Element.localName - Web APIs
qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for ex...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for example, in the q...
HTMLMarqueeElement - Web APIs
htmlmarqueeelement.behavior sets how the text is scrolled within the mar...
... htmlmarqueeelement.behavior sets how the text is scrolled within the marquee. possible values are scroll, slide ...
HTMLOptionsCollection - Web APIs
ne-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="2
px" /><text x="71" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181"...
...mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="286" y="30" font-size="12
px" 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 prope...
IDBTransaction - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" wid...
...co,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="221" y="30" font-size="12
px" 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.t...
KeyboardEvent.code - Web APIs
se the keyboardevent.key property instead. code values the code values for windows, linux, and macos are list on the keyboardevent: code values page. ...
...will use the same four keys physically regardless of what the actual corresponding characters are, such as if the user is using an azerty keyboard. html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0
px; padding: 0
px; background-color: black; width: 400
px; height: 400
px; } #spaceship { fill: orange; stroke: red; stroke-width: 2
px; } javascript the first section of the javascript code establishes some variables we'll be using. shipsize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play fie...
KeyframeEffect.setKeyframes() - Web APIs
rrect type of object, the keyframes were not loosely sorted by offset, or a keyframe existed with an offset of less than 0 or more than 1. note: if the keyframes cannot be processed or are malformed, the keyframeeffect's keyframes are not modified. ...
...te: if the keyframes cannot be processed or are malformed, the keyframeeffect's keyframes are not modified. examples // passing an array of keyframe objects existingkeyframeeffect.setkeyframes( [ { color: 'blue' }, { color: 'green', left: '10
px' } ] ); // passing an object with arrays for values existingkeyframeeffect.setkeyframes( { color: ['blue', 'green'], left: [ '0', '10
px'] } ); // passing a single-member object existingkeyframeeffect.setkeyframes( { color: 'blue' } ); specifications specification status comment web animationsthe definition of 'keyframeeffect.setkeyframes()' in that specification. working draft editor's draft. ...
MediaDevices.ondevicechange - Web APIs
o 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: 14
px "open sans", "arial", sans-serif; } video { margin-top: 20
px; border: 1
px solid black; } .button { cursor: pointer; width: 160
px; border: 1
px solid black; font-size: 16
px; text-align: center; padding-top: 2
px; padding-bottom: 4
px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4
px; } .left { float:left; width: 48%; margin-right: 2% } .right { ...
...: 1
px solid black; } .button { cursor: pointer; width: 160
px; border: 1
px solid black; font-size: 16
px; text-align: center; padding-top: 2
px; padding-bottom: 4
px; color: white; background-color: darkgreen; } h2 { margin-bottom: 4
px; } .left { float:left; width: 48%; margin-right: 2% } .right { float:right; width: 48%; margin-left: 2% } .devicelist { border: 1
px solid black; list-style-type: none; margin-top: 2
px; padding: 6
px; } javascript content other code below is other code which, while needed to make this example work, isn'tt related directly to ondevicechange, so we won't go into any detail. let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.innerhtml +=...
MediaQueryList.onchange - Web APIs
er property representing a function that is invoked when the change event fires, i.e when the status of media query support changes. the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes. syntax mediaquerylist.onchange = function() { ... ...
...tance, which is recognised as a medialistquery instance in older browsers, for backwards compatibility purposes. syntax mediaquerylist.onchange = function() { ... }; example var mql = window.matchmedia('(max-width: 600
px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600
px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600
px wide.') } }) specifications specification status comment css object model (cssom) view modulethe definition of 'onchange' in that specification. working draft initial definition ...
MediaStreamTrackEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width...
...monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="221" y="30" font-size="12
px" 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...
Capabilities, constraints, and settings - Web APIs
</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: 14
px "open sans", "arial", sans-serif; } video { margin-top: 20
px; border: 1
px solid black; } .button { cursor: pointer; width: 150
px; border: 1
px solid black; font-size: 16
px; text-align: center; padding-top: 2
px; padding-bottom: 4
px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10
px; width: 600
px; } .trackrow { height: 200
px; } .leftside { ...
... margin-top: 20
px; border: 1
px solid black; } .button { cursor: pointer; width: 150
px; border: 1
px solid black; font-size: 16
px; text-align: center; padding-top: 2
px; padding-bottom: 4
px; color: white; background-color: darkgreen; } .wrapper { margin-bottom: 10
px; width: 600
px; } .trackrow { height: 200
px; } .leftside { float: left; width: calc(calc(100%/2) - 10
px); } .rightside { float: right; width: calc(calc(100%/2) - 10
px); } textarea { padding: 8
px; } h3 { margin-bottom: 3
px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10
px; } javascript content now let's take a look at the javascript code that makes everything work. defaults and variables first we have the default constraint sets, as ...
MouseEvent.initMouseEvent() - Web APIs
depressed during the event. sets the value of mouseevent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button. relatedtarget the event's related eventtarget. only used with some event types (e.g., mouseover and mouseout). in other cases, pass null. ...
...ng the event. sets the value of mouseevent.shiftkey. metakey whether or not meta key was depressed during the event. sets the value of mouseevent.metakey. button the event's mouse button. relatedtarget the event's related eventtarget. only used with some event types (e.g., mouseover and mouseout). in other cases, pass null. ...
Using Navigation Timing - Web APIs
queryselector(".output").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element. html <div class="output"> </div> css .output { border: 1
px solid #bbb; font: 16
px "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. for a list of the available timing values you can look for in performancetiming, see the performancetiming interface's properties section. determining navigation type to put the timi...
... place: a navigation, a reload, or a shift through the browser's history. we also obtain the number of redirects that were incurred during the navigation from performance.navigation.redirectcount. this information is output to the screen just like the page load time was previously: by inserting it into the element with class "output". html <div class="output"> </div> css .output { border: 1
px solid #bbb; font: 16
px "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.localName - Web APIs
qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for ex...
...qualified names are typically used in xml as part of the namespace(s) of the particular xml documents. for example, in the q...
ParentNode.replaceChildren() - Web APIs
to do this, we gi...
... to do this, we give each of the buttons a click event handler, which collects together the selected options you want to transfer in one constant, and the existin...
PerformanceMark - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="...
...ale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="276" y="30" font-size="12
px" 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 propert...
PerformanceMeasure - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" ...
... mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="291" y="30" font-size="12
px" 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 pro...
PerformanceNavigationTiming - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect...
...ospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="336" y="30" font-size="12
px" 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 qualifyin...
PerformancePaintTiming - Web APIs
-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="2
px" /><text x="81" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="2...
...o,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="311" y="30" font-size="12
px" 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 ...
Multi-touch interaction - Web APIs
g reports are welcome. example this example demonstrates using pointer events' various event types (pointerdown, pointermove, pointerup pointercancel, etc.) for different multi-touch interactions. define touch targets the application uses <div> to define three different touch target areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1
px solid black; } #target2 { background: white; border: 1
px solid black; } #target3 { background: white; border: 1
px solid black; } </style> global state to support multi-touch interaction, preserving a pointer's event state during various event phases is required. this application uses three arrays to cache event state, one cache per target element. // log events flag ...
...curs, the event is removed from the associated event cache. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. 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 = "1
px solid black"; } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and to clear the log. to prevent the browser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element. <body onload="init();" style="touch-action:none"> <div id="target1"> tap, hold or sw...
Pinch zoom gestures - Web APIs
ch other, changes the target element's background color to lightblue. the pinch out (zoom in) gesture, which moves the two pointers away from each other, changes the target element's background color to pink. define touch target the application uses <div> to define the pointers' target areas. <style> div { margin: 0em; padding: 2em; } #target { background: white; border: 1
px solid black; } </style> global state supporting a two-pointer gesture requires preserving a pointer's event state during various event phases. this application uses two global variables to cache the event state. // global vars to cache event state var evcache = new array(); var prevdiff = -1; register event handlers event handlers are registered for the following pointer events: pointerd...
...kground color and border are restored to their original values. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. function pointerup_handler(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 = "1
px 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. to prevent the browser's default touch behavior from overriding this application's pointer handling, the touch-action p...
Using Pointer Events - Web APIs
ample the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus, mouse, or other method of pointing at a location. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. ...
...ocation. create a canvas the touch-action property is set to none to prevent the browser from applying its default touch behavior to the application. <canvas id="canvas" width="600" height="600" style="border:solid black 1
px; touch-action:none"> your browser does not support canvas element. </canvas> <br> <button onclick="startup()">initialize</button> <br> log: <pre id="log" style="border: 1
px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below should be called by our <body> element's onload attribute (but in the example we use a button to trigger it, due to limitations of the mdn live example system). function startup() { var el = document.getelementsbytagname("canvas")[0]; el.addeventlistener("pointerdown", handlestart, fa...
PromiseRejectionEvent - Web APIs
ram" 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width...
...monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="221" y="30" font-size="12
px" 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 rejectio...
RTCDTMFSender - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" widt...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="216" y="30" font-size="12
px" 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...
RTCPeerConnection - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" ...
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="236" y="30" font-size="12
px" 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 connecti...
ResizeObserver - Web APIs
, the text will not change in response to the <div>'s width changing. ...
...ooks 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 = '600
px'; 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) + 'r...
SVGAltGlyphDefElement - Web APIs
properties this interface doesn't implement any specific propertie...
... properties this interface doesn't implement any specific properties, but inherits properties from its paren...
SVGAltGlyphItemElement - Web APIs
properties this interface doesn't implement any specific properti...
... properties this interface doesn't implement any specific properties, but inherits properties from its pare...
SVGExternalResourcesRequired - Web APIs
properties svgexternalresourcesrequired.externalresources...
... properties svgexternalresourcesrequired.externalresourcesrequired corresponds to the externalre...
SVGFontFaceElement - Web APIs
methods this interface has no methods ...
... methods this interface has no methods but inherits methods from its parent, sv...
StorageEvent - Web APIs
play: 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="2
px" /><text x="38.5" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" he...
...consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="176" y="30" font-size="12
px" 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 domstrin...
StylePropertyMap - Web APIs
methods inherits methods from its parent, stylepropertymapreado...
... methods inherits methods from its parent, stylepropertymapreadonly. stylepropertymap.append() adds ...
SubtleCrypto.importKey() - Web APIs
escribes a way to represent public, private, and secret keys as json objects. a json web key looks something like this (this is an ec private key): { "crv": "p-384", "d": "wouctu7nw4e8_7n5c1-xbjb4xqsb_lizhymsy8mggxuny6q8ncoh9xsiviwlffk_", "ext": true, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4
pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; examples note: you can try the working examples on github. raw import this example imports an aes key from an arraybuffer containing the bytes to use. see the complete code on github. const rawkey = window.crypto.getrandomvalues(new uint8array(16)); /* import an aes secret key from an arraybuffer containing the raw bytes. takes an arraybuffer...
...t this code imports an ecdsa private signing key, given a json web key object that represents it. see the complete code on github. const jwkeckey = { "crv": "p-384", "d": "wouctu7nw4e8_7n5c1-xbjb4xqsb_lizhymsy8mggxuny6q8ncoh9xsiviwlffk_", "ext": true, "key_ops": ["sign"], "kty": "ec", "x": "szrrxmyi8vwfjg1dpunbfcc9jzvjzefh7ulki1ukxaltd7rgwrcffxqygpcwu6aq", "y": "hhuag3ovdzer0uuqnd4
pxhqtxp5idgdyhjhl-wlkjngjqaw0rngy5v29-av-ysew" }; /* import a pem encoded rsa private key, to use for rsa-pss signing. takes a string containing the pem encoded key, and returns a promise that will resolve to a cryptokey representing the private key. */ function importprivatekey(jwk) { return window.crypto.subtle.importkey( "jwk", jwk, { name: "ecdsa", namedcurve: "p-384" ...
TextMetrics - Web APIs
ontext('2d'); const baselinesabovealphabetic = ['fontboundingboxascent', 'actualboundingboxascent', 'emheightascent', 'hangingbaseline']; const baselinesbelowalphabetic = ['ideographicbaseline', 'emheightdescent', 'actualboundingboxdescent', 'fontboundingboxdescent']; const baselines = [...baselinesabovealphabetic, ...baselinesbelowalphabetic]; ctx.font = '25
px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { let text = 'abcdefghijklmnop (' + baseline + ')'; let textmetrics = ctx.measuretext(text); let y = 50 + index * 50; ctx.beginpath(); ctx.filltext(text, 0, y); let liney = y - math.abs(textmetrics[baseline]); if (baselinesbelowalphabetic.includes(baseline)) { liney = y + math.abs(textmetrics[baseline...
...width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width. it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to get the absolute text width: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50
px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 459.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462.8833333333333 specifications specification html living standardthe definition of 'textmetrics' in that specification. ...
Multi-touch interaction - Web APIs
touchmove, touchcancel, and touchend) touch events for the following gestures: single touch, two (simultaneous) touches, more than two simultaneous touches, 1-finger swipe, and 2-finger move/pinch/swipe. define touch targets the application uses <div> elements to represent four touch areas. <style> div { margin: 0em; padding: 2em; } #target1 { background: white; border: 1
px solid black; } #target2 { background: white; border: 1
px solid black; } #target3 { background: white; border: 1
px solid black; } #target4 { background: white; border: 1
px solid black; } </style> global state tpcache is used to cache touch points for processing outside of the event where they were fired. // log events flag var logevents = false; // touch ...
...handle_pinch_zoom(ev); } touch end handler the touchend handler restores the event target's background color back to its original color. 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 = "1
px 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...
VTTCue - Web APIs
ntage of the video size. vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box. vttcue.text returns a domstring with the contents of the cue. methods getcueashtml() returns the cue text as a documentfragment. ...
...o size. vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box. vttcue.text returns a domstring with the contents of the cue. methods getcueashtml() returns the cue text as a documentfragment. ...
VisualViewport - Web APIs
set from the layout viewport origin. var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...
...eft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + '
px,' + offsettop + '
px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling. specifications specificatio...
Visual Viewport API - Web APIs
port = event.target; var offsetleft = viewport.offsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. ...
...ffsetleft; var offsettop = viewport.height - layoutviewport.getboundingclientrect().height + viewport.offsettop; // you could also do this by setting style.left and style.top if you // use width: 100% instead. bottombar.style.transform = 'translate(' + offsetleft + '
px,' + offsettop + '
px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment visual viewport apithe definition of 'visualviewport' in that specification. draft initial definition. ...
WebGLRenderingContext - Web APIs
on and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. ...
...xels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. ...
Basic scissoring - Web APIs
d establishing a rectangular mask. only when the webgl state has been satisfactorily tweaked, we execute the drawing command (in this case, clear()) that starts the processing of fragments down the graphics pipeline. ...
...ectangular mask. only when the webgl state has been satisfactorily tweaked, we execute the drawing command (in this case, clear()) that starts the processing of fragments down the graphics pipeline. ...
Boilerplate 1 - Web APIs
an immediate function, which is a common javascript technique (see function). the function declaration and invocation will also be hidden. html <p>[ some descriptive text about the example. ]</p> <button>[ optional button element. ...
...tion, which is a common javascript technique (see function). the function declaration and invocation will also be hidden. html <p>[ some descriptive text about the example. ]</p> <button>[ optional button element. ...
Canvas size and WebGL - Web APIs
and size in pixels. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. ...
...ls. in the first canvas, we get the desired result. in the second, the square has the wrong shape, size, and position. ...
Clearing by clicking - Web APIs
the event handler removes // itself, because it only needs to run once. window.removeeventli...
...the event handler removes // itself, because it only needs to run once. window.removeeventlistener(evt.type, s...
Color masking - Web APIs
final result on the screen is that of the clear color, tinted by the color mask. ...
...he screen is that of the clear color, tinted by the color mask. ...
Hello GLSL - Web APIs
output of the next example, which draws exactly the same thing. but remember to read through the explanations and code on this page, before moving on to the next. hello world program in glsl a very simple first shader program. ...
... example, which draws exactly the same thing. but remember to read through the explanations and code on this page, before moving on to the next. hello world program in glsl a very simple first shader program. ...
Hello vertex attributes - Web APIs
ader using vertex attributes. hello world program in glsl how to send input to a shader program by saving data in gpu memory. <p>first encounter with attributes and sending data to gpu. ...
...attributes. hello world program in glsl how to send input to a shader program by saving data in gpu memory. <p>first encounter with attributes and sending data to gpu. ...
Raining rectangles - Web APIs
me loop. the game loop is responsible for drawing the animation frames, and keeping the animation responsive to user input. here, the game loop is implemented using timeouts. <p>you caught <strong>0</strong>. ...
...loop is responsible for drawing the animation frames, and keeping the animation responsive to user input. here, the game loop is implemented using timeouts. <p>you caught <strong>0</strong>. ...
Textures from code - Web APIs
that is, using code to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
...e to generate textures for use in shading webgl objects. drawing textures with code texturing a point sprite with calculations done per-pixel in the fragment shader. <p>texture from code. ...
Web audio spatialization basics - Web APIs
eft or right using positionx, up or down using positiony, or in or out of the room using positionz. here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox. we can also set the direction the listener is facing. the default values for these work well: listener.forwardx.value = 0; listener.forwardy.value = 0; listener.forwardz.value = -1; listener.u
px.value = 0; listener.upy.value = 1; listener.upz.value = 0; the forward properties represent the 3d coordinate position of the listener's forward direction (e.g. the direction they are facing in), while the up properties represent the 3d coordinate position of the top of the listener's head. these two together can nicely set the direction. creating a panner node let's create our pannernode. th...
...ath.cos(q) - panner.orientationy.value*math.sin(q); y = panner.orientationz.value*math.sin(q) + panner.orientationy.value*math.cos(q); x = panner.orientationx.value; panner.orientationx.value = x; panner.orientationy.value = y; panner.orientationz.value = z; break; } boombox.style.transform = 'translatex('+transform.xaxis+'
px) translatey('+transform.yaxis+'
px) scale('+transform.zaxis+') rotatey('+transform.rotatey+'deg) rotatex('+transform.rotatex+'deg)'; const move = prevmove || {}; move.frameid = requestanimationframe(() => moveboombox(direction, move)); return move; } wiring up our controls wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and ...
Window.requestAnimationFrame() - Web APIs
a long integer value, the request id, that uniquely identifies the entry in the callback list. this is a non-zero value, but you may not make any other assumptions about its value. you can pass this value to window.cancelanimationframe() to cancel the refresh callback request. example in this example, an element is animated for 2 seconds (2000 milliseconds). the element moves at a speed of 0.1
px/ms to the right, so its relative position (in css pixels) can be calculated in function of the time elapsed since the start of the animation (in milliseconds) with 0.1 * elapsed. the element's final position is 200
px (0.1 * 2000) to the right of its initial position. const element = document.getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start ==...
...nds) with 0.1 * elapsed. the element's final position is 200
px (0.1 * 2000) to the right of its initial position. const element = document.getelementbyid('some-element-you-want-to-animate'); let start; function step(timestamp) { if (start === undefined) start = timestamp; const elapsed = timestamp - start; // `math.min()` is used here to make sure that the element stops at exactly 200
px. element.style.transform = 'translatex(' + math.min(0.1 * elapsed, 200) + '
px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle. specification specification status ...
Window - Web APIs
domparser domparser can parse xml or html source stored in a string into a dom document. domparser is...
... domparser domparser can parse xml or html source stored in a string into a dom document. domparser is specified in dom parsing and serializatio...
WindowOrWorkerGlobalScope.setInterval() - Web APIs
s 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180
px; height: 150
px; float: right; background-color: #eeeeff; padding: 4
px; overflow: auto; font-size: 12
px; margin: 4
px; border-radius: 5
px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12
px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> ...
...tur dolor. nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. phasellus adipiscing fermentum nibh ac commodo. nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <form> <p>phasellus ac nisl lorem: <input type="text" /><br /> <textarea style="width: 400
px; height: 200
px;">nullam commodo suscipit lacus non aliquet. phasellus ac nisl lorem, sed facilisis ligula. nam cursus lobortis placerat. sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. quisque ultrices laoreet erat, at ultrices tortor sodales non. sed venenatis luctus magna, ultricies ultricies nunc fringilla eg...
XMLHttpRequestEventTarget - Web APIs
nline-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="2
px" /><text x="56" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151...
...ono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="276" y="30" font-size="12
px" 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 re...
ARIA: grid role - Accessibility
h> <td role="gridcell" tabindex="-1"> 30 </td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> css body { margin: 2rem; font-family: "helvetica neue", sans-serif; } table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5
px; } tbody td { border: 1
px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3
px solid blue; } } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var ...
...5 </td> <td role="gridcell" tabindex="-1"> 6 </td> <td role="gridcell" tabindex="-1"> 7 </td> <td role="gridcell" tabindex="-1"> 8 </td> </tr> <!-- … additional rows … --> </tbody> </table> css table { margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; } tbody th, tbody td { padding: 5
px; } tbody td { border: 1
px solid #000; text-align: right; color: #767676; } tbody td[role="gridcell"] { color: #000; } tbody td[role="gridcell"]:hover, tbody td[role="gridcell"]:focus { background-color: #f6f6f6; outline: 3
px solid blue; } javascript var selectables = document.queryselectorall('table td[role="gridcell"]'); selectables[0].setattribute('tabindex', 0); var trs = doc...
ARIA: tab role - Accessibility
abelledby="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: -1
px; } [role="tab"] { position: relative; z-index: 1; background: white; border-radius: 5
px 5
px 0 0; border: 1
px solid grey; border-bottom: 0; padding: 0.2em; } [role="tab"][aria-selected="true"] { z-index: 3; } [role="tabpanel"] { position: relative; padding: 0 0.5em 0.5em 0.7em; border: 1
px solid grey; border-radius: 0 0 5
px 5
px; background: white; z-index: 2; } [rol...
... to accomplish the first, we listen for the keydown event on the tablist. ...
-moz-image-region - CSS: Cascading Style Sheets
for certain xul elements and pseudo-elements that use an image from the list-style-image property, this property specifies a region of the image that is used in place of the whole image. this allows elements to use different pieces of the same image to improve performance. /* keyword value */ -moz-image-region: auto; /* <shape> value */ -moz-image-region: rect(0, 8
px, 4
px, 4
px); /* global values */ -moz-image-region: inherit; -moz-image-region: initial; -moz-image-region: unset; the syntax is similar to the clip property. all four values are relative to the upper left corner of the image. note: for a system that works on any background, see -moz-image-rect(). syntax values auto automatically defines the region of the image to use. <shape> a shape defining the part o...
...age. it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0
px, 4
px, 4
px, 0
px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-region: rect(0
px, 8
px, 4
px, 4
px); } specifications not part of any standard. ...
-moz-orient - CSS: Cascading Style Sheets
though submitted to the w3c, with positive initial feedback, this property is not yet part of any specification; currently, this is a mozilla-specific extension (that is, -moz-orient). ...
...though submitted to the w3c, with positive initial feedback, this property is not yet part of any specification; currently, this is a mozilla-specific extension (that is, -moz-orient). ...
-moz-outline-radius - CSS: Cascading Style Sheets
in mozilla applications like firefox, the -moz-outline-radius css shorthand property can be used to give an element's outline rounded corners. /* one value */ -moz-outline-radius: 25
px; /* two values */ -moz-outline-radius: 25
px 1em; /* three values */ -moz-outline-radius: 25
px 1em 12%; /* four values */ -moz-outline-radius: 25
px 1em 12% 4mm; /* global values */ -moz-outline-radius: inherit; -moz-outline-radius: initial; -moz-outline-radius: unset; constituent properties this property is a shorthand for the following css properties: -moz-outline-radius-bottomleft -moz-outline-radius-bottomright -moz-outline-radius-topleft -moz-outline-radius-topright syntax values elliptical outlines and <percentage> values follow the syntax described in border-radius. one, two,...
...alc();-moz-outline-radius-bottomleft: a length, percentage or calc(); formal syntax <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where <outline-radius> = <length> | <percentage> examples rounding an outline note: this example will not display the desired effect if you are viewing this in a browser other than firefox. html <p>this element has a rounded outline!</p> css p { margin: 5
px; border: 1
px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 25
px; } result notes dotted or dashed radiused corners were rendered as solid until firefox 50, bug 382721 future versions of gecko/firefox may drop this property completely. see bug 593717. specifications not part of any standard. ...
-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -webkit-text-stroke-width css property specifies the width of the stroke for text. syntax /* keyword values */ -webkit-text-stroke-width: thin; -webkit-text-stroke-width: medium; -webkit-text-stroke-width: thick; /* <length> values */ -webkit-text-stroke-width: 2
px; -webkit-text-stroke-width: 0.1em; -webkit-text-stroke-width: 1mm; -webkit-text-stroke-width: 5pt; /* global values */ -webkit-text-stroke-width: inherit; -webkit-text-stroke-width: initial; -webkit-text-stroke-width: unset; values <line-width> the width of the stroke. formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stro...
...et; values <line-width> the width of the stroke. formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3
px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification. living standard initial standardization safari css refe...
-webkit-text-stroke - CSS: Cascading Style Sheets
the -webkit-text-stroke css property specifies the width and color of strokes for text characters. this is a shorthand property for the longhand properties -webkit-text-stroke-width and -webkit-text-stroke-color. /* width and color values */ -webkit-text-stroke: 4
px navy; text-stroke: 4
px navy; /* global values */ -webkit-text-stroke: inherit; -webkit-text-stroke: initial; -webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -webkit-stroke-color -webkit-stroke-width syntax values <length> the width of the stroke. <color> the color of the stroke. formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-...
... living standard initial standardization safari css reference '-webkit-text-stroke' in that document. non-standard unofficial documentation initial definition ...
::-webkit-scrollbar - CSS: Cascading Style Sheets
proin at nulla elementum, consectetur ex eget, commodo ante. sed eros mi, bibendum ut dignissim et, maximus eget nibh. phas...
... proin at nulla elementum, consectetur ex eget, commodo ante. sed eros mi, bibendum ut dignissim et, maximus eget nibh. phasellus blandit...
:default - CSS: Cascading Style Sheets
living standard no change. html5the definition of ':default' in that specification. recommendation defines associated html semantics and constraint validation. ...
... living standard no change. html5the definition of ':default' in that specification. recommendation defines associated html semantics and constraint validation. ...
:host() - CSS: Cascading Style Sheets
specifications specification status comment css scoping module level 1the definition of '...
... specifications specification status comment css scoping module level 1the definition of ':hos...
:host-context() - CSS: Cascading Style Sheets
we've used it to make it clear that the custom element shouldn't appear inside the <h1> in our design. specifications specification status comment ...
...we've used it to make it clear that the custom element shouldn't appear inside the <h1> in our design. specifications specification status comment ...
:in-range - CSS: Cascading Style Sheets
"in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...
... living standard defines when :in-range matches elements in html. selectors level 4the defin...
:last-child - CSS: Cascading Style Sheets
ent had to have a parent. beginning with selectors level 4, this is no longer required. ...
...p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5
px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1
px solid red; color: red; } result specifications specification status comment selectors level 4the definition of ':last-child' in that specification. working draft matching elements are not required to have a parent. selectors level 3the definition of ':last-child' in that specification. recommendation initial definition. ...
:read-only - CSS: Cascading Style Sheets
ke clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1
px 1
px 3
px #ccc; border-radius: 5
px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable;...
...ull source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5
px; border-radius: 5
px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-only' in that specification. living standard no change. html5the definition of ':read-only' in that specification. recommendation ...
:read-write - CSS: Cascading Style Sheets
ke clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1
px 1
px 3
px #ccc; border-radius: 5
px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it. <p contenteditable>this paragraph is editable; it is...
...renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5
px; border-radius: 5
px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standardthe definition of ':read-write' in that specification. living standard no change. html5the definition of ':read-write' in that specification. recommendation ...
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
use the resolution media feature query instead. syntax the -webkit-device-pixel-ratio feature is specified as a <number> value. it is a range feature, meaning that you can also use the prefixed -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio variants to query minimum and maximum values, respectively. values <number> the number of device pixels used to represent each css
px. although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dp
px. implementation /* a unit of "dp
px" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dp
px) { ... } /* similarly: */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (max-resolution: 2...
...although the value is a <number>, and thus doesn't syntactically allow units, its implicit unit is dp
px. implementation /* a unit of "dp
px" is implied: */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (min-resolution: 2dp
px) { ... } /* similarly: */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* ... is equivalent to: */ @media (max-resolution: 2dp
px) { ... } examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } } resu...
height - CSS: Cascading Style Sheets
descriptor is a shorthand descriptor for setting both min-height and max-height of the viewport. by providing one viewport length value will set both, the minimum height and the maximum height, to the value provided. if two viewport values are provided, the first value will set the minimum height and the second value will set the maximum height. syntax /* one value */ height: auto; height: 320
px; height: 15em; /* two values */ height: 320
px 200
px; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. formal definition ...
... working draft initial definition ...
max-height - CSS: Cascading Style Sheets
the max-height css descriptor specifies the maximum height of the viewport of a document defined via the @viewport at-rule. the height will initially be set as close as possible to the initial viewport height considering the maximum height constraint. syntax /* keyword value */ max-height: auto; /* <length> values */ max-height: 400
px; max-height: 50em; max-height: 20cm; /* <percentage> value */ max-height: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of...
... working draft initial definition ...
max-width - CSS: Cascading Style Sheets
the max-width css descriptor specifies the maximum width of the viewport of a document defined via the @viewport at-rule. by default, the width is set as close as possible to the initial viewport considering the maximum width constraint. syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600
px; max-width: 80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width of the initial viewport at zoom factor 1.0 for horizontal lengths. must be non-negative. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewp...
... working draft initial definition ...
min-height - CSS: Cascading Style Sheets
the min-height css descriptor specifies the minimum height of the viewport of a document defined via the @viewport at-rule. the height will initially be set as close as possible to the initial viewport height considering the minimum height constraint. syntax /* keyword value */ min-height: auto; /* <length> values */ min-height: 120
px; min-height: 20em; min-height: 10cm; /* <percentage> value */ min-height: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the height of the initial viewport at zoom factor 1.0 for vertical lengths. must be non-negative. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of...
... working draft initial definition ...
min-width - CSS: Cascading Style Sheets
the min-width css descriptor specifies the minimum width of the viewport of a document defined via @viewport. by default, min-width is set as close as possible to the initial viewport considering the minimum width constraint. syntax /* keyword value */ min-width: auto; /* <length> values */ min-width: 320
px; min-width: 40em; min-width: 5cm; /* <percentage> value */ min-width: 25%; values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be non-negative. formal definition related at-rule@viewportinitial valueautopercentagesrefer to the wi...
... working draft initial definition ...
width - CSS: Cascading Style Sheets
ting both the min-width and the max-width descriptors of the viewport. by providing one viewport length value, that value will determine both the min-width and the max-width to the value provided. if two viewport values are provided the first value will be set to the min-width and the second value will be set max-width. syntax /* an example with one viewport value: */ @viewport { width: 320
px; } /* an example with two viewport values: */ @viewport { width: 320
px, 120
px; } values auto the used value is calculated from the other css descriptors' values. <length> a non-negative absolute or relative length. <percentage> a percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. must be no...
... working draft initial definition ...
Basic concepts of flexbox - CSS: Cascading Style Sheets
items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis. the flex-grow property can be used to distribute space in proportion. if we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100
px out of 200
px in the case of the example above), 1 part each the other two (50
px each out of the 200
px total). the flex-shrink property where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. if we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become s...
...nt of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. we’ll therefore take a more detailed look at how this algorithm works in the article controlling ratios of items along the main axis. note that these values for flex-grow and flex-shrink are proportions. typically if we had all of our items set to flex: 1 1 200
px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200
px. however you could use flex: 10 1 200
px and flex: 20 1 200
px if you wanted. shorthand values for the flex properties you will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the flex shorthand. the flex shorthand allows you to set...
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
ientation based on the writing-mode property. however, replaced elements such as form controls which include text, should match the writing mode in use. logical properties and values once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. ...
...hat are mapped to the physical dimensions of the screen seem strange. for example, if you give a box a width of 100
px, in horizontal-tb that would control the size in the inline direction. in vertical-lr it controls the size in the block direction because it does not rotate with the text. therefore, we have new properties of block-size and inline-size. if we give our block an inline-size of 100
px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-size will always mean the size in the inline direction. the css logical properties and values specification includes logical versions of the properties that control margins, padding and borders as well as other mappings for things that we have typically used physical directions to specify. summary in most ...
CSS Fonts - CSS: Cascading Style Sheets
s fonts is a module of css that defines font-related properties and how font resources are loaded. it lets you define the style of a font, such as its family, size and weight, line height, and the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. ...
...nd the glyph variants to use when multiple are available for a single character. basic example the following example shows a simple use of basic font properties to style a paragraph of text. p { width: 600
px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1
px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information. reference propertie...
Subgrid - CSS: Cascading Style Sheets
the nested grid will have three column tracks of the same size as the parent grid. gaps are inherited but can also be overridden with a different gap value. line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names. subgrid for columns in the example below i have a grid layout with nine 1fr column tracks and four rows that are a minimum of 100
px tall. i place .item from column line 2 to 7, and row 2 to 4. i then make this grid item into a grid, giving it column tracks that are a subgrid and defining rows as normal. as the item spans five column tracks, this means that the subgrid has five column tracks. i can then place .subitem on this grid. the rows in this example are not a subgrid and so behave as a nested grid does normally. the g...
...umn-gap, or row-gap specified on the parent, this will be passed into the subgrid, so it will have the same spacing between tracks as the parent. in some situations however you may wish the subgrid tracks to have a different gap or no gap. this can be achieved by using the gap-* properties on the grid container of the subgrid. you can see this in the example below. the parent grid has a gap of 20
px for rows and columns. the subgrid has row-gap set to 0. if you inspect this in the firefox grid inspector you can see how the line of the grid is in the correct place down the center of the gap, so when we set the gap to 0, it acts in a similar way to applying a negative margin to an element, giving the space from the gap back to the item. named grid lines when using css grid you can name ...
Stacking context example 1 - CSS: Cascading Style Sheets
div2"> <br /><span class="bold">div #2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12
px arial; } #div1, #div3 { height: 80
px; position: relative; border: 1
px dashed #669966; background-color: #ccffcc; padding-left: 5
px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150
px; height: 200
px; top: 20
px; left: 170
px; border: 1
px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: ...
...lative; border: 1
px dashed #669966; background-color: #ccffcc; padding-left: 5
px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150
px; height: 200
px; top: 20
px; left: 170
px; border: 1
px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200
px; height: 70
px; top: 65
px; left: 50
px; border: 1
px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10
px; } result ...
Stacking without the z-index property - CSS: Cascading Style Sheets
sition: 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: 10
px; border: 1
px dashed; text-align: center; } .static { position: static; height: 80
px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150
px; height: 350
px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80
px; background-color: #cfc; border-color: #696; opacity: 0.7; } #ab...
...x dashed; text-align: center; } .static { position: static; height: 80
px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150
px; height: 350
px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height: 80
px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10
px; left: 10
px; } #rel1 { top: 30
px; margin: 0
px 50
px 0
px 50
px; } #rel2 { top: 15
px; left: 20
px; margin: 0
px 50
px 0
px 50
px; } #abs2 { top: 10
px; right: 10
px; } #sta1 { background-color: #ffc; margin: 0
px 50
px 0
px 50
px; } ...
Introducing the CSS Cascade - CSS: Cascading Style Sheets
together. when several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together. example let's look at an example involving multiple sources of css across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10
px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left: 3
px } } @media print { li { margin-left: 1
px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply. no declaration is marked as ...
...cific { margin-left: 1em } html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply. no declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet. so three declarations are in competition: margin-left: 0 margin-left: 3
px margin-left: 1
px the last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. therefore, it is the last one that is then selected: margin-left: 3
px note that the declaration defined in the user css, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm. specifications s...
CSS reference - CSS: Cascading Style Sheets
column-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidp
pxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-fa...
...gpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)pt
pxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()scalez():scopescroll-behaviorscroll-marginscroll-margin-blockscroll-ma...
Specificity - CSS: Cascading Style Sheets
the second rule. how to override !important a) add another css rule with !important, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a css rule with the same selector at a later point than the existing one. this works because in a specificity tie, the last rule defined wins. some examples with a higher specificity: table td { height: 50
px !important; } .mytable td { height: 50
px !important; } #mytable td { height: 50
px !important; } b) or add the same selector after the existing one: td { height: 50
px !important; } c) or, preferably, rewrite the original rule to avoid the use of !important altogether. [id="someelement"] p { color: blue; } p.awesome { color: red; } including an id as part of an attribute selector instead...
...> <div class="inner"> <p>this text is in the inner div.</p> </div> </div> ... appears on the screen like this: the :where() exception the specificity-adjustment pseudo-class :where() always has its specificity replaced with zero. this chunk of css ... div:where(.outer) p { color: orange; } div p { color: blueviolet; } #no-where-support { margin: 0.5em; border: 1
px solid red; } #no-where-support:where(*) { display: none !important; } ... when used with the following html ... <div id="no-where-support"> ⚠️ your browser doesn't support the <code><a href="/docs/web/css/:where" target="_top">:where()</a></code> pseudo-class. </div> <div class="outer"> <p>this is in the outer div.</p> <div class="inner"> <p>this text is in the inner div.</...
animation-timing-function - CSS: Cascading Style Sheets
lass="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: 4
px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1
px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1
px solid orange; } } .ease { animation-timing-function: ease; } .easein { animation-timing-function: ease-...
...mp-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-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4
px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1
px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1
px solid orange; } } .jump-start { animation-timing-function: steps(5, jump-start); } .jump-end { animatio...
animation - CSS: Cascading Style Sheets
<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 { width: 27
px; height: 27
px; background-size: 16
px; background-position: center; background-repeat: no-repeat; border-radius: 3
px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fs...
...eps(<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: 25
px; width: 100%; overflow: hidden; } .cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } @-webkit-key...
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
firefox chrome safari edge the element is drawn like a button. checkbox div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; } <div>lorem</div> firefox chrome safari edge the element is drawn like a checkbox, including only the actual "checkbox" portion. ...
...ke a container for a checkbox, which may include a prelighting background effect under certain platforms. normally it would contain a label and a checkbox. ...
block-size - CSS: Cascading Style Sheets
nding on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
border-bottom-width - CSS: Cascading Style Sheets
e is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-bottom-width: thin; border-bottom-width: medium; border-bottom-width: thick; /* <length> values */ border-bottom-width: 10em; border-bottom-width: 3vmax; border-bottom-width: 6
px; /* global keywords */ border-bottom-width: inherit; border-bottom-width: initial; border-bottom-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border ...
...l definition initial valuemediumapplies toall elements. 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: 1
px 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. candidate recommendation no significant change. css level 2 (rev...
border-bottom - CSS: Cascading Style Sheets
ttom: none thick green; ... and the value of border-bottom-style given before border-bottom is ignored. since the default value of border-bottom-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-bottom-color border-bottom-style border-bottom-width syntax border-bottom: 1
px; border-bottom: 2
px dotted; border-bottom: medium dashed blue; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-bottom-width. <br-style> see border-bottom-style. <color> see border-bottom-color. formal definition initial valueas each of the properties of the shorthand:border-bottom-width: me...
...ue> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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: 4
px dashed blue; background-color: gold; height: 100
px; width: 100
px; 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. candidate recommendation no direct changes, though the modification of values for the borde...
border-image-outset - CSS: Cascading Style Sheets
stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> value */ border-image-outset: 1rem; /* <number> value */ border-image-outset: 1.5; /* vertical | horizontal */ border-image-outset: 1 1.2; /* top | horizontal | bottom */ border-image-outset: 30
px 2 45
px; /* top | right | bottom | left */ border-image-outset: 7
px 12
px 14
px 5
px; /* global values */ border-image-outset: inherit; border-image-outset: initial; border-image-outset: unset; the border-image-outset property may be specified as one, two, three, or four values. each value is a <length> or <number>. negative values are invalid and will cause the border-image-outset declaration to...
...nd right, and the third to the bottom. if four values are specified, they apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the border-image outset as a dimension — a number with a unit. <number> the size of the border-image outset as a multiple of the element's corresponding border-widths. for example, if an element has border-width: 1em 2
px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4
px 0 3rem. formal definition initial value0applies toall elements, except internal table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type ...
border-inline-start-width - CSS: Cascading Style Sheets
er-left-width property depending on the values defined for writing-mode, direction, and text-orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <'border-width'> values */ border-inline-start-width: 5
px; border-inline-start-width: thick; related properties are border-block-start-width, border-block-end-width, and border-inline-end-width, which define the other border widths of the element. values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabso...
...e border. see border-width. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 1
px solid blue; border-inline-start-width: 5
px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification. editor's draft initial definition ...
border-inline-width - CSS: Cascading Style Sheets
nline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-inline-width: 5
px 10
px; border-inline-width: 5
px; border-inline-width: thick; the border width in the other dimension can be set with border-block-width, which sets border-block-start-width, and border-block-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing bloc...
...e border. see border-width. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 1
px solid blue; border-inline-width: 5
px 10
px; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-width' in that specification. editor's draft initial definition ...
border-left-width - CSS: Cascading Style Sheets
ctive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-left-width: thin; border-left-width: medium; border-left-width: thick; /* <length> values */ border-left-width: 10em; border-left-width: 3vmax; border-left-width: 6
px; /* global keywords */ border-left-width: inherit; border-left-width: initial; border-left-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border ...
... formal definition initial valuemediumapplies toall elements. 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: 1
px 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. candidate recommendation no significant change. css level 2 (revision ...
border-left - CSS: Cascading Style Sheets
otted; border-left: none thick green; ... and the value of border-left-style given before border-left is ignored. since the default value of border-left-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-left-color border-left-style border-left-width syntax border-left: 1
px; border-left: 2
px dotted; border-left: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-left-width. <br-style> see border-left-style. <color> see border-left-color. formal definition initial valueas each of the properties of the shorthand:border-left-width: mediumborder-...
...ha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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: 4
px dashed blue; background-color: gold; height: 100
px; width: 100
px; 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. candidate recommendation no direct changes, though the modification of values for the border-...
border-right-width - CSS: Cascading Style Sheets
example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-right-width: thin; border-right-width: medium; border-right-width: thick; /* <length> values */ border-right-width: 10em; border-right-width: 3vmax; border-right-width: 6
px; /* global keywords */ border-right-width: inherit; border-right-width: initial; border-right-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border ...
... formal definition initial valuemediumapplies toall elements. 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: 1
px 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. candidate recommendation no significant change. css level 2 (revisi...
border-right - CSS: Cascading Style Sheets
order-right: none thick green; ... and the value of border-right-style given before border-right is ignored. since the default value of border-right-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-right-color border-right-style border-right-width syntax border-right: 1
px; border-right: 2
px dotted; border-right: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-right-width. <br-style> see border-right-style. <color> see border-right-color. formal definition initial valueas each of the properties of the shorthand:border-right-width: mediumb...
... ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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: 4
px dashed blue; background-color: gold; height: 100
px; width: 100
px; 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. candidate recommendation no direct changes, though the modification of values for the border...
border-spacing - CSS: Cascading Style Sheets
lumn or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table. note: the border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing. syntax /* <length> */ border-spacing: 2
px; /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em; /* global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or two values. when one <length> value is specified, it defines both the horizontal and vertical spacings between cells. when two <length> values are specified, the fi...
...and 1em horizontally between a table's cells. note how, along its outside edges, the table's padding values are added to its border-spacing values. html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1
px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification. recommendation initial definition. ...
border-top-width - CSS: Cascading Style Sheets
interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ border-top-width: thin; border-top-width: medium; border-top-width: thick; /* <length> values */ border-top-width: 10em; border-top-width: 3vmax; border-top-width: 6
px; /* global keywords */ border-top-width: inherit; border-top-width: initial; border-top-width: unset; values <line-width> defines the width of the border, either as an explicit nonnegative <length> or a keyword. if it's a keyword, it must be one of the following values: thin a thin border medium a medium border th...
...thin a single document. formal definition initial valuemediumapplies toall elements. 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: 1
px 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. candidate recommendation no significant change. css level 2 (revision 1)t...
border-top - CSS: Cascading Style Sheets
style: dotted; border-top: none thick green; ... and the value of border-top-style given before border-top is ignored. since the default value of border-top-style is none, not specifying the border-style part results in no border. constituent properties this property is a shorthand for the following css properties: border-top-color border-top-style border-top-width syntax border-top: 1
px; border-top: 2
px dotted; border-top: medium dashed green; the three values of the shorthand property can be specified in any order, and one or two of them may be omitted. values <br-width> see border-top-width. <br-style> see border-top-style. <color> see border-top-color. formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-st...
...alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )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: 4
px dashed blue; background-color: gold; height: 100
px; width: 100
px; 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. candidate recommendation no direct changes, though the modification of values for the border-t...
border - CSS: Cascading Style Sheets
eractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-color border-style border-width syntax /* style */ border: solid; /* width | style */ border: 2
px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* global values */ border: inherit; border: initial; border: unset; the border property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the border will be invisible if its style is not defined. this is because the st...
... candidate recommendation removes specific support for transparent, as it is now a valid <color>; this has no practical impact...
box-align - CSS: Cascading Style Sheets
| 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: 400
px; /* make this box wider than the children so there is room for the box-align */ width: 300
px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -webkit-box-orient: vertical; /* webkit */ /* align children to the horizontal center of this box */ box-align: center; /* ...
... browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute...
box-pack - CSS: Cascading Style Sheets
y 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: 300
px; /* make this box wide enough to show the contents are centered horizontally */ width: 300
px; /* children should be oriented vertically */ -moz-box-orient: vertical; /* mozilla */ -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 childr...
... ...
break-after - CSS: Cascading Style Sheets
screte formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in multiple columns using column-width: 200
px. by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place. however, we used break-after: column on the <p> elements to force a column break after each one, meaning that you end up with an <h2> neatly at the top of each column. html <article> <h1>main heading</h1> <h2>subheading</h2> <p>lorem ipsum dolor sit amet, consectet...
...rra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2
px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1
px; } p { line-height: 1.5; break-after: column; } article { column-width: 200
px; gap: 20
px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidate recommendation adds the ...
break-before - CSS: Cascading Style Sheets
screte formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in multiple columns using column-width: 200
px. by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uniform place. however, we used break-before: column on the <h2> elements to force a column break before each one, meaning that you end up with an <h2> neatly at the top of each column. html <article> <h1>main heading</h1> <h2>subheading</h2> <p>lorem ipsum dolor sit amet, consec...
...rra enim vel suscipit. quisque consequat velit eu orci malesuada, ut interdum tortor molestie. proin sed pellentesque augue. nam risus justo, faucibus non porta a, congue vel massa. cras luctus lacus nisl, sed tincidunt velit pharetra ac. duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2
px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1
px; break-before: column; } p { line-height: 1.5; } article { column-width: 200
px; gap: 20
px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candidate recommendation adds th...
caption-side - CSS: Cascading Style Sheets
editor's draft defines the top and bottom values as relative to the writing-mode value. css level 2 (revision 1)the definition of 'caption-side' in that sp...
... editor's draft defines the top and bottom values as relative to the writing-mode value. css level 2 (revision 1)the definition of 'caption-side' in that specification. recommendation ...
clamp() - CSS: Cascading Style Sheets
c-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples min, max, and clamp comparison in this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of the sizes. the <body> element's width is set as min(1000
px, calc(70% + 100
px)). this means that the width will be set at 1000
px, unless the result of calc(70% + 100
px) is less than 1000
px, in which case it will be set to that value instead. min() allows you set a maximum value. the <p> element's font-size is set as max(1.2rem, 1.2vw). this means that the font-size will be set at 1.2rem, unless the computed value of 1.2vw is greater than that of 1.2rem, ...
... facilisis lorem. maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. cras feugiat vulputate tortor at rhoncus. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. nam non felis quis sem lobortis sodales vel id libero. phasellus sit amet placerat lorem. </p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000
px, calc(70% + 100
px)); } h1 { letter-spacing: 2
px; font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-size: max(1.2rem, 1.2vw); } specifications specification status comment css values and units module level 4the definition of 'clamp()' in that specification. editor's draft initial definition. ...
clip - CSS: Cascading Style Sheets
the clip css property defines a visible portion of an element. the clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed. /* keyword value */ clip: auto; /* <shape> values */ clip: rect(1
px 10em 3rem 2ch); clip: rect(1
px, 10em, 3rem, 2ch); /* global values */ clip: inherit; clip: initial; clip: unset; syntax note: where possible, authors are encouraged to use the newer clip-path property instead. values <<shape>()> a rectangular <<shape>()> of the form rect(<top> <right> <bottom> <left>). the <top> and <bottom> values are offsets from the inside top border edge of the box, while <right> and <left> are offsets from the inside left border edge of the box — that is, the extent of the padding box. the <top>, <...
...ositioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536
px; height: 350
px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360
px; clip: rect(0 175
px 113
px 0); } #middle { left: 280
px; clip: rect(119
px 255
px 229
px 80
px); } #bottom-right { left: 200
px; clip: rect(235
px 335
px 345
px 160
px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title...
<color> - CSS: Cascading Style Sheets
lue can be used. currentcolor keyword the currentcolor keyword represents the value of an element's color property. this lets you use the color value on properties that do not receive it by default. if currentcolor is used as the value of the color property, it instead takes its value from the inherited value of the color property. currentcolor example html <div style="color:blue; border: 1
px dashed currentcolor;"> the color of this text is blue. <div style="background:currentcolor; height:9
px;"></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. an optional alpha component represents the color's transparency. syntax rgb colors can be expressed through both h...
... see color and color contrast for more information. examples color value tester in this example we provide a <div> and a text input. entering a valid color into the input causes the <div> to adopt that color, allowing you to test our color values. ...
column-width - CSS: Cascading Style Sheets
n help you create responsive designs that fit different screen sizes. especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. in horizontal text these are width, column-width, column-gap, and column-rule-width. syntax /* keyword value */ column-width: auto; /* <length> values */ column-width: 60
px; column-width: 15.5em; column-width: 3.3vw; /* global values */ column-width: inherit; column-width: initial; column-width: unset; the column-width property is specified as one of the values listed below. values <length> indicates the optimal column width. the actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when...
...> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> css .content-box { column-width: 100
px; } result specifications specification status comment css writing modes level 4the definition of 'column-width' in that specification. candidate recommendation adds intrinsic sizes via the keywords min-content, max-content, fill-available, and fit-content. css multi-column layout modulethe definition of 'column-width' in that specification. work...
<display-box> - CSS: Cascading Style Sheets
s is not a css reset | adrian roselli examples in this first example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered. 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 300
px. ...
...ult display: contents in this example the outer <div> has a 2-pixel red border and a width of 300
px. 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: 2
px solid red; width: 300
px; display: contents; } .outer > div { border: 1
px solid green; } result specifications specification status css display module level 3the definition of 'display-box' in that specification. candidate recommendation ...
<easing-function> - CSS: Cascading Style Sheets
ion> <option>ease-in</option> <option>ease-in-out</option> <option>ease-out</option> <option>cubic-bezier(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: 100
px; } div > div { position: absolute; width: 50
px; height: 50
px; background-color: blue; background-image: radial-gradient(circle at 10
px 10
px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25
px; animation: 1.5s infinite alternate; } @keyframes move-right { from { left: 10%; } to { left: 90%; } } li { display: flex; align-items: center; ...
...: 50
px; height: 50
px; background-color: blue; background-image: radial-gradient(circle at 10
px 10
px, rgba(25,255,255,0.8),rgba(25,255,255,0.4)); border-radius: 50%; top: 25
px; 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: 20
px; } javascript const selectelem = document.queryselector('select'); const startbtn = 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.animationtimingfunct...
<filter-function> - CSS: Cascading Style Sheets
st</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300
px; height: 300
px; 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: 20
px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2
px; } javascript const...
...e = document.queryselector('p code'); selectelem.addeventlistener('change', () => { setslider(selectelem.value); setdiv(selectelem.value); }); slider.addeventlistener('input', () => { setdiv(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'); } else ...
fit-content() - CSS: Cascading Style Sheets
except that the track size is clamped at argument if it is greater than the auto minimum. the function can also be used as laid out box size for width, height, min-width, min-height, max-width and max-height, where the maximum and minimum sizes refer to the content size. syntax the fit-content() function accepts a <length> or a <percentage> as an argument. /* <length> values */ fit-content(200
px) fit-content(5cm) fit-content(30vw) fit-content(100ch) /* <percentage> value */ fit-content(40%) values <length> an absolute length. <percentage> a percentage relative to the available space in the given axis. in grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. otherwise it is relative to...
...pending on the writing mode. 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. because the contents of it are wider than the maximum width, it is clamped at 300 pixels. </div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300
px) fit-content(300
px) 1fr; grid-gap: 5
px; box-sizing: border-box; height: 200
px; width: 100%; background-color: #8cffa0; padding: 10
px; } #container > div { background-color: #8ca0ff; padding: 5
px; } result specifications specification status comment css box sizing module level 3the definition of 'fit-content()' in that specification. working dr...
flex-basis - CSS: Cascading Style Sheets
tored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority. syntax /* specify <'width'> */ flex-basis: 10em; flex-basis: 3
px; flex-basis: auto; /* intrinsic sizing keywords */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* automatically size based on the flex item’s content */ flex-basis: content; /* global values */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; the flex-basis property is specified as either the keyword content or a <'width'>. valu...
...x3">3: flex-basis test</li> <li class="flex flex4">4: flex-basis test</li> <li class="flex flex5">5: flex-basis test</li> </ul> <ul class="container"> <li class="flex flex6">6: flex-basis test</li> </ul> css .container { font-family: arial, sans-serif; margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; } .flex { background: #6ab6d8; padding: 10
px; margin-bottom: 50
px; border: 3
px solid #2e86bb; color: white; font-size: 14
px; text-align: center; position: relative; } .flex:after { position: absolute; z-index: 1; left: 0; top: 100%; margin-top: 10
px; width: 100%; color: #333; font-size: 12
px; } .flex1 { flex-basis: auto; } .flex1:after { content: 'auto'; } .flex2 { flex-basis: max-content; } .flex2:aft...
grid-column-end - CSS: Cascading Style Sheets
&& <custom-ident>? ...
...> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100
px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2
px solid #ffec99; border-radius: 5
px; background-color: #fff9db; padding: 1em; } result specifications specification status comment cs...
grid-column-start - CSS: Cascading Style Sheets
& <custom-ident>? ...
...> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100
px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2
px solid #ffec99; border-radius: 5
px; background-color: #fff9db; padding: 1em; } result specifications specification status comment cs...
grid-row-end - CSS: Cascading Style Sheets
er> && <custom-ident>? ...
...> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100
px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2
px solid #ffec99; border-radius: 5
px; background-color: #fff9db; padding: 1em; } result specifications specification status comment cs...
grid-row-start - CSS: Cascading Style Sheets
> && <custom-ident>? ...
...> <div class="box4">four</div> <div class="box5">five</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100
px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2
px solid #f76707; border-radius: 5
px; background-color: #fff4e6; } .wrapper > div { border: 2
px solid #ffa94d; border-radius: 5
px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2
px solid #ffec99; border-radius: 5
px; background-color: #fff9db; padding: 1em; } result specifications specification status comment cs...
grid-template-areas - CSS: Cascading Style Sheets
valid. ...
...mal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250
px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50
px 1fr 30
px; grid-template-columns: 150
px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; } result specifications specification status comment ...
height - CSS: Cascading Style Sheets
mines the height of the border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-height and max-height properties override height. syntax /* keyword value */ height: auto; /* <length> values */ height: 120
px; height: 10em; /* <percentage> value */ height: 75%; /* global values */ height: inherit; height: initial; height: unset; values <length> defines the height as an absolute value. <percentage> defines the height as a percentage of the containing block's height. auto the browser will calculate and select a height for the specified element. max-content the intrinsic preferred height. ...
...ngth> | <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: 250
px; margin-bottom: 5
px; border: 2
px solid blue; } #taller { height: 50
px; } #shorter { height: 25
px; } #parent { height: 100
px; } #child { height: 50%; width: 75%; } result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification. editor's draft css box sizing module l...
image-rendering - CSS: Cascading Style Sheets
the image-rendering css property sets an image scaling algorithm. the property applies to an element itself, to any images set in its other properties, and to its descendants. the user agent will scale an image when the page author specifies dimensions other than its natural size. scaling may also occur due to user interaction (zooming). for example, if the natural size of an image is 100×100
px, but its actual dimensions are 200×200
px (or 50×50
px), then the image will be upscaled (or downscaled) using the algorithm specified by image-rendering. this property has no effect on non-scaled images. syntax /* keyword values */ image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; /* global values */ image-rendering: inherit; image-rendering: initial; image-render...
... data manipulation or with imagesmoothingenabled. ...
inline-size - CSS: Cascading Style Sheets
nding on its writing mode. it corresponds to either the width or the height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
margin-bottom - CSS: Cascading Style Sheets
a negative value places it closer. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-bottom: 10
px; /* an absolute length */ margin-bottom: 1em; /* relative to the text size */ margin-bottom: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-bottom: auto; /* global values */ margin-bottom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>. its value c...
...ge> | 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:1
px dashed black; border-width:1
px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320
px; border:1
px solid black; } div { width:320
px; background-color:gold; } result specifications specification status comment css basic box modelthe...
margin-left - CSS: Cascading Style Sheets
l request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. in the rare cases where width is overconstrained (i.e., when all of width, margin-left, border, padding, the content area, and margin-right are defined), margin-left is ignored, and will have the same calculated value as if the auto value was specified. syntax /* <length> values */ margin-left: 10
px; /* an absolute length */ margin-left: 1em; /* relative to the text size */ margin-left: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-left: auto; /* global values */ margin-left: inherit; margin-left: initial; margin-left: unset; the margin-left property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive...
...-caption, table and inline-table. 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 left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10
px; } .logo { margin-left: -5
px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification. working draft no significant change from css 2.1. css flexible box layout modulethe definition of 'margin-left' in that specification. candidate recommendation defines the behavior of margin-lef...
margin-right - CSS: Cascading Style Sheets
le a negative value places it closer. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the vertical margins of two adjacent boxes may fuse. this is called margin collapsing. syntax /* <length> values */ margin-right: 20
px; /* an absolute length */ margin-right: 1em; /* relative to the text size */ margin-right: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-right: auto; /* global values */ margin-right: inherit; margin-right: initial; margin-right: unset; the margin-right property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be p...
...ption, table and inline-table. 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 right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10
px; } .logo { margin-right: -5
px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification. working draft no significant change css flexible box layout modulethe definition of 'margin-right' in that specification. candidate recommendation defines the behavior of margin-right on flex ...
margin-top - CSS: Cascading Style Sheets
hile a negative value places it closer. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property has no effect on non-replaced inline elements, such as <span> or <code>. syntax /* <length> values */ margin-top: 10
px; /* an absolute length */ margin-top: 1em; /* relative to the text size */ margin-top: 5%; /* relative to the nearest block container's width */ /* keyword values */ margin-top: auto; /* global values */ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero,...
...n table-caption, table and inline-table. 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 top margins .content { margin-top: 5%; } .sidebox { margin-top: 10
px; } .logo { margin-top: -5
px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification. working draft no significant change css level 2 (revision 1)the definition of 'margin-top' in that specification. recommendation removes its effect on inline element...
mask-composite - CSS: Cascading Style Sheets
. ...
...tion initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100
px; height: 100
px; 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>...
mask-repeat - CSS: Cascading Style Sheets
clipping. the only case where clipping happens using space is when there isn't enough room to display one image. round as the allowed space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. when the next image is added, all of the current ones compress to allow room. example: an image with an original width of 260
px, repeated three times, might stretch until each repetition is 300
px wide, and then another image will be added. they will then compress to 225
px. no-repeat the image is not repeated (and hence the mask painting area will not necessarily be entirely covered). the position of the non-repeated mask image is defined by the mask-position css property. formal definition in...
...tapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250
px; height: 250
px; 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: 10
px; } 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="re...
max-inline-size - CSS: Cascading Style Sheets
ates to the maximal width of the element. it relates to max-block-size, which defines the other dimension of the element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
min-block-size - CSS: Cascading Style Sheets
s writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
min-inline-size - CSS: Cascading Style Sheets
writing mode. it corresponds to either the min-width or the min-height property, depending on the value of writing-mode. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... editor's draft initial definition ...
mix-blend-mode - CSS: Cascading Style Sheets
xt-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150
px; height: 150
px; margin: 0 auto; } .r { transform-origin: center; transform: rotate(-30deg); fill: url(#red); } .g { transform-origin: center; transform: rotate(90deg); fill: url(#green); } .b { transform-origin: center; transform: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item ...
... .item { mix-blend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80
px; height: 80
px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40
px; } .circle-3 { background: blue; left: 20
px; top: 40
px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend-m...
object-position - CSS: Cascading Style Sheets
s natural size) is adjusted to fit within the element's box using the object-fit property. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <position> values */ object-position: center top; object-position: 100
px 50
px; /* global values */ object-position: inherit; object-position: initial; object-position: unset; values <position> from one to four values that define the 2d position of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. formal definition initial value50% 50%applies toreplaced elementsinheri...
... elements, each displaying the mdn logo. <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images. img { width: 300
px; height: 250
px; border: 1
px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10
px; } #object-position-2 { object-position: 100% 10%; } the first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. the second image is positioned with its right edge flush against the righ...
offset-distance - CSS: Cascading Style Sheets
100% represents the total length of the path (when the offset-path is defined as a basic shape or path()). ...
...ally comes from animating the offset-distance property. if you want to animate an element along its full path, you would define its offset-path and then set up an animation that takes the offset-distance from 0% to 100%. 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: 40
px; height: 40
px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification. working draft initial definition ...
outline-offset - CSS: Cascading Style Sheets
the outline-offset css property sets the amount of space between an outline and the edge or border of an element. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ outline-offset: 3
px; outline-offset: 0.2em; /* global values */ outline-offset: inherit; outline-offset: initial; outline-offset: unset; values <length> the width of the space between the element and its outline. a negative value places the outline inside the element. a value of 0 places the outline so that there is no space between it and the element. description an outline is a line that is drawn around an element...
...transparent. in other words, it is the same as the parent element's background. 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: 1
px dashed red; outline-offset: 10
px; background: yellow; border: 1
px solid blue; margin: 15
px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification. recommendation initial definition browser compatibility the compatibility table in this page is gener...
overflow-y - CSS: Cascading Style Sheets
um dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ...
...r adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1
px solid black; width: 250
px; height: 100
px; } #div1 { overflow-y: hidden; margin-bottom: 12
px;} #div2 { overflow-y: scroll; margin-bottom: 12
px;} #div3 { overflow-y: visible; margin-bottom: 120
px;} #div4 { overflow-y: auto; margin-bottom: 120
px;} result specifications specification status comment css overflow module level 3the definition of 'overflow-y' in that specification. workin...
padding-block-end - CSS: Cascading Style Sheets
element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ngs of the element. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20
px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification. editor's draft initial definition ...
padding-block-start - CSS: Cascading Style Sheets
ement, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the other paddings of the element. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20
px; background-color: #c8c800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification. editor's draft initial definition ...
padding-inline-end - CSS: Cascading Style Sheets
lement, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...e the other paddings of the element. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20
px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification. editor's draft initial definition ...
padding-inline-start - CSS: Cascading Style Sheets
ment, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...the other paddings of the element. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20
px; background-color: #c8c800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification. editor's draft initial definition ...
place-content - CSS: Cascading Style Sheets
lementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240
px; width: 240
px; 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: 2
px solid #8c8c8c; width: 50
px; background-color: #a0c8ff; } .small { font-size: 12
px; height: 40...
...; width: 240
px; 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: 2
px solid #8c8c8c; width: 50
px; background-color: #a0c8ff; } .small { font-size: 12
px; height: 40
px; } .large { font-size: 14
px; height: 50
px; } result specifications specification status comment css box alignment module level 3the definition of 'place content' in that specification. working draft initial definition ...
scroll-padding-block-end - CSS: Cascading Style Sheets
tween a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...end: 10
px; scroll-padding-block-end: 1em; scroll-padding-block-end: 10%; /* global values */ scroll-padding-block-end: inherit; scroll-padding-block-end: initial; scroll-padding-block-end: unset; values <length-percentage> an inwards offset from the block end edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding-block-start - CSS: Cascading Style Sheets
n a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ scroll-padding-block-start: auto; /* <length> values */ scroll-padding-block-start: 10
px; scroll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally b...
...croll-padding-block-start: 1em; scroll-padding-block-start: 10%; /* global values */ scroll-padding-block-start: inherit; scroll-padding-block-start: initial; scroll-padding-block-start: unset; values <length-percentage> an inwards offset from the block start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding-block - CSS: Cascading Style Sheets
tent (such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targeted element and the edges of the scrollport. ...
...-padding-block: 10
px; scroll-padding-block: 1em .5em; scroll-padding-block: 10%; /* global values */ scroll-padding-block: inherit; scroll-padding-block: initial; scroll-padding-block: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> s...
scroll-padding-bottom - CSS: Cascading Style Sheets
oom between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...scroll-padding-bottom: 10
px; scroll-padding-bottom: 1em; scroll-padding-bottom: 10%; /* global values */ scroll-padding-bottom: inherit; scroll-padding-bottom: initial; scroll-padding-bottom: unset; values <length-percentage> an inwards offset from the bottom edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding-inline-end - CSS: Cascading Style Sheets
een a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...0
px; scroll-padding-inline-end: 1em; scroll-padding-inline-end: 10%; /* global values */ scroll-padding-inline-end: inherit; scroll-padding-inline-end: initial; scroll-padding-inline-end: unset; values <length-percentage> an inwards offset from the inline end edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificati...
scroll-padding-inline-start - CSS: Cascading Style Sheets
a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ scroll-padding-inline-start: auto; /* <length> values */ scroll-padding-inline-start: 10
px; scroll-padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will gener...
...padding-inline-start: 1em; scroll-padding-inline-start: 10%; /* global values */ scroll-padding-inline-start: inherit; scroll-padding-inline-start: initial; scroll-padding-inline-start: unset; values <length-percentage> an inwards offset from the inline start edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding-inline - CSS: Cascading Style Sheets
(such as fixed-positioned toolbars or sidebars) or simply to put more breathing room between a targetted element and the edges of the scrollport. ...
...ng-inline: 10
px; scroll-padding-inline: 1em .5em; scroll-padding-inline: 10%; /* global values */ scroll-padding-inline: inherit; scroll-padding-inline: initial; scroll-padding-inline: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> s...
scroll-padding-left - CSS: Cascading Style Sheets
ng room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...th> values */ scroll-padding-left: 10
px; scroll-padding-left: 1em; scroll-padding-left: 10%; /* global values */ scroll-padding-left: inherit; scroll-padding-left: initial; scroll-padding-left: unset; values <length-percentage> an inwards offset from the left edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificati...
scroll-padding-right - CSS: Cascading Style Sheets
room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...alues */ scroll-padding-right: 10
px; scroll-padding-right: 1em; scroll-padding-right: 10%; /* global values */ scroll-padding-right: inherit; scroll-padding-right: initial; scroll-padding-right: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding-top - CSS: Cascading Style Sheets
hing room between a targetted element and the edges of the scrollport. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...* <length> values */ scroll-padding-top: 10
px; scroll-padding-top: 1em; scroll-padding-top: 10%; /* global values */ scroll-padding-top: inherit; scroll-padding-top: initial; scroll-padding-top: unset; values <length-percentage> an inwards offset from the top edge of the scrollport, as a valid length or a percentage. auto the offset is determind by the user agent. this will generally be 0
px, but a user agent is able to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specificat...
scroll-padding - CSS: Cascading Style Sheets
ositioned toolbars or sidebars), or simply to put more breathing room between a targeted element and the edges of the scrollport. ...
...length> values */ scroll-padding: 10
px; scroll-padding: 1em .5em 1em 1em; scroll-padding: 10%; /* global values */ scroll-padding: inherit; scroll-padding: initial; scroll-padding: unset; values <length-percentage> an inwards offset from the corresponding edge of the scrollport, as a valid <length> or a <percentage>. auto the offset is determind by the user agent. this will generally be 0
px, but the user agent is free to detect and do something else if a non-zero value is more appropriate. formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> ...
scroll-snap-points-x - CSS: Cascading Style Sheets
the scroll-snap-points-x css property defines the horizontal positioning of snap points within the content of the scroll container they are applied to. /* keyword value */ scroll-snap-points-x: none; /* repeating snap points */ scroll-snap-points-x: repeat(400
px); /* global values */ scroll-snap-points-x: inherit; scroll-snap-points-x: initial; scroll-snap-points-x: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. formal definition ...
...-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: 200
px; overflow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200
px; height: 200
px; display: inline-block; line-height: 200
px; text-align: center; font-size: 100
px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87c...
scroll-snap-points-y - CSS: Cascading Style Sheets
the scroll-snap-points-y css property defines the vertical positioning of snap points within the content of the scroll container they are applied to. /* keyword value */ scroll-snap-points-y: none; /* repeated snap points */ scroll-snap-points-y: repeat(400
px); /* global values */ scroll-snap-points-y: inherit; scroll-snap-points-y: initial; scroll-snap-points-y: unset; syntax values none the scroll container does not define any snap points. elements within the scroll container may still define snap points on behalf of the scroll container. repeat(<length-percentage>) defines an interval at which snap points are defined, starting from the container's relevant start edge. only positive lengths are allowed. percentages refer to the width of the container. formal definition i...
...g-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: 200
px; width: 220
px; overflow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200
px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200
px; height: 200
px; display: inline-block; line-height: 200
px; text-align: center; font-size: 100
px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { back...
scrollbar-color - CSS: Cascading Style Sheets
gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dande...
...gumbo beet greens corn soko endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dandelion cucumber ear...
text-combine-upright - CSS: Cascading Style Sheets
ation typediscrete formal syntax none | all | [ digits <integer>? ] examples digits the digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by browsers. ...
...bine-upright: digits 2; font: 36
px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value. html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24
px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing modes level 4the definition of 'text-combine-upright' in that specification. candidate recommendation add digits value css writing modes module level 3the definition of 'text-combine-upright' in that specification. prop...
top - CSS: Cascading Style Sheets
roperty has no effect. when both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. in all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored. syntax /* <length> values */ top: 3
px; top: 2.4em; /* <percentage>s of the height of the containing block */ top: 10%; /* keyword value */ top: auto; /* global values */ top: inherit; top: initial; top: unset; values <length> a negative, null, or positive <length> that represents: for absolutely positioned elements, the distance to the top edge of the containing block. for relatively positioned elements, the distance t...
... working draft adds behavior for sticky positioning. css level 2 (revision 1)the definition of 'top' in that specification. reco...
transform-box - CSS: Cascading Style Sheets
troke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infinitely. transform-box: fill-box is used to make the the transform-origin the center of the bounding box, so the rectangle spins in place. without it, the transform origin is the center of the svg canvas, and so you get a very different effect. ...
...vh; border:1
px solid #d9d9d9; position:absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #box{ transform-origin:50% 50%; /*+++++++++++++++++++++++++++*/ /* if i remove this rule the pen won't work properly on chrome for mac, ff, safari will still work properly on chrome for pc & opera*/ transform-box: fill-box; /*alternatively i can use transform-origin:15
px 15
px;*/ /*+++++++++++++++++++++++++++*/ animation: rotatebox 3s linear infinite; } @keyframes rotatebox { to { transform: rotate(360deg); } full credit for this example goes to pogany; see this codepen for a live version. specifications specification status comment css transforms level 1the definition of 'transform-box' in that specification. working...
perspective() - CSS: Cascading Style Sheets
iv> <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: 100
px; height: 100
px; line-height: 100
px; font-size: 100
px; text-align: center; } p + div { width: 100
px; height: 100
px; transform-style: preserve-3d; margin-left: 100
px; } .no-perspective-box { transform: rotatex(-15deg) rotatey(30deg); } .perspective-box-far { transform: perspective(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) r...
...ht: 100
px; transform-style: preserve-3d; margin-left: 100
px; } .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, 50
px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50
px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50
px); } result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification. editor's draft initial definition ...
translateX() - CSS: Cascading Style Sheets
the translatex() css function repositions an element horizontally on the 2d plane. its result is a <transform-function> data type. note: translatex(tx) is equivalent to translate(tx, 0) or translate3d(tx, 0, 0). syntax /* <length-percentage> values */ transform: translatex(200
px); transform: translatex(50%); values <length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector. a percentage value refers to the width of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coord...
...coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 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: 60
px; height: 60
px; background-color: skyblue; } .moved { transform: translatex(10
px); /* equal to translate(10
px) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification. working draft initial definition ...
translateY() - CSS: Cascading Style Sheets
the translatey() css function repositions an element vertically on the 2d plane. its result is a <transform-function> data type. note: translatey(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0). syntax /* <length-percentage> values */ transform: translatey(200
px); transform: translatey(50%); values <length-percentage> the value is a <length> or <percentage> representing the ordinate of the translating vector. a percentage value refers to the height of the reference box defined by the transform-box property. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartes...
...oordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix. 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: 60
px; height: 60
px; background-color: skyblue; } .moved { transform: translatey(10
px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification. working draft initial definition ...
transform-style - CSS: Cascading Style Sheets
mple-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: 50
px; width: 100
px; height: 100
px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60
px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50
px); } .back { ba...
...nsform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60
px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50
px); } .back { background: rgba(0,210,0,.7); transform: rotatey(180deg) translatez(50
px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50
px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50
px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50
px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50
px); } javascript const cube = docum...
transition-timing-function - CSS: Cascading Style Sheets
art | 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: 4
px; background-color: black; border: 1
px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1
px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselect...
...,-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="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4
px; background-color: black; border: 1
px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1
px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselector...
unset - CSS: Cascading Style Sheets
candidate recommendation no changes from level 3. css cascading and inheritance level 3the definition of 'unset' in that specificat...
... candidate recommendation no changes from level 3. css cascading and inheritance level 3the definition of 'unset' in that specification. candidate recommendation ...
vertical-align - CSS: Cascading Style Sheets
syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; ve...
...plies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements. syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; vertical-align: super; vertical-align: text-top; vertical-align: text-bottom; vertical-align: middle; vertical-align: top; vertical-align: bottom; /* <length> values */ vertical-align: 10em; vertical-align: 4
px; /* <percentage> values */ vertical-align: 20%; /* global values */ vertical-align: inherit; vertical-align: initial; vertical-align: unset; the vertical-align property is specified as one of the values listed below. values for inline elements parent-relative values these values vertically align the element relative to its parent element: baseline aligns the baseline of the element wit...
visibility - CSS: Cascading Style Sheets
candidate recommendation defines the collapse value as it applies to flex items. css level 2 (revision 1)the definition of 'visibility' in that specification. recommendation...
... candidate recommendation defines the collapse value as it applies to flex items. css level 2 (revision 1)the definition of 'visibility' in that specification. recommendation initial definition. ...
width - CSS: Cascading Style Sheets
t if box-sizing is set to border-box, it sets the width of the border area. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the min-width and max-width properties override width. syntax /* <length> values */ width: 300
px; width: 25em; /* <percentage> value */ width: 75%; /* keyword values */ width: max-content; width: min-content; width: fit-content(20em); width: auto; /* global values */ width: inherit; width: initial; width: unset; the width property is specified as either: one of the following keyword values: min-content, max-content, fit-content, auto. a <length> or a <percentage>. values <lengt...
...tage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> pixels and ems .
px_length { width: 200
px; background-color: red; color: white; border: 1
px solid black; } .em_length { width: 20em; background-color: white; color: red; border: 1
px 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: 1
px solid red; } <div cl...
word-spacing - CSS: Cascading Style Sheets
word-spacing css property sets the length of space between words and between tags. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3
px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the browser. <length> specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. <percentage> sp...
...g, as defined by the current font and/or the browser. <length> specifies extra spacing in addition to the intrinsic inter-word spacing defined by the font. <percentage> specifies extra spacing as a percentage of the affected character’s advance width. examples html <div id="mozdiv1">here are many words...</div> <div id="mozdiv2">...and many more!</div> css #mozdiv1 { word-spacing: 15
px; } #mozdiv2 { word-spacing: 5em; } accessibility concerns a large positive or negative word-spacing value will make the sentences the styling is applied to unreadable. for text styled with a very large positive value, the words will be so far apart that it will no longer appear to be a sentence. for text styled with a large negative value, the words will overlap each other to the point wh...
zoom - CSS: Cascading Style Sheets
this property originated in internet explorer. apple has a descri...
...this property originated in internet explorer. apple has a description in the saf...
Media buffering, seeking, and time ranges - Developer guides
yers seem to display. so let's build this. ...
...ur 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: 20
px; position: relative; background: #555; width: 300
px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20
px; height: 20
px; position: relative; width: 300
px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getel...
HTML attribute: accept - HTML: Hypertext Markup Language
regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. including the multiple attribute, as shown above, specifies that multiple files can be cho...
...accept anything that smells like an ms word document. 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: 10
px; } specifications specification status html living standardthe definition of 'accept attribute' in that specification. living standard html 5.1the definition of 'accept attribute' in that specification. recommendation ...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
source being linked. these provide useful hints to allow the browser to choose the most appropriate icon available. you can also provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600
px)"> some interesting new performance and security features have been added to the <link> element too. take this example: <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> a rel value of preload indicates that the browser should preload this resource (see preloading content with rel="preload" for more details), with the as attribute indicating the...
...vicon32.png"> conditionally loading resources with media queries you can provide a media type or query inside a media attribute; this resource will then only be loaded if the media condition is true. ...
<style>: The Style Information element - HTML: Hypertext Markup Language
e> </head> <body> <p>this is my paragraph.</p> </body> </html> multiple style elements in this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity. <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5
px; border: 1
px solid black; } </style> <style> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500
px in width. ...
...low; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> including a media query in this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500
px in width. <!doctype html> <html> <head> <style> p { color: white; background-color: blue; padding: 5
px; border: 1
px solid black; } </style> <style media="all and (max-width: 500
px)"> p { color: blue; background-color: yellow; } </style> </head> <body> <p>this is my paragraph.</p> </body> </html> technical summary content categories metadata content, and if the scoped attribute is present: flow content. permitted content text content...
<var>: The Variable element - HTML: Hypertext Markup Language
sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>. this can be overridden in css, like this: var { font: bold 15
px "courier", "courier new", monospace; } examples basic example here's a simple example, using <var> to denote variable names in a mathematical equation. <p>a simple equation: <var>x</var> = <var>y</var> + 2 </p> the output: overriding the default style using css, you can override the default style for the <var> element. in this example, variable names are rendered using bold courier if...
...ar> to denote variable names in a mathematical equation. <p>a simple equation: <var>x</var> = <var>y</var> + 2 </p> the output: overriding the default style using css, you can override the default style for the <var> element. in this example, variable names are rendered using bold courier if it's available, otherwise it falls back to the default monospace font. css var { font: bold 15
px "courier", "courier new", monospace; } html <p>the variables <var>minspeed</var> and <var>maxspeed</var> control the minimum and maximum speed of the apparatus in revolutions per minute (rpm).</p> this html uses <var> to enclose the names of two variables. result specifications specification status comment html living standardthe definition of '<var>' in ...
Closures - JavaScript
ck (a single function that is executed in response to the event). for instance, suppose we want to add buttons to a page to adjust the text size. ...
...you can attach them to buttons (in this case hyperlinks) as demonstrated in the following code example. ...
dominant-baseline - SVG: Scalable Vector Graphics
the desired baseline. note: as a presentation attribute, dominant-baseline can be used as a css property. see css dominant-baseline for further information. ...
... candidate recommendation refers to the specification in working draft and explicitly mentions the removal of the values use-script, no-change, and reset...
font-size-adjust - SVG: Scalable Vector Graphics
size-adjust property for more information. ...
... as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10
px"> this text uses the times font (10
px), which is hard to read in small sizes. </text> <text y="40" font-family="verdana, sans-serif" font-size="10
px"> this text uses the verdana font (10
px), which has relatively large lowercase letters. </text> <text y="60" font-family="times, serif" font-size="10
px" font-size-adjust="0.58"> this is the 10
px times, but now adjusted to the same aspect ratio as the verdana. </text> </...
in - SVG: Scalable Vector Graphics
r element. if no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute. workaround for backgroundimage instead of using in="backgroundimage", we need to import one of the images to blend inside the filter itself, using an <feimage> element. html <div style="width: 420
px; height: 220
px;"> <svg style="width:200
px; height:200
px; 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. --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_...
...roundmultiply"> <!-- this will not work. --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200
px; height:200
px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround. --> <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> </de...
kerning - SVG: Scalable Vector Graphics
ing between them to a specific length (typically, zero). note: as a presentation attribute kerning can be used as a css property. in css the property is called font-kerning, though. ...
... <length> if a length is provided, then auto-kerning is disabled. instead, inter-character spacing is set to the...
stitchTiles - SVG: Scalable Vector Graphics
100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100
px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(0, 100
px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100
px, 100
px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220
px, 0);" /> <rect x="0" y="0" width="100" height="100" style="fil...
...eight="100" style="filter: url(#noise1); transform: translate(0, 100
px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100
px, 100
px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220
px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320
px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(220
px, 100
px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); transform: translate(320
px, 100
px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates ...
vector-effect - SVG: Scalable Vector Graphics
ges from a host coordinate space. however, it does not specify the suppression of rotation, skew and scaling. when this vector effect and the transform property are defined at the same time, that property is consumed for this effect. ...
...property are defined at the same time, that property is consumed for this effect. example example: vector-effect="non-scaling-stroke" <svg viewbox="0 0 500 240"> <!-- normal --> <path d="m10,20l40,100l39,200z" stroke="black" stroke-width="2
px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2
px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2
px" fill="none"></path> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'vector-effect' in that specification. candidate...
Content type - SVG: Scalable Vector Graphics
reference does contain an <absoluteiri> or <relativeiri>. for the full specification of iri references in svg, see svg 1.1 (2nd edition): iri references. length <length> a length is a distance measurement, given as a number along with a unit. lengths are specified in one of two ways. when used in a stylesheet, a <length> is defined as follows: length ::= number (~"em" | ~"ex" | ~"
px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")? see the css2 specification for the meanings of the unit identifiers. for properties defined in css2, a length unit identifier must be provided. for length values in svg-specific properties and their corresponding presentation attributes, the length unit identifier is optional. if not provided, the length value represents a distance in the current use...
... length unit identifier is optional. if not provided, the length value represents a distance in the current user coordinate system. in presentation attributes for all properties, whether defined in svg1.1 or in css2, the length identifier, if specified, must be in lower case. when lengths are used in an svg attribute, a <length> is instead defined as follows: length ::= number ("em" | "ex" | "
px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")? the unit identifiers in such <length> values must be in lower case. note that the non-property <length> definition also allows a percentage unit identifier. the meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. two common cases are: when a percentage length value represents a...
<glyph> - SVG: Scalable Vector Graphics
<marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface. ...
...k>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-form lang dom interface this element implements the svgglyphelement interface. ...
Example - SVG: Scalable Vector Graphics
this is done completely in w3c standards–xhtml, svg, and javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. ...
... javascript–no flash or any vendor-specific extensions. this example should work in firefox 1.5 and above. view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150
px; display: block; float: left; margin-bottom: 10
px; } label { text-align: right; width: 75
px; padding-right: 20
px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a swarm of motes, governed by two simple principles. first, each mote tries to ...
Namespaces crash course - SVG: Scalable Vector Graphics
me".) redeclaring the default namespace so if all the descendants of the root element are also defined to be in the default namespace, how do you mix in content from another namespace? easy. you just redefine the default namespace. here's a short example. <html xmlns="http://www.w3.org/1999/xhtml"> <body> <!-- some xhtml tags here --> <svg xmlns="http://www.w3.org/2000/svg" width="300
px" height="200
px"> <!-- some svg tags here --> </svg> <!-- some xhtml tags here --> </body> </html> in this example the xmlns parameter on the root <html> element declares the default namespace to be xhtml. as a result, it and all its child elements are interpreted by the user agent as belonging to xhtml, except for the <svg> element. the <svg> element has its own xmlns parameter,...
...his tells the user agent that that particular element (but not its children this time!) belongs to the namespace assigned to the prefix. knowing this will save you some confusion if you come across markup like in the following example: <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <body> <h1>svg embedded inline in xhtml</h1> <svg:svg width="300
px" height="200
px"> <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> </svg:svg> </body> </html> note that because a namespace prefix is used for the <svg:svg> element and its child <svg:circle>, it wasn't necessary to redeclare the default namespace. in general though it is better to redeclare the default namespace rather than prefix lots of elements in this way. scripting in nam...
SVG image element - SVG: Scalable Vector Graphics
if you do not set the height or width attributes, they will be set to 0. having a height or width attribute of 0 will disable rendering of the image. « previousnext » ...
... if you do not set the height or width attributes, they will be set to 0. having a height or width attribute of 0 will disable rendering of the image. « previousnext » ...
Texts - SVG: Scalable Vector Graphics
r tspan element. a typical usecase is to paint one word of a sentence bold red. <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28
px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text. this overwrites the default current text position. the attribute may also contain a list of numbers, that are one by one applied to the single characters of the tspan element. dx start drawing the text with a hor...
...ef="#my_path"> a curve. ...
Content Scripts - Archive of obsolete content
ad, keep the script in a separate file and load it using contentscriptfile. this makes your code easier to maintain, secure, debug and review. you can load multiple scripts by passing an array of strings to either contentscript or contentscriptfile: // main.js var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { tab.attach({ contentscript: ['document.body.style.border = "5
px solid red";', 'window.alert("hi");'] }); }); // main.js var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscriptfile: [data.url("jquery.min.js"), data.url("my-content-script.js")] }); if you do this, the scripts can interact directly with each other, just like scripts loaded by the same web page. you can also...
tabs - Archive of obsolete content
or more scripts to the document loaded in the tab. note that by attaching inside ready event, this becomes tab-centric: if the user navigates to a new page in the same tab, then the content scripts will be reattached to the new page. example var tabs = require("sdk/tabs"); tabs.on('ready', function(tab) { var worker = tab.attach({ contentscript: 'document.body.style.border = "5
px solid red";' }); }); parameters options : object optional options: name type contentscriptfile string,array the local file urls of content scripts to load. content scripts specified by this option are loaded before those specified by the contentscript option. optional. contentscript string,array a string or an array of strings...
Storing annotations - Archive of obsolete content
<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: 10
px; margin: 10
px; border: solid 3
px #eee; background-color: white; } #annotation-list .url, .selection-text, .annotation-text { padding: 5
px; margin: 5
px; } #annotation-list .selection-text,#annotation-list .annotation-text { border: solid 1
px #eee; } #annotation-list .annotation-text { font-style: italic; } body { background-color: #f5f5f5; font: 100% arial, he...
List Open Tabs - Archive of obsolete content
l open tabs. the script adds a red border to the tab's document: require("sdk/ui/button/action").actionbutton({ id: "list-tabs", label: "list tabs", icon: "./icon-16.png", onclick: listtabs }); function listtabs() { var tabs = require("sdk/tabs"); for (let tab of tabs) runscript(tab); } function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5
px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference. to learn more about running scripts in tabs, see the tutorial on using tab.attach(). ...
Custom toolbar button - Archive of obsolete content
last section specifies details of the button. 7. create a plain text file named button.css. copy the following content, making sure that you scroll to get all of it. paste it into the new file: #custom-button-1, #wrapper-custom-button-1 {list-style-image: url("chrome://custombutton/content/button-1.png");} /* common style for all custom buttons */ .custombutton {-moz-image-region: rect( 0
px 24
px 24
px 0
px);} .custombutton:hover {-moz-image-region: rect(24
px 24
px 48
px 0
px);} [iconsize="small"] .custombutton {-moz-image-region: rect( 0
px 40
px 16
px 24
px);} [iconsize="small"] .custombutton:hover {-moz-image-region: rect(24
px 40
px 40
px 24
px);} there is nothing to customize. save the file. explanation: this css stylesheet specifies how the button is displayed. it links to th...
Adding Style Sheets - Archive of obsolete content
in a separate style sheet if you really wanted to. a class was added to the spacers so that they can be referred to. a style sheet also needs to be created. create a file findfile.css in the same directory as the xul file. (it would normally be put into a separate skin). in this file, we'll add the style declarations, as shown below: #find-text { min-width: 15em; } #progmeter { margin: 4
px; } .springspace { width: 10
px; } .titlespace { height: 10
px; } notice how these styles are equivalent to the styles we had before. however, it is much easier for someone to change the look of the find files dialog now because they could add or modify the style declarations by either modifying the file or by changing the skin. if the user changes the interface skin, the files in a directo...
Document Object Model - Archive of obsolete content
o, we'll add an id attribute so that we can refer to it in a script to show and hide it. while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is performed. <tree id="results" hidden="true" flex="1"> . . . <splitter id="splitbar" resizeafter="grow" hidden="true"/> <hbox> <progressmeter id="progmeter" value="50%" style="margin: 4
px;" hidden="true"/> we've added the hidden attribute and set the value to true. this causes the element to be hidden when it first appears. next, let's add a function that is called when the find button is pressed. we'll put scripts in a separate file findfile.js. in the last section, we added the script element in the xul file. if you haven't done this, do that now, as shown below. an oncommand...
Modifying the Default Skin - Archive of obsolete content
r menu bar, the bookmarks menu bar and even the find files menu bar will be red. skin packages to have the change affect only one window, change the style sheet associated with that xul file. for example, to add a red border around the menu commands in the bookmarks manager window, add the following to bookmarksmanager.css in the classic.jar or your favorite skin archive. menuitem { border: 1
px solid red; } if you look in one of the skin archives, you will notice that each contain a number of style sheets and a number of images. the style sheets refer to the images. you should avoid putting references to images directly in xul files if you want your content to be skinnable. this is because a particular skin's design might not use images and it may need some more complex design. by ref...
Progress Meters - Archive of obsolete content
s meter as we don't know how many files we'll be searching or how long the search will take. however, we'll add a normal one for now as an animating one can be distracting during development. the progress meter would normally only appear while the search is taking place. we'll add a script later to turn it on and off. <textbox id="find-text"/> <html:progress value="50" max="100" style="margin: 4
px;"/> <button id="find-button" label="find" default="true"/> the value has been set to 50% so that we can see the meter on the window. a margin has been set to 4 pixels so that it is separated from the edge of the window. as was stated earlier, we only want the progress bar to be displayed while the search was occurring. a script will show and hide it as necessary. to make this work you will fi...
Stack Positioning - Archive of obsolete content
the width and/or height of the children of the stack. note that bottom and right attributes, unlike rect, are relative to the bottom and right of the stack. when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set. in this example, the resulting width of the top-most hbox will be 400
px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. --> </hbox> </stack> in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable results. the ...
Styling a Tree - Archive of obsolete content
by separating them with commas. the example below sets the background color to grey for rows that have the 'readonly' and 'unread' properties. for properties that are 'readonly', it adds a red border around the row. note that the first rule will apply to any row that is 'readonly' regardless of whether other properties such as 'unread' are set. treechildren::-moz-tree-row(readonly) { border: 1
px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(80%, 80%, 80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet. you can use these extra properties to set the appearance of containers or selected rows. the following properties are automatically set as needed: ...
description - Archive of obsolete content
t that will word wrap when displayed <description> this is a long section of text that will word wrap when displayed. </description> this is a long section of text that will not word wrap <description value="this is a long section of text that will not word wrap"> </description> this is a long section of dynamically controlled text that will word wrap <description id="desc" style="width: 300
px"></description> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if...
resizer - Archive of obsolete content
e="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window> resizing an element <stack style="border: 1
px solid black;"> <button id="button" label="resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="16" height="16"/> <resiz...
stack - Archive of obsolete content
times produce unpredictable and undesireable results. more information is available in the xul tutorial. examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> in this example, the resulting width of the top-most hbox will be 400
px (600
px - 200
px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. --> </hbox> </stack> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex,...
tree - Archive of obsolete content
e-row(odd) { background-color: #eeeeee; } treechildren::-moz-tree-row(odd, selected) { background-color: #ffffaa; } treechildren::-moz-tree-cell-text(selected) { color: #000000; } treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; } treechildren::-moz-tree-row(hover) {background-color: #ffffaa !important;} treechildren:-moz-tree-column { border-right:1
px solid rgb(220,220,220) !important; } the javascript to get the text for the selected row/rows: function getrowcellvalues() { var tree = document.getelementbyid('mytree'); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, tree.columns.getcolumnat(0)) == 'true'){ alert(tree.view.getcelltext(i, tree.columns.getnamedcolumn("name"))); } } } this wa...
Theme changes in Firefox 3.5 - Archive of obsolete content
kground image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16
px to avoid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way window shadow is handled on mac os x. before that change, opaque windows always had a shadow and transparent windows never had a shadow. after that change, transparent windows also have a shadow by default. this can result in unwanted shadows in your theme, e.g. under the autos...
Theme changes in Firefox 3 - Archive of obsolete content
ion-16.png used when presenting information notices. chrome://global/skin/icons/warning-16.png used when displaying warnings. images to remove the following images were removed: chrome://mozapps/skin/extensions/question.png no longer used. mac os x mac os x themes for firefox 3 should add these two rules to the end of chrome://global/skin/wizard.css: .wizard-buttons-btm { padding:x
px; } .wizard-label-box { display: none; } the numeric value ofx, the number of pixels of padding in .wizard-buttons-btm, should be the same as the value of the margin for .wizard-buttons-box-2. image changes chrome://global/skin/icons/loading_16.gif was replaced with chrome://global/skin/icons/loading_16.png . changes in mozapps see also theme changes in firefox 2 ...
-ms-scroll-chaining - Archive of obsolete content
rer 10 scrolling, panning, and zooming with touch. .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 480
px; height: 270
px; overflow: auto; } specifications not part of any specification. remarks this property only applies to touch and touchpad input. for keyboard input the scroll does not chain regardless of the –ms-scroll-chaining value, and for mouse input the scroll will always chain up to the nearest scrollable ancestor element. this property has no effect on non-scrollable elements. ...
-ms-scroll-snap-x - Archive of obsolete content
the -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-x properties. initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-x: snapinterval(0
px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-x: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-type the value of the -ms-scroll-snap-type property. -ms-scroll-snap-points-x t...
-ms-scroll-snap-y - Archive of obsolete content
the -ms-scroll-snap-x css shorthand property is a microsoft extension that specifies values for the -ms-scroll-snap-type and -ms-scroll-snap-points-y properties. initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-y: snapinterval(0
px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-y: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-y shorthand property is specified as one or both of the following values, in order and separated by spaces. -ms-scroll-snap-type the value of the -ms-scroll-snap-type property. -ms-scroll-snap-points-y t...
Processing XML with E4X - Archive of obsolete content
dy></html>; alert(xhtml.head); // no need to specify a namespace on subelements here either non-default var xhtml = <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>embedded svg demo</title> </head> <body> <h1>embedded svg demo</h1> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="20" stroke="orange" stroke-width="2
px" fill="yellow" /> </svg> </body> </html>; alert(xhtml.name().localname); // alerts "html" alert(xhtml.name().uri); // alerts "http://www.w3.org/1999/xhtml" to access elements that are within a non-default namespace, first create a namespace object encapsulating the uri for that namespace: var svgns = new namespace('http://www.w3.org/2000/svg'); this can now be used in e4x queries by ...
background-size - Archive of obsolete content
s is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content. here's a slightly more complex example (screenshot), and the same page without the -moz-border-image image rule (screenshot). user:robertc 2009-08-09 this is only an issue with <body> and <html>. <body>'s background extends per css spec to <html>. since you have a 8
px default margin on <body> and your <body>'s content is smaller than the viewport's height, you see what you see. styles like this should work: body { border:0; margin:0; padding:0.6em } /* or for less content, if body is small */ html, body { height:100%; } body { border:0; margin:0; padding:0.6em } furthermore, you may simplify things a bit if you apply the background and border-image styles to...
2D collision detection - Game development
d ensuring the distance between the centre points are less than the two radii added together. playable code <div id="cr-stage"></div> <p>move the circle with arrow keys. ...
Finishing up - Game development
giving the player some lives implementing lives is quite straightforward. let's first add a variable to store the number of lives in the same place where we declared our other variables: var lives = 3; drawing the life counter looks almost the same as drawing the score counter — add the following function to your code, below the drawscore() function: function drawlives() { ctx.font = "16
px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-65, 20); } instead of ending the game immediately, we will decrease the number of lives until they are no longer available. we can also reset the ball and the paddle positions when the player begins with their next life. so, in the draw() function replace the following three lines: alert("game over"); document...
Track the score and win - Game development
if you can see your score throughout the game, eventually you can impress your friends. you need a variable to record the score. add the following into your javascript, after the rest of your variables: var score = 0; you also need a drawscore() function, to create and update the score display. add the following after the collisiondetection() function: function drawscore() { ctx.font = "16
px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("score: "+score, 8, 20); } drawing text on a canvas is similar to drawing a shape. the font definition looks exactly like the one in css — you can set the size and font type in the font() method. then use fillstyle() to set the color of the font and filltext() to set the actual text that will be placed on the canvas, and where it will be ...
The score - Game development
m to our game. we will use a separate variable for storing the score and phaser's text() method to print it out onto the screen. new variables add two new variables right after the previously defined ones: // ... var scoretext; var score = 0; adding score text to the game display now add this line at the end of the create() function: scoretext = game.add.text(5, 5, 'points: 0', { font: '18
px arial', fill: '#0095dd' }); the text() method can take four parameters: the x and y coordinates to draw the text at. the actual text that will be rendered. the font style to render the text with. the last parameter looks very similar to css styling. in our case the score text will be blue, sized at 18 pixels, and use the arial font. updating the score when bricks are destroyed we will ...
Selector (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms
a css selector is the part of a css rule that describes what elements in a document the rule will match. the matching elements will have the rule's specified style applied to them. consider this css: p { color: green; } div.warning { width: 100%; border: 2
px solid yellow; color: white; background-color: darkred; padding: 0.8em 0.8em 0.6em; } #customized { font: 16
px 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 ...
Index - MDN Web Docs Glossary: Definitions of Web-related terms
root node, sibling, descendant, child, and other relationship. the cssom is very similar to the document object model (dom). both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website. 57 css pixel css, css pixel, glossary, height, length, pixel, size, unit, width the css pixel—denoted in css with the suffix
px—is a unit of length which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain, but is otherwise as small as possible. by definition, this is the physical size of a single pixel at a pixel density of 96 dpi, located an arm's length away from the viewer's eyes. 58 css preprocessor css, glossary a css preproce...
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
aning) of "a top level heading on your page." <h1>this is a top level heading</h1> by default, most browser's user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-size: 32
px; margin: 21
px 0;">is this a top level heading?</span> this will render it to look like a top level heading, but it has no semantic value, so it will not get any extra benefits as described above. it is therefore a good idea to use the right html element for the right job. html should be coded to represent the data that will be populated and not based on its default presentation styling. present...
Test your skills: Images and Form elements - Learn web development
he starting point for this task to work in your own editor or in an online editor. task two in this task, you have a simple form. your task is to make the following changes to the way this form looks: use attribute selectors to target the search field and button inside .myform. make the form field and button use the same text size as the rest of the form. give the form field and button 10
px of padding. give the button a purple background (i used rebeccapurple), white foreground, no border and rounded corners of 5
px. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practi...
Test your skills: The Box Model - Learn web development
rules to the .alternate class, so that it matches the visual width of the first box. your final result will look like the image below. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model two in this task, add to the box: a 5
px, black, dotted border. a top margin of 20
px. a right margin of 1em. a bottom margin of 40
px. a left margin of 2em. padding on all sides of 1em. try updating the live code below to recreate the example as displayed in the image: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. the box model three i...
Normal Flow - Learn web development
span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500
px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2
px solid rgb(255,84,104); padding: 10
px; margin: 10
px; } span { background: white; border: 1
px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design. pre...
Test your skills: position - Learn web development
editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. positioning one in this task you need to position the item with a class of target to the top and right of the container, which has the 5
px grey border. try updating the live code below to recreate the finished example: as an extra challenge, can you change the target to display underneath the text? for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. position two in the below example if you scroll the box the sidebar scrolls with the content.
Getting started with CSS - Learn web development
her. for example: /* selects any <span> that is inside a <p>, which is inside an <article> */ article p span { ... } /* selects any <p> that comes directly after a <ul>, which comes directly after an <h1> */ h1 + ul + p { ... } you can combine multiple types together, too. try adding the following into your code: body h1 + p .special { color: yellow; background-color: black; padding: 5
px; } this will style any element with a class of special, which is inside a <p>, which comes just after an <h1>, which is inside a <body>. phew! in the original html we provided, the only element styled is <span class="special">. don't worry if this seems complicated at the moment — you'll soon start to get the hang of it as you write more css. wrapping up in this tutorial, we have taken a l...
Using your new knowledge - Learn web development
-family color border-bottom font-weight font-size text-decoration i have used a mixture of selectors, styling elements such as h1 and h2, but also creating a class for the job title and styling that. use css to change how this biography looks by changing the values of the properties i have used. make the level one heading pink, using the css color keyword hotpink. give the heading a 10
px dotted border-bottom which uses the css color keyword purple. make the level 2 heading italic. give the ul used for the contact details a background-color of #eeeeee, and a 5
px solid purple border. use some padding to push the content away from the border. make the links green on hover. you should end up with something like this image. afterwards try looking up some properties not mention...
Test your skills: Advanced styling - Learn web development
focus outline. how can you remove this? there is a major problem with just getting rid of the blue focus outline. what is it? can you add some kind of styling back in so that users can tell when the search box is being hovered or focused? another thing that commonly denotes a search box is a magnifying glass icon. we've made one available in the same directory as our html files — see search-24
px.png — plus a <div> element after the search input to help you attach it, should you need it. can you figure out a sensible way to attach it, and can you use some css to get it to sit to the right of the search box, and be lined up vertically as well? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or i...
Add a hitmap on top of an image - Learn web development
,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is wider than about 240
px, you’ll need to make further adjustments to make your website responsive. it's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image. if you must use image maps, you may want to look into matt stow's jquery plugin. alternatively, dudley storey demonstrates a way to use svg for an image map effect, along with a subsequent combined ...
Tips for authoring fast-loading HTML pages - Learn web development
ntion to the last-modified header. it allows for efficient page caching; by means of this header, information is conveyed to the user agent about the file it wants to load, such as when it was last modified. most web servers automatically append the last-modified header to static pages (e.g. .html, .css), based on the last-modified date stored in the file system. with dynamic pages (e.g. .php, .as
px), this, of course, can't be done, and the header is not sent. so, in particular, for pages which are generated dynamically, a little research on this subject is beneficial. it can be somewhat involved, but it will save a lot in page requests on pages which would normally not be cacheable. more information: http conditional get for rss hackers http 304: not modified http etag on wikipedia ...
Using data attributes - Learn web development
css access note that, as data attributes are plain html attributes, you can even access them from css. for example to show the parent data on the article you can use generated content in css with the attr() function: article::before { content: attr(data-parent); } you can also use the attribute selectors in css to change styles according to the data: article[data-columns='3'] { width: 400
px; } article[data-columns='4'] { width: 600
px; } you can see all this working together in this jsbin example. data attributes can also be stored to contain information that is constantly changing, like scores in a game. using the css selectors and javascript access here this allows you to build some nifty effects without having to write your own display routines. see this screencast for an exam...
Drawing graphics - Learn web development
wing operations tend to start from the top left corner — bear this in mind. there are also a number of properties to help control text rendering such as font, which lets you specify font family, size, etc. it takes as its value the same syntax as the css font property. try adding the following block to the bottom of your javascript: ctx.strokestyle = 'white'; ctx.linewidth = 1; ctx.font = '36
px arial'; ctx.stroketext('canvas text', 50, 50); ctx.fillstyle = 'red'; ctx.font = '48
px georgia'; ctx.filltext('canvas text', 50, 150); here we draw two lines of text, one outline and the other stroke. the final example should look like so: note: the finished code is available on github as 4_canvas_text.html. have a play and see what you can come up with! you can find more information on t...
Adding features to our bouncing balls demo - Learn web development
nstance's draw(), checkbounds(), and collisiondetect() methods on every iteration of the loop. implementing the score counter to implement the score counter, follow the following steps: in your html file, add a <p> element just below the <h1> element containing the text "ball count: ". in your css file, add the following rule at the bottom: p { position: absolute; margin: 0; top: 35
px; right: 5
px; color: #aaa; } in your javascript, make the following updates: create a variable that stores a reference to the paragraph. keep a count of the number of balls on screen in some way. increment the count and display the updated number of balls each time a ball is added to the scene. decrement the count and display the updated number of balls each time the evil cir...
CSS performance optimization - Learn web development
ink, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480
px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a media attribute with the media query. when the browser sees a style sheet it knows that it only needs to apply it for a specific scenario, it still downloads the stylesheet, but doesn't render block. by se...
Getting started with Ember - Learn web development
ication, type the following in your terminal. this creates a new directory inside the current directory you are in called todomvc, containing the scaffolding for a new ember app. make sure you navigate to somewhere appropriate in the terminal before you run it. (good suggestions are your "desktop" or "documents" directories, so that it is easy to find): ember new todomvc or, on windows: n
px ember-cli new todomvc this generates a production-ready application development environment that includes the following features by default: development server with live reload. plugin-architecture that allows for third-party packages to richly enhance your application. the latest javascript via babel and webpack integration. automated testing environment that runs your tests in the...
Vue conditional rendering: editing existing todos - Learn web development
t() { 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: 5
px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2
px solid #565656; } form { display: flex; flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before mo...
Command line crash course - Learn web development
use of it. the vast ecosystem of installable tools for front end web development currently exists mostly inside npm, a privately owned, package hosting service that works closely together with node.js. this is slowly expanding — you can expect to see more package providers as time goes on. installing node.js also installs the npm command line tool (and a supplementary npm-centric tool called n
px), which offers a gateway to installing additional command line tools. node.js and npm work the same across all systems: macos, windows, and linux. install npm on your system now, by going to the url above and downloading an running a node.js installer appropriate to your operating system. if prompted, make sure to include npm as part of the installation. although we'll look at a number of dif...
Deploying our app - Learn web development
de will automatically trigger the entire build routine. if all is well, we get a live change deployed automatically. the only action we need to perform is that initial "push". however, we do have to set these steps up, and we'll look at that now. the build process again, because we're using parcel for development, the build option is extremely simple to add. instead of running the server with n
px parcel src/index.html, we can run it with n
px parcel build src/index.html and parcel will build everything ready for production instead of just running it for development and testing purposes. this includes doing minification and tree-shaking of code, and cache-busting on filenames. the newly-created production code is placed in a new directory called dist, which contains all the files required ...
Animation.commitStyles() - Web APIs
d. it will cause the end styling state to be written to the element being animated, in the form of properties inside a style attribute. syntax animation.commitstyles(); parameters none. return value none. examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}
px, ${evt.clienty}
px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification. working draft ...
Animation.onremove - Web APIs
on.onremove = removehandler; value a function to be called to handle the remove event, or null if no remove event handler is set. 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...
Animation.persist() - Web APIs
er's automatically removing filling animations behavior. syntax animation.persist(); parameters none. return value none. 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...
Animation.replaceState - Web APIs
nimation has been explicitly persisted by invoking animation.persist() on it. removed: the animation has been explicitly removed. 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...
AudioListener.dopplerFactor - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.forwardX - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.forwardY - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.forwardZ - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.positionX - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.positionY - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.positionZ - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.setOrientation() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.setPosition() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.speedOfSound - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.upY - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
AudioListener.upZ - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
BaseAudioContext.createPanner() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
CSSImageValue - Web APIs
list-style-image, or border-image-source. the cssimagevalue object represents an <image> that involves an url, such as url() or image(), but not linear-gradient() or element() . properties none. methods none. examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100
px; min-width: 100
px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map. we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstyle...
CSSMathValue - Web APIs
max cssmathmin cssmathnegate cssmathproduct cssmathsum properties cssmathvalue.operator indicates the operator that the current subtype represents. event handlers no methods none. examples we create an element with a width determined using a calc() function, then console.log() the operator. ...
CSSNumericValue.add() - Web APIs
the add() method of the cssnumericvalue interface adds a supplied number to the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.add(double | cssnumericvalue); parameters number either a number or a cssnumericvalue. return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. examples let mathsum = css.
px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); // prints "calc(23
px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'add' in that specification. working draft initial definition. ...
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. return value a cssmathproduct. exceptions typeerror indicates that an invalid type was passed to the method. examples let mathproduct = css.
px("24").div(css.percent("4")); // prints "calc(24
px / 4%)" mathproduct.tostring(); specifications specification status comment css typed om level 1the definition of 'div' in that specification. working draft initial definition. ...
CSSNumericValue.mul() - Web APIs
the mul() method of the cssnumericvalue interface multiplies the cssnumericvalue by the supplied value. syntax var cssmathproduct = cssnumericvalue.mul(number); parameters number either a number or a cssnumericvalue. return value a cssmathproduct exceptions typeerror indicates that an invalid type was passed to the method. examples let mathsum = css.
px("23").mul(css.percent("4")).mul(css.cm("3")).mul(css.in("9")); // prints "calc(23
px * 4% * 3cm * 9in)" console.log(mathsum.tostring()); specifications specification status comment css typed om level 1the definition of 'mul' in that specification. working draft initial definition. ...
CSSNumericValue.parse() - Web APIs
hod of the cssnumericvalue interface converts a value string into an object whose members are value and the units. syntax var cssnumericvalue = cssnumericvalue.parse(csstext); parameters csstext a string containing numeric and unit parts. return value a cssnumericvalue. exceptions syntaxerror tbd examples the following returns a cssunitvalue object with a unit property equal to "
px" and a value property equal to 42. let numvalue = cssnumericvalue.parse("42.0
px"); specifications specification status comment css typed om level 1the definition of 'parse' in that specification. working draft initial definition. ...
CSSNumericValue.sub() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.sub(number); parameters number either a number or a cssmathsum. return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. examples let mathsum = css.
px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23
px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification. working draft initial definition. ...
CSSNumericValue.sum() - Web APIs
the sub() method of the cssnumericvalue interface subtracts a supplied number from the cssnumericvalue. syntax var cssmathsum = cssnumericvalue.sub(number); parameters number either a number or a cssmathsum return value a cssmathsum exceptions typeerror indicates that an invalid type was passed to the method. examples let mathsum = css.
px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23
px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status comment css typed om level 1the definition of 'sub' in that specification. working draft initial definition. ...
CSSNumericValue.to() - Web APIs
face converts a numberic value from one unit to another. syntax var cssunitvalue = cssnumericvalue.to(unit); parameters unit the unit to which you want to convert. return value a cssmathsum. exceptions syntaxerror indicates that an invalid type was passed to the method. typeerror indicates that the passed values cannot be summed. examples // prints "0.608542cm" console.log(css.
px("23").to("com").tostring()); specifications specification status comment css typed om level 1the definition of 'to' in that specification. working draft initial definition. ...
CSSNumericValue.toSum() - Web APIs
osum() method of the cssnumericvalue interface converts the object's value to a cssmathsum object to values of the specified unit. syntax var cssmathsum = cssnumericvalue.tosum(units); parameters units the units to convert to. return value a cssnumericvalue. exceptions syntaxerror undefined typeerror indicates that an invalid type was passed to the method. examples let v = css.
px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); v.tostring() // => "calc(23
px + 4% + 3cm + 9in)" v.tosum("
px", "percent").tostring() // => "calc(1000.39
px + 4%)" specifications specification status comment css typed om level 1the definition of 'tosum' in that specification. working draft initial definition. ...
CSSNumericValue.type - Web APIs
the type() method of the cssnumericvalue interface returns the type of cssnumericvalue, one of angle, flex, frequency, length, resolution, percent, percenthint, or time. syntax var cssnumerictype = cssnumericvalue.type(); parameters none. return value a cssnumerictype object. exceptions none. examples let mathsum = css.
px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let cssnumerictype = mathsum.type(); specifications specification status comment css typed om level 1the definition of 'type' in that specification. working draft initial definition. ...
CSSPrimitiveValue.getFloatValue() - Web APIs
frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_
px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. return value a float value in the specified unit. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if the float value can't be...
CSSPrimitiveValue.primitiveType - Web APIs
using the getfloatvalue() method. css_pc the value is a <length> in picas. the value can be obtained by using the getfloatvalue() method. css_percentage the value is a <percentage>. the value can be obtained by using the getfloatvalue() method. css_pt the value is a <length> in points. the value can be obtained by using the getfloatvalue() method. css_
px the value is a <length> in pixels. the value can be obtained by using the getfloatvalue() method. css_rad the value is an <angle> in radians. the value can be obtained by using the getfloatvalue() method. css_rect the value is a rect() function. the value can be obtained by using the getrectvalue() method. css_rgbcolor the value is an <color>. the value can ...
CSSPrimitiveValue.setFloatValue() - Web APIs
frequency> in kilohertz. css_mm the value is a <length> in millimeters. css_ms the value is a <time> in milliseconds. css_number the value is a simple <number>. css_pc the value is a <length> in picas. css_percentage the value is a <percentage>. css_pt the value is a <length> in points. css_
px the value is a <length> in pixels. css_rad the value is an <angle> in radians. css_s the value is a <time> in seconds. floatvalue a float representing the new float value. return value void. exceptions type description domexception an invalid_access_err is raised if the css value doesn't contain a float value or if ...
CSSStyleDeclaration.getPropertyValue() - Web APIs
s a domstring representing the property name to be checked. return value value is a domstring containing the value of the property. if not set, returns the empty string. example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1
px 2
px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification. working draft document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification. obsolete ...
CSSStyleDeclaration.length - Web APIs
the read-only property returns an integer that represents the number of style declarations in this css declaration block. syntax var num = styles.length; value an integer that provides the number of styles explictly set on the parent of the instance. example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10
px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification. working draft document object model (dom) level ...
CSSStyleValue.parse() - Web APIs
ng one or more values to apply to the provided property. return value a cssstylevalue object containing the first supplied value. example the code below parses a set of declarations for the transform property. the second code block shows the structure of the returned object as it would be rendered in a developer tools console. const css = cssstylevalue.parse( 'transform', 'translate3d(10
px,10
px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification. working draft initial definition. ...
CSSUnitValue.CSSUnitValue() - Web APIs
the cssunitvalue() constructor creates a new cssunitvalue object which returns a new cssunitvalue object which represents values that contain a single unit type. for example, "42
px" would be represented by a cssnumericvalue. syntax var cssunitvalue = new cssunitvalue() parameters value returns a double indicating the number of units. unit returns a usvstring indicating the type of unit. examples the following shows a method of creating a csspositionvalue from individual cssunitvalue constructors. let pos = new csspositionvalue( new cssunitvalue(5, "
px"), new cssunitvalue(10, "
px")); specifications specification status comment css typed om level 1the definition of 'cssunitvalue' in that specification. working draft initial definition. ...
CSSUnitValue.unit - Web APIs
the cssunitvalue.unit read-only property of the cssunitvalue interface returns a usvstring indicating the type of unit. syntax var astring = cssunitvalue.unit; value a usvstring. examples the following creates a csspositionvalue from individual cssunitvalue constructors, then queries the cssunitvalue.unit. let pos = new csspositionvalue( new cssunitvalue( 5, "
px" ), new cssunitvalue( 10, "em" )); console.log( pos.x.unit ); // "
px" console.log( pos.y.unit ); // "em" specifications specification status comment css typed om level 1the definition of 'cssunitvalue.unit' in that specification. working draft initial definition. ...
CSSUnitValue.value - Web APIs
cssunitvalue.value property of the cssunitvalue interface returns a double indicating the number of units. syntax var cssunitvalue = cssunitvalue.value; cssunitvalue.value = cssunitvalue; value a double. examples the following creates a csspositionvalue from individual cssunitvalue constructors, then queries the cssunitvalue.value. let pos = new csspositionvalue( new cssunitvalue( 5, "
px" ), new cssunitvalue( 10, "
px" )); console.log( pos.x.value ); // 5 console.log( pos.y.value ); // 10 specifications specification status comment css typed om level 1the definition of 'cssunitvalue.value' in that specification. working draft initial definition. ...
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
nstructor creates a new cssunparsedvalue object which represents property values that reference custom properties. syntax var cssunparsedvalue = new cssunparsedvalue(members) parameters members an array whose values must be either a usvstring or a cssvariablereferencevalue. examples let value = new cssunparsedvalue( ['4deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45
px'] ); console.log( value ); // cssunparsedvalue {0: "4deg", length: 1} console.log( values ); // cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45
px", length: 3} specifications specification status comment css typed om level 1the definition of 'cssunparsedvalue' in that specification. working draft initial definition. ...
CSSUnparsedValue.length - Web APIs
the length read-only property of the cssunparsedvalue interface returns the number of items in the object. syntax var length = cssunparsedvalue.length; value an integer. examples in this example we employ the cssunparsedvalue.cssunparsedvalue() constructor, then query the length: let values = new cssunparsedvalue( ['1em', '#445566', '-45
px'] ); console.log( values.length ) // 3 specifications specification status comment css typed om level 1the definition of 'length' in that specification. working draft initial definition. ...
Determining the dimensions of elements - Web APIs
lelement.offsetheight properties. most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any transforms applied to the element. in case of transforms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height. as an example, if the element has width: 100
px; and transform: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100. what's the size of the displayed content? if you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the element.clientwidth and element.clientheight properties: how big...
Managing screen orientation - Web APIs
nulla ultricies. in ac est dolor, quis tincidunt leo. cras commodo quam non tortor consectetur eget rutrum dolor ultricies. ut interdum tristique dapibus. ...
CanvasPattern.setTransform() - Web APIs
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:120
px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var text...
CanvasRenderingContext2D.addHitRegion() - Web APIs
ble 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:250
px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas")...
CanvasRenderingContext2D.direction - Web APIs
as appropriate. default value. the default value is "inherit". examples changing text direction this example draws two pieces of text. the first one is left-to-right, and the second is right-to-left. note that "hi!" in ltr becomes "!hi" in rtl. html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48
px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification. living standard ...
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
; } // focus button2, if appropriate drawbutton(button2, 20, 80); if (ctx.ispointinpath(x, y)) { button2.focus(); } } function drawbutton(el, x, y) { const active = document.activeelement === el; const width = 150; const height = 40; // button background ctx.fillstyle = active ? 'pink' : 'lightgray'; ctx.fillrect(x, y, width, height); // button text ctx.font = '15
px sans-serif'; ctx.textalign = 'center'; ctx.textbaseline = 'middle'; ctx.fillstyle = active ? 'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status commen...
CanvasRenderingContext2D.font - Web APIs
the canvasrenderingcontext2d.font property of the canvas 2d api specifies the current text style to use when drawing text. this string uses the same syntax as the css font specifier. syntax ctx.font = value; options value a domstring parsed as css font value. the default font is 10
px sans-serif. examples using a custom font in this example we use the font property to specify a custom font weight, size, and family. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48
px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas. let f = ...
CanvasRenderingContext2D.getTransform() - Web APIs
first one's context using canvasrenderingcontext2d.settransform() and draw a square on it, then retrieve the matrix from it using gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it. ...
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
canvasrenderingcontext2d.quadraticcurveto() method of the canvas 2d api adds a quadratic bézier curve to the current sub-path. it requires two points: the first one is a control point and the second one is the end point. the starting point is the latest point in the current path, which can be changed using moveto() before creating the quadratic bézier curve. syntax void ctx.quadraticcurveto(c
px, cpy, x, y); parameters c
px the x-axis coordinate of the control point. cpy the y-axis coordinate of the control point. x the x-axis coordinate of the end point. y the y-axis coordinate of the end point. examples how quadraticcurveto works this example shows how a quadratic bézier curve is drawn. html <canvas id="canvas"></canvas> javascript const canvas = document.getelemen...
CanvasRenderingContext2D.scale() - Web APIs
"hello world!" are flipped horizontally. note that the call to filltext() specifies a negative x coordinate. this is to adjust for the negative scaling factor: -280 * -1 becomes 280, and text is drawn leftwards from that point. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48
px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification. living standard ...
CanvasRenderingContext2D.setTransform() - Web APIs
of settransform() and draw a square on it, then retrieve the matrix from it using canvasrenderingcontext2d.gettransform(). we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform() (i.e. the second type), and draw a circle on it. ...
CanvasRenderingContext2D - Web APIs
) returns the current line dash pattern array containing an even number of non-negative numbers. canvasrenderingcontext2d.setlinedash() sets the current line dash pattern. canvasrenderingcontext2d.linedashoffset specifies where to start a dash array on a line. text styles the following properties control how text is laid out. canvasrenderingcontext2d.font font setting. default value 10
px sans-serif. canvasrenderingcontext2d.textalign text alignment setting. possible values: start (default), end, left, right, center. canvasrenderingcontext2d.textbaseline baseline alignment setting. possible values: top, hanging, middle, alphabetic (default), ideographic, bottom. canvasrenderingcontext2d.direction directionality. possible values: ltr, rtl, inherit (default). fill and stroke...
Applying styles and colors - Web APIs
is fully-transparent black. note: shadows are only drawn for source-over compositing operations. a shadowed text example this example draws a text string with a shadowing effect. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.shadowoffsetx = 2; ctx.shadowoffsety = 2; ctx.shadowblur = 2; ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)'; ctx.font = '20
px times new roman'; ctx.fillstyle = 'black'; ctx.filltext('sample string', 5, 30); } <canvas id="canvas" width="150" height="80"></canvas> draw(); screenshotlive sample we will look at the font property and filltext method in the next chapter about drawing text. canvas fill rules when using fill (or clip and ispointinpath) you can optionally provide a fill rule algorithm by which to de...
Basic usage of canvas - Web APIs
p the example concise. <!doctype html> <html> <head> <meta charset="utf-8"/> <title>canvas tutorial</title> <script type="text/javascript"> function draw() { var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); } } </script> <style type="text/css"> canvas { border: 1
px solid black; } </style> </head> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html> the script includes a function called draw(), which is executed once the page finishes loading; this is done by listening for the load event on the document. this function, or one like it, could also be called using window.settimeout(), window.setinterva...
Transformations - Web APIs
in shapes being drawn twice as large. a scale example in this last example, we'll draw shapes with different scaling factors. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw a simple rectangle, but scale it. ctx.save(); ctx.scale(10, 3); ctx.fillrect(1, 10, 10, 10); ctx.restore(); // mirror horizontally ctx.scale(-1, 1); ctx.font = '48
px serif'; ctx.filltext('mdn', -135, 120); } <canvas id="canvas" width="150" height="150"></canvas> draw(); screenshotlive sample transforms finally, the following transformation methods allow modifications directly to the transformation matrix. transform(a, b, c, d, e, f) multiplies the current transformation matrix with the matrix described by its arguments. the transformation matri...
Using images - Web APIs
> <td><img src="https://udn.realityripple.com/samples/6e/d8d545e955.jpg"></td> <td><img src="https://udn.realityripple.com/samples/b7/86ecdc3e8d.jpg"></td> </tr> </table> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </body> </html> and here's some css to make things look nice: body { background: 0 -100
px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4f191a; margin: 10
px; } img { display: none; } table { margin: 0 auto; } td { padding: 15
px; } tying it all together is the javascript to draw our framed images: function draw() { // loop through all images for (var i = 0; i < document.images.length; i++) { // don't add a canvas for the frame image i...
console - Web APIs
bob. you've called me 2 times. [13:14:13.485] hello, bob. you've called me 3 times. [13:14:13.487] hello, bob. you've called me 4 times. [13:14:13.488] hello, bob. you've called me 5 times. styling console output you can use the %c directive to apply a css style to console output: console.log("this is %cmy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2
px"); the text before the directive will not be affected, but the text after the directive will be styled using the css declarations in the parameter. the properties usable along with the %c syntax are as follows (at least, in firefox — they may differ in other browsers): background and its longhand equivalents. border and its longhand equivalents border-radius box-decoration-break box-...
DOMMatrixReadOnly - Web APIs
ns. these are aliases for specific components of a 4×4 matrix, as shown below. 2d 3d equivalent a m11 b m12 c m21 d m22 e m41 f m42 methods this interface doesn't inherit any methods. none of the following methods alter the original matrix. dommatrixreadonly.fli
px() returns a new dommatrix created by flipping the source matrix around its x-axis. this is equivalent to multiplying the matrix by dommatrix(-1, 0, 0, 1, 0, 0). the original matrix is not modified. dommatrixreadonly.flipy() returns a new dommatrix created by flipping the source matrix around its y-axis. this is equivalent to multiplying the matrix by dommatrix(1, 0, 0, -1, 0, 0). the origina...
DataTransfer.items - Web APIs
drag operation, one list item for each object being dragged. if the drag operation had no data, the list is empty. example this example shows the use of the items and types properties. ...
FileReader: progress event - Web APIs
name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; border: 1
px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const fileinput = document.queryselector('...
FileSystemDirectoryReader.readEntries() - Web APIs
lf, 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. #dropzone { text-align: center; width: 300
px; height: 100
px; margin: 10
px; padding: 10
px; border: 4
px dashed red; border-radius: 10
px; } #boxtitle { display: table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300
px; height: 100
px; } body { font: 14
px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. th...
FontFaceSet.check() - Web APIs
the check() method of the fontfaceset returns whether all fonts in the given font list have been loaded and are available. syntax bool = afontfaceset.check(font); bool = afontfaceset.check(font, text); returns a boolean that is true if the font list is available parameters font: a font specification using the css value syntax, e.g. "italic bold 16
px roboto" text: limit the font faces to those whose unicode range contains at least one of the characters in text. this does not check for individual glyph coverage. examples document.fonts.check("12
px courier"); // returns true if the font courier is available at 12
px document.fonts.check("12
px myfont", "ß"); // returns true if the font 'myfont' has a ß character. specifications specification status comment ...
Using the Geolocation API - Web APIs
at describes what the error code means. you could use it like so: function errorcallback(error) { alert(`error(${error.code}): ${error.message}`); }; examples in the following example the geolocation api is used to retrieve the user's latitude and longitude. if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location. ...
Geolocation API - Web APIs
positionoptions represents an object containing options to pass in as a parameter of geolocation.getcurrentposition() and geolocation.watchposition(). examples in the following example the geolocation api is used to retrieve the user's latitude and longitude. if sucessful, the available hyperlink is populated with an openstreetmap.org url that will show their location. ...
GlobalEventHandlers.onpointerdown - Web APIs
hey lift the stylus or finger from the screen). in addition, the event's preventdefault() method is called to ensure that the mouseup event isn't triggered unnecessarily. 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. #target { width: 400
px; height: 30
px; text-align: center; font: 16
px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2
px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for...
HTMLElement: animationcancel event - Web APIs
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: 1
px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselec...
HTMLElement: animationend event - Web APIs
('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: 1
px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.
HTMLElement: animationiteration event - Web APIs
${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: 1
px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselec...
HTMLElement: animationstart event - Web APIs
nimation 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: 1
px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselec...
HTMLImageElement.border - Web APIs
rawn. the default value of border is 0 usage notes do not use border. it is obsolete. instead, use the css border property and its longhand properties to establish borders around images. for example, if you have the following html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2
px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2
px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification. living standard html 4.01 specificationthe definition of '...
HTMLImageElement.x - Web APIs
zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2
px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1
px solid rgb(100, 100, 100); padding: 10
px 14
px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification. working draft ...
HTMLImageElement.y - Web APIs
zero-based offset). from there, we can get the <img> element itself from the cell by calling queryselector() on the htmltablecellelement representing that cell. finally, we can look up and display the values of the htmlimageelement's x and y properties. css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2
px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1
px solid rgb(100, 100, 100); padding: 10
px 14
px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification. working draft ...
HTMLInputElement.stepDown() - Web APIs
istener('click', function() { stepondown();} ); function stepondown() { let input = document.getelementbyid('thenumber'); let val = document.getelementbyid('decrementer').value; if (val) { /* increment with a parameter */ input.stepdown(val); } else { /* or without a parameter. try it with 0, 5, -2, etc. */ input.stepdown(); } } css input:invalid { border: red solid 3
px; } result note if you don't pass a parameter to the stepdown() method, it defaults to 1. any other value is a multiplier of the step attribute value, which in this case is 5. if we pass 4 as the stepdecrement, the input will stepdown by 4 * 5, or 20. if the parameter is 0, the number will not be decremented. the stepdown() method will not allow the input to go out of range, in this case stopp...
HTMLInputElement.stepUp() - Web APIs
hebutton') button.addeventlistener('click', function() { steponup() }) function steponup() { let input = document.getelementbyid('thenumber') let val = document.getelementbyid('incrementer').value if (val) { /* increment with a parameter */ input.stepup(val) } else { /* or without a parameter. try it with 0 */ input.stepup() } } css input:invalid { border: red solid 3
px; } result note if you don't pass a parameter to the stepup method, it defaults to 1. any other value is a multiplier of the step attribute value, which in this case is 5. if you pass 4 as the stepincrement, the input will stepup by 4 * 5, or 20. if the parameter is 0, the number will not be incremented. the stepup will not allow the input to out of range, in this case stopping when it reaches...
HTMLMediaElement: loadstart event - Web APIs
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: 1
px 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 { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } js const loadvideo = document.queryselector('button'); const vi...
HTMLMediaElement: progress event - Web APIs
t 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: 1
px 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 { grid-area: video; } .event-log { grid-area: log; } .event-log>label { display: block; } javascript const loadvideo = document.queryselector('button'); ...
Drag Operations - Web APIs
n icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. this mouse pointer feedback is sufficient in many cases. however, you can also update the user interface with an insertion point or highlight as needed. for simple highlighting, you can use the :-moz-drag-over css pseudoclass on a drop target. .droparea:-moz-drag-over { outline: 1
px solid black; } in this example, the element with the class droparea will receive a 1 pixel black outline while it is a valid drop target, that is, if the preventdefault() method was called during the dragenter event. note: you must cancel the dragenter event for this pseudoclass to apply, as this state is not checked for the dragover event. for more complex visual effects, you can also perf...
File drag and drop - Web APIs
clude 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. in this example, the drop target element uses the following styling: #drop_zone { border: 5
px solid blue; width: 200
px; height: 100
px; } note that dragstart and dragend events are not fired when dragging a file into the browser from the os. process the drop the drop event is fired when the user drops the file(s). in the following drop handler, if the browser supports datatransferitemlist interface, the getasfile() method is used to access each file; otherwise the datatransfer i...
Dragging and Dropping Multiple Items - Web APIs
" + 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: 100
px; white-space: pre; border: 1
px solid black;" ondragenter="document.getelementbyid('output').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dragenter and ...
ImageCapture - Web APIs
sole.log(error)); } function ontakephotobuttonclick() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { const canvas = document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcomputedstyle(canvas).width.split('
px')[0]; canvas.height = getcomputedstyle(canvas).height.split('
px')[0]; let ratio = math.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, ...
InputEvent.inputType - Web APIs
ut that was made. there are many possible values, such as inserttext, deletecontentbackward, insertfrompaste, and formatbold. for a complete list of the available input types, see the attributes section of the input events level 1 spec. 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: 20
px;padding: 20
px;border:2
px 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...
IntersectionObserver.IntersectionObserver() - Web APIs
gin a string which specifies a set of offsets to add to the root's bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the syntax is approximately the same as that for the css margin property; see the root element and root margin in intersection observer api for more information on how the margin works and the syntax. the default is "0
px 0
px 0
px 0
px". threshold either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. a value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. see thresholds in intersection observer api for a more in-depth descr...
IntersectionObserver.root - Web APIs
laps the target element, is considered to be the visible area of the target element. if root is null, then the owning document is used as the root, and the bounds its viewport (that is, the visible area of the document) are used as the root bounds. example this example sets the border of the intersection observer's root element to be a 2-pixel medium green line. observer.root.style.border = "2
px solid #44aa44"; specifications specification status comment intersection observerthe definition of 'intersectionobserver' in that specification. working draft initial definition ...
IntersectionObserver.rootMargin - Web APIs
to the corresponding values in the root's bounding box before the intersection between the resulting rectangle and the target element's bounds. the string returned by this property may not match the one specified when the intersectionobserver was instantiated. the browser is permitted to alter the values if rootmargin isn't specified when the object was instantiated, it defaults to the string "0
px 0
px 0
px 0
px", meaning that the intersection will be computed between the root element's unmodified bounds rectangle and the target's bounds. the root element and root margin in intersection observer api describes how the rootmargin is used in more detail. specifications specification status comment intersection observerthe definition of 'intersectionobserver.rootmargin'...
IntersectionObserver - Web APIs
intersectionobserver.rootmargin read only an offset rectangle applied to the root's bounding box when calculating intersections, effectively shrinking or growing the root for calculation purposes. the value returned by this property may not be the same as the one specified when calling the constructor as it may be changed to match internal requirements. each offset can be expressed in pixels (
px) or as a percentage (%). the default is "0
px 0
px 0
px 0
px". intersectionobserver.thresholds read only a list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. notifications for a target are generated when any of the thresholds are crossed for that target. if no value was passed to the constructor, ...
KeyframeEffectOptions - Web APIs
me, and how to behave when the animation begins and ends. properties composite optional determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. defaults to replace. add dictates an additive effect, where each successive iteration builds on the last. for instance with transform, a translatex(-200
px) would not override an earlier rotate(20deg) value but result in translatex(-200
px) rotate(20deg). accumulate is similar but a little smarter: blur(2) and blur(5) become blur(7), not blur(2) blur(5). replace overwrites the previous value with the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or ...
MediaDevices.getSupportedConstraints() - Web APIs
sting the constraints supported by the user agent. because only constraints supported by the user agent are included in the list, each of these boolean properties has the value true. example this example outputs a list of the constraints supported by your browser. ...
MediaDevices - Web APIs
' + videotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); }; window.stream = stream; // make variable available to browser console video.srcobject = stream; }) .catch(function(error) { if (error.name === 'constraintnotsatisfiederror') { errormsg('the resolution ' + constraints.video.width.exact + 'x' + constraints.video.height.exact + '
px is not supported by your device.'); } else if (error.name === 'permissiondeniederror') { errormsg('permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order for the demo to work.'); } errormsg('getusermedia error: ' + error.name, error); }); function errormsg(msg, error) { errorelement.innerht...
MediaTrackSupportedConstraints.width - Web APIs
onstraintsdictionary.width; value this property is present in the dictionary (and its value is always true) if the user agent supports the width constraint. if the property isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value. example html content <div id="result"> </div> css content #result { font: 14
px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status comment media capture and streamsthe definition of 'width' in that specification. ...
MouseEvent.pageX - Web APIs
gey</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". it has two <span> elements, one with the id "x" and one with the id "y". those will be updated each time an event occurs to contain the latest mouse coordinates relative to the page. css the css used for this example is shown below. .box { width: 400
px; height: 250
px; border: 2
px solid darkblue; background-color: blue; color: white; font: 16
px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status comment css object model (cssom) view modulethe definition of 'pagex' in that specification. working draft redefined from long to double. ...
Node.isConnected - Web APIs
); console.log(test.isconnected); // returns true shadow dom a shadow dom example: // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create some css to apply to the shadow dom var style = document.createelement('style'); console.log(style.isconnected); // returns false style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200
px; display: inline-block; border: 1
px solid black; padding: 10
px; background: white; border-radius: 10
px; opacity: 0; transition: 0.6s all; positions: absolute; bottom: 20
px; left: 10
px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // returns true polyfill node.isconnected can be polyfilled...
OffscreenCanvas.height - Web APIs
the height property returns and sets the height of an offscreencanvas object. syntax var
pxl = offscreen.height; offscreen.height =
pxl; examples creating a new offscreen canvas and returning or setting the height of the offscreen canvas: var offscreen = new offscreencanvas(256, 256); offscreen.height; // 256 offscreen.height = 512; specifications specification status comment html living standardthe definition of 'offscreencanvas.height' in that specification. living standard ...
OffscreenCanvas.width - Web APIs
the width property returns and sets the width of an offscreencanvas object. syntax var
pxl = offscreen.width; offscreen.width =
pxl; examples creating a new offscreen canvas and returning or setting the width of the offscreen canvas: var offscreen = new offscreencanvas(256, 256); offscreen.width; // 256 offscreen.width = 512; specifications specification status comment html living standardthe definition of 'offscreencanvas.width' in that specification. living standard ...
PannerNode.distanceModel - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode.maxDistance - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode.panningModel - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode.setOrientation() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode.setPosition() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode.setVelocity() - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PannerNode - Web APIs
valueattime(0, audioctx.currenttime); panner.orientationz.setvalueattime(0, audioctx.currenttime); } else { panner.setorientation(1,0,0); } var listener = audioctx.listener; if(listener.forwardx) { listener.forwardx.setvalueattime(0, audioctx.currenttime); listener.forwardy.setvalueattime(0, audioctx.currenttime); listener.forwardz.setvalueattime(-1, audioctx.currenttime); listener.u
px.setvalueattime(0, audioctx.currenttime); listener.upy.setvalueattime(1, audioctx.currenttime); listener.upz.setvalueattime(0, audioctx.currenttime); } else { listener.setorientation(0,0,-1,0,1,0); } var source; var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); var boombox = document.queryselector('.boom-box'); var listenerdata = document.queryselect...
PerformanceFrameTiming - Web APIs
osition: 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" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2
px" /><text x="111" y="30" font-size="12
px" 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 ...
RTCDtlsTransport - Web APIs
ock; 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="2
px" /><text x="81" y="30" font-size="12
px" 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 rtcicetranspo...
Range.extractContents() - Web APIs
actcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers. select one or more item, and then click "swap" to move them to the opposite container. ...
ResizeObserverEntry.borderBoxSize - Web APIs
ions, read handling different text directions. examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.target.style.borderradius = math.min(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
elliptical corners; this solution gives you nice square corners that scale with the box size. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.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.target - Web APIs
change, we make use of the target property of each entry — entry.target.style.borderradius. const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.contentboxsize) { entry.target.style.borderradius = math.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. ...
SVGFilterPrimitiveStandardAttributes - Web APIs
ive; 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="2
px" /><text x="181" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfilterprimitivestandardattributes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgfilterprimitivestandardattributes.x read only an svganimatedlength corresponding to the x attribute ...
SVGFontElement - Web APIs
lock; 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="2
px" /><text x="71" y="30" font-size="12
px" 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 svgexternalres...
SVGGlyphRefElement - Web APIs
; 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="2
px" /><text x="91" y="30" font-size="12
px" 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;} properties this interface also inherits properties from its parent, svgelement and implements properties from svgurireference and svgstyl...
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10
px; width: 100%; height: 90%; box-sizing: border-box; border: 1
px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status comment scalable vector graphic...
SVGGraphicsElement: paste event - Web APIs
?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10
px; width: 100%; height: 90%; box-sizing: border-box; border: 1
px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status comment scalable vector graphi...
SVGMatrix - Web APIs
transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotatefromvector() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. the rotation angle is determined by taking (+/-) atan(y/x). the direction of the vector (x, y) determines whether the positive or negative angle value is used. svgmatrix.fli
px() post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.flipy() post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.skewx() post-multiplies a skewx transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.skewy() post-multiplies a skewy transforma...
SVGMeshElement - Web APIs
lock; 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="2
px" /><text x="71" y="30" font-size="12
px" 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;} properties this interface doesn't implement any specific properties, but inherits properties from its parent interface, svggeometryelement, a...
SVGMissingGlyphElement - Web APIs
sition: 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="2
px" /><text x="111" y="30" font-size="12
px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="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 svgst...
SVGTRefElement - Web APIs
lock; 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="2
px" /><text x="71" y="30" font-size="12
px" 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 - Web APIs
lock; 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="2
px" /><text x="76" y="30" font-size="12
px" 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; pointer-events: all;} properties svgurireference.href read only an svganimatedstring that represents the value of the href attribute, and, on elements that ar...
Using the Screen Capture API - Web APIs
ls stopcapture() to terminate capture of screen contents. a <video> into which the captured screen contents are streamed. a <pre> block into which logged text is placed by the intercepted consolemethod. css the css is entirely cosmetic in this example. the video is given a border, and its width is set to occupy nearly the entire available horizontal space (width: 98%). max-width is set to 860
px to set an absolute upper limit on the video's size, the error, warn, and info classes are used to style the corresponding console output types. #video { border: 1
px solid #999; width: 98%; max-width: 860
px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; } result the final product looks like this. if your browser supports screen capture api, clicking...
ServiceWorkerRegistration.showNotification() - Web APIs
h the action. appropriate responses are built using event.action within the notificationclick event. badge: a usvstring containing the url of an image to represent the notification when there is not enough space to display the notification itself such as for example, the android notification bar. on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96
px, and the image will be automatically masked. body: a string representing an extra content to display within the notification. data: arbitrary data that you want to be associated with the notification. this can be of any data type. dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification.
Touch.radiusX - Web APIs
angle. <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'. src.style.width = touch.radiusx * 2 + '
px'; src.style.height = touch.radiusy * 2 + '
px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version. ...
Touch events - Web APIs
ints at a time, allowing the user to draw in a <canvas> with more than one finger at a time. it will only work on a browser that supports touch events. note: the text below uses the term "finger" when describing the contact with the surface, but it could, of course, also be a stylus or other contact method. create a canvas <canvas id="canvas" width="600" height="600" style="border:solid black 1
px;"> your browser does not support canvas element. </canvas> <br> log: <pre id="log" style="border: 1
px solid #ccc;"></pre> setting up the event handlers when the page loads, the startup() function shown below will be called. function startup() { var el = document.getelementbyid("canvas"); el.addeventlistener("touchstart", handlestart, false); el.addeventlistener("touchend", handleend, ...
UIEvent.layerX - Web APIs
cript type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1
px; padding: 20
px; } #d2 { position: absolute; top: 180
px; left: 80%; right:auto; width: 40%; border: solid blue 1
px; padding: 20
px; } #d3 { position: absolute; top: 240
px; left: 20%; width: 50%; border: solid blue 1
px; padding: 10
px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.<...
UIEvent.layerY - Web APIs
cript type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1
px; padding: 20
px; } #d2 { position: absolute; top: 180
px; left: 80%; right:auto; width: 40%; border: solid blue 1
px; padding: 20
px; } #d3 { position: absolute; top: 240
px; left: 20%; width: 50%; border: solid blue 1
px; padding: 10
px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.<...
UIEvent.pageY - Web APIs
ript type="text/javascript"> function showcoords(evt){ var form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1
px; padding: 20
px; } #d2 { position: absolute; top: 180
px; left: 80%; right:auto; width: 40%; border: solid blue 1
px; padding: 20
px; } #d3 { position: absolute; top: 240
px; left: 20%; width: 50%; border: solid blue 1
px; padding: 10
px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.<...
ValidityState.patternMismatch - Web APIs
with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, patternmismatch will be true. when true, the element matches the :invalid css pseudo-classes. input:invalid { border: red solid 3
px; } note, in this case, we get a patternmismatch not a validitystate.toolong or validitystate.tooshort if the values are too long or too short because it is the pattern that is dictating the length of the value. had we used minlength and maxlength attributes instead, we may have seen validitystate.toolong or validitystate.tooshort being true. note: the email input type requires, at minimum, a...
Clearing with colors - Web APIs
cal components for red, green, blue and alpha (opacity). therefore, clearcolor() takes four arguments. <p>a very simple webgl program that shows some color.</p> <!-- text within a canvas element is displayed only if canvas is not supported. --> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280
px; height : 210
px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope. we are giving the event // handler a name (setupwebgl) so that we can refer to the // function object within the function itself...
Scissor animation - Web APIs
nge it again when a new square is created. <p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280
px; height : 210
px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares. var gl, color = getrandomcolo...
Controlling multiple parameters with ConstantSourceNode - Web APIs
ybutton" 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 and g in the chord.</p> css .controls { width: 400
px; position: relative; vertical-align: middle; height: 44
px; } .button { font-size: 32
px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14
px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-...
Using IIR filters - Web APIs
ased on size const spacing = width/16; const fontsize = math.floor(spacing/1.5); // draw our axis canvasctx.linewidth = 2; canvasctx.strokestyle = 'grey'; canvasctx.beginpath(); canvasctx.moveto(spacing, spacing); canvasctx.lineto(spacing, height-spacing); canvasctx.lineto(width-spacing, height-spacing); canvasctx.stroke(); // axis is gain by frequency -> make labels canvasctx.font = fontsize+'
px sans-serif'; canvasctx.fillstyle = 'grey'; canvasctx.filltext('1', spacing-fontsize, spacing+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude ...
window.cancelAnimationFrame() - Web APIs
w.webkitrequestanimationframe || window.msrequestanimationframe; var cancelanimationframe = window.cancelanimationframe || window.mozcancelanimationframe; var start = window.mozanimationstarttime; // only supported in ff. other browsers can use something like date.now(). ...
Window.content - Web APIs
deprecated for a long time, and you should use content in any new code. 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 1
px"; specification none. see also working with windows in chrome code when accessing content documents from privileged code, be aware of xpcnativewrappers. ...
Window.pageYOffset - Web APIs
the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element. this will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum. this prevents us from falling off the edge of the document. nobody wants to know what's out there. there might be dragons. css iframe { width: 620
px; height: 450
px; border: 1
px solid black; } #info { margin-top: 20
px; font: 16
px "open sans", "helvetica", "arial"; } result the result follows. note that the frame's contents have been scrolled to show the section named "overview", and that the value of the pageyoffset property is shown with the corresponding value. specification specification status comment ...
CSS Box Alignment - CSS: Cascading Style Sheets
gap, row-gap, and column-gap properties. these properties enable the setting of a consistent gap between items in a row or column, in any layout method which has items arranged in this way. the gap property is a shorthand for row-gap and column-gap, which allows us to set these properties at once: row-gap column-gap gap in the below example, a grid layout uses the gap shorthand to set a 10
px gap between row tracks, and a 2em gap between column tracks. in this example i am using the grid-gap property in addition to gap. the gap properties were originally prefixed with grid- in the grid layout specification and some browsers only support these prefixed versions. grid-row-gap grid-column-gap grid-gap the prefixed versions will be maintained as an alias of the unprefixed ones, ...
Using multi-column layouts - CSS: Cascading Style Sheets
re et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #wid { column-width: 100
px; } result the exact details are described in the css3 specification. in a multi-column block, content is automatically flowed from one column into the next as needed. all html, css and dom functionality is supported within columns, as are editing and printing. the columns shorthand most of the time, a web designer will use one of the two css properties: column-count or column-width. as v...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
means that if you have a set of flex items that are too wide for their container, they will overflow it. if you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap, or use the shorthand flex-flow with values of row wrap or column wrap. items will then wrap in the container. in the next example i have ten items all with a flex-basis of 160
px and the ability to grow and shrink. once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. as the items can grow, they will expand larger than 160
px in order to fill each row completely. if there is only one item on the final line it will stretch to fill the entire l...
Block and inline layout in normal flow - CSS: Cascading Style Sheets
psing the spec explains that margins between block elements collapse. this means that if you have an element with a top margin immediately after an element with a bottom margin, rather than the total space being the sum of these two margins, the margin collapses, and so will essentially become as large as the larger of the two margins. in the example below, the paragraphs have a top margin of 20
px and a bottom margin of 40
px. the size of the margin between the paragraphs is 40
px as the smaller top margin on the second paragraph has collapsed with the larger bottom margin of the first. you can read more about margin collapsing in our article mastering margin collapsing. note: if you are not sure whether margins are collapsing, check the box model values in your browser devtools. this w...
In Flow and Out of Flow - CSS: Cascading Style Sheets
, in order to push the line boxes away from it. you cannot apply anything to the following in-flow content to achieve that. absolute positioning giving an item position: absolute or position: fixed removes it from flow, and any space that it would have taken up is removed. in the next example i have three paragraph elements, the second element has position absolute, with offset values of top: 30
px and right: 30
px. it has been removed from document flow. using position: fixed also removes the item from flow, however the offsets are based on the viewport rather than the containing block. when taking an item out of flow with positioning, you will need to manage the possibility of content overlapping. out of flow essentially means that the other elements on your page no longer know that el...
Variable fonts guide - CSS: Cascading Style Sheets
ple's css can be edited to allow you to play with font slant/oblique values. optical size this is something new to digital fonts and css, but is actually a centuries-old technique in designing and creating metal type. optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. if the size was very small (such as an equivalent to 10 or 12
px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that it would reproduce and be readable at a physically smaller size. conversely, when a much larger size was being used (like 48 or 60
px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent. while this was o...
Consistent list indentation - CSS: Cascading Style Sheets
nt. finding consistency boil it all down, and what we're left with is this: if you want consistent rendering of lists between gecko, internet explorer, and opera, you need to set both the left margin and left padding of the <ul> element. we can ignore <li> altogether for these purposes. if you want to reproduce the default display in netscape 6.x, you write: ul {margin-left: 0; padding-left: 40
px;} if you're more interested in following the internet explorer/opera model, then: ul {margin-left: 40
px; padding-left: 0;} of course, you can fill in your own preferred values. set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. if you want to reset lists to have no indentation, then you still have to zero out both padding and margin: ul {m...
CSS Motion Path - CSS: Cascading Style Sheets
simple movements. with offset-path you can define a specific path of any shape you want. you then animate it along that path by animating offset-distance, and can choose to rotate it at any point using offset-rotate. basic example <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40
px; height: 40
px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-position offset-rotate specifications specification status comment motion path module level 1 working draft initial definition. ...
CSS Scrollbars - CSS: Cascading Style Sheets
css scrollbars standardizes the obsolete scrollbar color properties introduced in 2000 by windows ie 5.5. basic example in this example we have chosen to use a thin scrollbar, with a green track and purple thumb. .scroller { width: 300
px; height: 100
px; 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 endive gumbo gourd. parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. dandelion cucumber earthnut pea peanut soko zucchini. </div> result reference css properties scrollbar-width scrollb...
Using the :target pseudo-class in selectors - CSS: Cascading Style Sheets
target of a url, but do not want any other kind of element to get a target style. this is simple enough: h2:target { font-weight: bold; } it's also possible to create styles that are specific to a particular fragment of the document. this is done using the same identifying value that is found in the uri. thus, to add a border to the #example fragment, we would write: #example:target { border: 1
px solid black; } targeting all elements if the intent is to create a "blanket" style that will apply to all targeted elements, then the universal selector comes in handy: :target { color: red; } example in the following example, there are five links that point to elements in the same document. selecting the "first" link, for example, will cause <h1 id="one"> to become the target element. note...
Overview of CSS Shapes - CSS: Cascading Style Sheets
his with shapes, however you will still need a floated item, which you can then make invisible. that could be a redundant element inserted into the document, an empty <div> or <span> perhaps, but our preference is to use generated content. this means we can keep things used for styling inside the css. in this next example, we use generated content to insert an element with height and width of 150
px. we can then use basic shapes, box values or even the alpha channel of an image to create a shape for the text to wrap around. relationship to clip-path the basic shapes and box values used to create shapes are the same as those used as values for clip-path. therefore if you want to create a shape using an image, and also clip away part of that image, you can use the same values. the image b...
CSS Text Decoration - CSS: Cascading Style Sheets
t-indent text-rendering text-shadow text-transform white-space word-spacing guides none. examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration: solid underline purple 4
px; } .blink { text-decoration: blink; } <p class="under">this text has a line underneath it.</p> <p class="over">this text has a line over it.</p> <p class="line">this text has a line going through it.</p> <p>this <a class="plain" href="#">link will not be underlined</a>, as links generally are by default. be careful when removing the text decoration on anchors since users often depend...
Class selectors - CSS: Cascading Style Sheets
es both "spacious" and "elegant" */ /* for example, class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } syntax .class_name { style properties } note that this is equivalent to the following attribute selector: [class~=class_name] { style properties } examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4
px 4
px 3
px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status comment selectors level 4the definition of 'class sel...
ID selectors - CSS: Cascading Style Sheets
the css id selector matches an element based on the value of the element’s id attribute. in order for the element to be selected, its id attribute must match exactly the value given in the selector. /* the element with id="demo" */ #demo { border: red 2
px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification. working draft ...
Card - CSS: Cascading Style Sheets
hen added to a collection of cards, the cards should line up in two dimensions. recipe download this example choices made the card is laid out using css grid layout despite being a single dimensional layout, as it enables the use of content sizing for the grid tracks. when setting up the single column grid i use the following: .card { display: grid; grid-template-rows: max-content 200
px 1fr; } the heading track is set to max-content, which prevents it from stretching. i have decided that i want my image to live within a track that is 200 pixels tall. i then set the next track — which is where the content lives — to 1fr. this means it will take up any additional space. if the track does have a footer it will be auto-sized, as rows created in the implicit grid are auto-size...
Grid wrapper - CSS: Cascading Style Sheets
shrinks in response to its context. the outer two columns have a maximum size of 1fr, meaning that they will each expand to fill the remaining available space in the grid container. ...
Pagination - CSS: Cascading Style Sheets
fy-content property. the list itself also becomes a flex container to lay the items out as a row. to space the items out we will use a margin on the flex items. alternative methods once the column-gap property has implementation in browsers this could be used instead of margins to space out the items. .pagination { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2
px; } accessibility concerns we want to ensure that a person using a screenreader understands what this navigation does, and where they will go when clicking a link. to help with this we have added aria-label="pagination" on the <nav> element. we have also added some additional content that would be read by a screenreader but is hidden visually, and set the aria-hidden attribute on the paging a...
Privacy and the :visited selector - CSS: Cascading Style Sheets
rties) column-rule-color outline-color the color parts of the fill and stroke attributes in addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. here is an example of how to use styles with the aforementioned restrictions: :link { outline: 1
px dotted blue; background-color: white; /* the default value of background-color is `transparent`. you need to specify a different value, otherwise changes on :visited won't apply. */ } :visited { outline-color: orange; /* visited links have an orange outline */ background-color: green; /* visited links have a green background */ color: yellow; /* visited links have y...
Selector list - CSS: Cascading Style Sheets
syntax element, element, element { style properties } examples single line grouping grouping selectors in a single line using a comma-separated lists. h1, h2, h3, h4, h5, h6 { font-family: helvetica; } multi line grouping grouping selectors in a multiple lines using a comma-separated lists. ...
Cubic Bezier Generator - CSS: Cascading Style Sheets
ass='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </form> </html> .field { width: 40
px; } function updatecanvas() { var x1 = document.getelementbyid('x1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5...
Universal selectors - CSS: Cascading Style Sheets
bination with namespaces: ns|* - matches all elements in namespace ns *|* - matches all elements |* - matches all elements without any declared namespace syntax * { style properties } the asterisk is optional with simple selectors. for instance, *.warning and .warning are equivalent. examples css * [lang^=en] { color: green; } *.warning { color: red; } *#maincontent { border: 1
px solid blue; } .floating { float: left } /* automatically clear the next sibling after a floating element */ .floating + * { clear: left; } html <p class="warning"> <span lang="en-us">a green span</span> in a red paragraph. </p> <p id="maincontent" lang="en-gb"> <span class="warning">a red span</span> in a green paragraph. </p> result specifications specification stat...
Value definition syntax - CSS: Cascading Style Sheets
in. double bar separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. typically this is used to define the different values of a shorthand property. <'border-width'> || <'border-style'> || <'border-color'> this example matches the following values: 1em solid blue blue 1em solid 1
px yellow but not: blue yellow, as a component must appear at most one single time. bold, as it isn't a keyword allowed as value of any of the entity. note: the double ampersand has precedence over the double bar, meaning that bold || thin && <length> is equivalent to bold || [ thin && <length> ]. it describes bold, thin <length>, bold thin <length>, or thin <length> bold but not <length> b...
animation-fill-mode - CSS: Cascading Style Sheets
mple. it demonstrates how, for an animation that runs for an infinite time, you can cause it to remain in its final state rather than reverting to the original state (which is the default). 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: 100
px solid #ccc; height: 300
px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40
px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples. specifications specification status comment ...
background-blend-mode - CSS: Cascading Style Sheets
n> <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>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300
px; height: 300
px; 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.get...
background-color - CSS: Cascading Style Sheets
is high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminance of the text and background color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66
px and bold or larger, or 24
px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color formal syntax <color>w...
border-block-color - CSS: Cascading Style Sheets
nd-color. syntax values <'color'> the color of the border. see color. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 10
px solid blue; border-block-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification. editor's draft initial definition ...
border-block-end-color - CSS: Cascading Style Sheets
s of the element. values <'color'> the color of the border. see 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 10
px solid blue; border-block-end-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification. editor's draft initial definition ...
border-block-end-style - CSS: Cascading Style Sheets
ement. values <'border-style'> the line style of the border. see border-style. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 5
px solid blue; border-block-end-style: dashed; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification. editor's draft initial definition ...
border-block-start-color - CSS: Cascading Style Sheets
other border colors of the element. 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: 120
px; height: 120
px; } .exampletext { writing-mode: vertical-lr; border: 10
px solid blue; border-block-start-color: red; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification. editor's draft initial definition ...
border-top-style - CSS: Cascading Style Sheets
b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2
px; background-color: #52e385; } tr, td { padding: 3
px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-...
box-decoration-break - CSS: Cascading Style Sheets
ground-repeat: no-repeat may nevertheless repeat multiple times. formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8
px 8
px 10
px 0
px deeppink, -5
px -5
px 5
px 0
px blue, 5
px 5
px 15
px 0
px yellow; padding: 0em 1em; border-radius: 16
px; border-style: solid; margin-left: 10
px; font: 24
px sans-serif; line-height: 2; } ... <span class="example">the<br>quick<br>orange fox</span> ... results in: adding box-decoration-break: clone to the above styles: -webkit-box-decoration-break: clone; box-decorati...
box-flex - CSS: Cascading Style Sheets
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: 1
px solid black; width: 100%; } div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla */ -webkit-box-flex: 1; /* webkit */ border: 1
px solid black; } div.example > p:nth-child(2) { -moz-box-flex: 0; /* mozilla */ -webkit-box-flex: 0; /* webkit */ border: 1
px solid black; } </style> </he...
color-adjust - CSS: Cascading Style Sheets
desired appearance in any rendering environment, including on paper, so we also use color-adjust: exact to tell the browser not to make color or style adjustments to the box when rendering it. 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: 24
px "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. editor's draft initial definition. ...
color - CSS: Cascading Style Sheets
s high enough that people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminosity of the text and background color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66
px and bold or larger, or 24
px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements. it also applies to ::first-letter and ::first-line.inheritedyescomputed valueif the value is translucent, the comp...
column-fill - CSS: Cascading Style Sheets
inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns. the css `column-fill` property is used to spread the contents evenly across all the columns. </p> css .content-box { column-count: 4; column-rule: 1
px solid black; column-fill: balance; } result specifications specification status comment css multi-column layout modulethe definition of 'column-fill' in that specification. working draft initial definition. ...
column-rule-width - CSS: Cascading Style Sheets
multi-column layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* <length> values */ column-rule-width: 1
px; column-rule-width: 2.5em; /* global values */ column-rule-width: inherit; column-rule-width: initial; column-rule-width: unset; the column-rule-width property is specified as a single <'border-width'> value. values <'border-width'> is a keyword defined by border-width describing the width of the rule. it may be either a <length> or one of the thin, medium, or thick keywords. formal defi...
Computed value - CSS: Cascading Style Sheets
values inherit, initial, unset, and revert. doing the computation needed to reach the value described in the "computed value" line in the property's definition table. the computation needed to reach a property's computed value typically involves converting relative values (such as those in em units or percentages) to absolute values. for example, if an element has specified values font-size: 16
px and padding-top: 2em, then the computed value of padding-top is 32
px (double the font size). however, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. additionally, unitless numbers specified on the line-height property ...
content - CSS: Cascading Style Sheets
e content */ color: red; } result images and element attributes this example inserts an image before each link, and adds its id attribute after. html <ul> <li><a id="moz" href="http://www.mozilla.org/"> mozilla home page</a></li> <li><a id="mdn" href="https://developer.mozilla.org/"> mozilla developer network</a></li> </ul> css a { text-decoration: none; border-bottom: 3
px dotted navy; } a::after { content: " (" attr(id) ")"; } #moz::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico"); } #mdn::before { content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png"); } li { margin: 1em; } result element replacement this example replaces an element's content with an image. you can replace the contents of an elemen...
cross-fade() - CSS: Cascading Style Sheets
-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: 300
px; height: 300
px; 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.org/files/8545/tr.png'), 75%); } result specificat...
<dimension> - CSS: Cascading Style Sheets
the <dimension> css data type represents a <number> with a unit attached to it, for example 10
px. css uses dimensions to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities. syntax the syntax of <dimension> is a <number> immediately followed by a unit which is an identifier. unit identifiers are case insensitive. examples valid dimensions 12
px 12 pixels 1rem 1 rem 1.2pt 1.2 points 2200ms 2200 milliseconds 5s 5 seconds 200hz 200 hertz 200hz 200 hertz (values are case insensitive) invalid dimensions 12
px the unit must come immediately after the number. 12"
px" units are identifiers and therefore unquoted. 3sec the seconds unit is abbreviated "s" not "sec". spe...
<display-inside> - CSS: Cascading Style Sheets
that the box created on the grid container would be a block level box. examples in this example the parent box has been given display: flow-root and so establishes a new bfc and contains the floated item. 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: 5
px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200
px; height: 150
px; background-color: white; border:1
px solid black; padding: 10
px; } result specifications specification status css display module level 3the definition of 'display-inside' in that specification. candidate recommendation ...
<display-internal> - CSS: Cascading Style Sheets
g example demonstrates laying out a simple form using css table layout. 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: 5
px; } result specifications specification status css display module level 3the definition of 'display-internal' in that specification. candidate recommendation ...
<display-outside> - CSS: Cascading Style Sheets
d expect that the children of that element would participate in block and inline normal flow layout. examples in the following example, span elements (normally displayed as inline elements) are set to display: block and so break onto new lines and expand to fill their container in the inline dimension. html <span>span 1</span> <span>span 2</span> css span { display: block; border: 1
px solid rebeccapurple; } result specifications specification status css display module level 3the definition of 'display-outside' in that specification. candidate recommendation ...
display - CSS: Cascading Style Sheets
y"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1
px; padding-top: 10
px; } article { background-color: red; } article span { background-color: black; color: white; margin: 1
px; } article, span { padding: 10
px; border-radius: 7
px; } article, div { margin: 20
px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((a...
empty-cells - CSS: Cascading Style Sheets
recommendation initial definition. browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contribute to the data, please check out ht...
blur() - CSS: Cascading Style Sheets
s the radius of the blur, specified as a <length>. it defines the value of the standard deviation to the gaussian function, i.e., how many pixels on the screen blend into each other; thus, a larger value will create more blur. a value of 0 leaves the input unchanged. the lacuna value for interpolation is 0. examples setting a blur with pixels and with rem blur(0) /* no effect */ blur(8
px) /* blur with 8
px radius */ blur(1.17rem) /* blur with 1.17rem radius */ specifications specification status filter effects module level 1the definition of 'blur()' in that specification. working draft ...
drop-shadow() - CSS: Cascading Style Sheets
gth>. the larger the value, the larger and more blurred the shadow becomes. if unspecified, it defaults to 0, resulting in a sharp, unblurred edge. negative values are not allowed. color (optional) the color of the shadow, specified as a <color>. if unspecified, the value of the color property is used. examples setting a drop shadow using pixel offsets and blur radius /* black shadow with 10
px blur */ drop-shadow(16
px 16
px 10
px black) setting a drop shadow using rem offsets and blur radius /* reddish shadow with 1rem blur */ drop-shadow(.5rem .5rem 1rem #e23) specifications specification status filter effects module level 1the definition of 'drop-shadow()' in that specification. working draft ...
flex-direction - CSS: Cascading Style Sheets
<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: 200
px; height: 200
px; border: 1
px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50
px; height: 50
px; } #content1 { width: 200
px; height: 200
px; border: 1
px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50
px; height: 50
px; } result specifications specification status comment css fle...
flex-wrap - CSS: Cascading Style Sheets
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 24
px/100
px sans-serif; height: 150
px; text-align: center; } .content div, .content1 div, .content2 div { height: 50%; width: 300
px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2...
float - CSS: Cascading Style Sheets
>2</div> <div class="right">3</div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vulputate. donec id iaculis velit. aliquam vel malesuada erat. praesent non magna ac massa aliquet tincidunt vel in massa. phasellus feugiat est vel leo finibus congue.</p> </section> css section { border: 1
px solid blue; width: 100%; float: left; } div { margin: 5
px; width: 50
px; height: 150
px; } .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. for instance, you may want paragraphs to remain adjacent to floats, but force headings to be on their...
font-optical-sizing - CSS: Cascading Style Sheets
none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized. this is the default across browsers.</p> <p class="no-optical-sizing">this paragraph is not optically sized. you should see a difference in supporting browsers.</p> @font-face { src: url('amstelvaralpha-vf.ttf'); font-family:'amstelvar'; font-style: normal; } p { font-size: 36
px; font-family: amstelvar; } .no-optical-sizing { font-optical-sizing: none; } note: the font referenced above — which includes optical sizing and is freely-licensed — is good for testing. you can download it on github. specifications specification status comment css fonts module level 4the definition of 'font-optical-sizing' in that specification. worki...
font-style - CSS: Cascading Style Sheets
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-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150
px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label...
font-weight - CSS: Cascading Style Sheets
ed 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 { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150
px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = d...
grid-auto-flow - CSS: Cascading Style Sheets
<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 { height: 200
px; width: 200
px; display: grid; grid-gap: 10
px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-col...
hyphens - CSS: Cascading Style Sheets
d lang="en" class="none">an extreme­ly long english word</dd> <dt><code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)</dt> <dd lang="en" class="manual">an extreme­ly long english word</dd> <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt> <dd lang="en" class="auto">an extreme­ly long english word</dd> </dl> css dd { width: 55
px; border: 1
px solid black; } dd.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } dd.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } dd.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } result specifications specification status comment css text module level 3the definition of 'hyphen...
image-set() - CSS: Cascading Style Sheets
user needs. syntax image-set() = image-set( <image-set-option># ) where <image-set-option> = [ <image> | <string> ] <resolution> and <string> is an <url> values most commonly you'll see an url() <string> value, but the <image> can be any image type except for an image set. the image-set() function can not be nested inside another image-set() function. <resolution> units include x or dp
px, for dots per pixel unit, dpi, for dots per inch, and dpcm for dots per centimeter. every image within an image-set() must have a unique resolution. examples background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x, "cat-print.png" 600dpi); this example shows how to use image-set() to provide two alternative background-image options, ...
<image> - CSS: Cascading Style Sheets
a cursor the browser-defined size matching the usual cursor size on the client's system mask-image ? shape-outside ? mask-border-source ? symbols for @counter-style at risk feature. if supported, the browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300
px × 150
px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these values are used as the concrete object size. if the specified size defines only the width or only the height, the missing value is determined using the intrinsic ratio, if there is any, the intrinsic dimensions if the specified valu...
justify-content - CSS: Cascading Style Sheets
nt-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: 100
px; height: 100
px; 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">center</option> <op...
margin-trim - CSS: Cascading Style Sheets
ediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20
px; padding: 20
px; display: inline-block; } article > span { background-color: black; color: white; text-align: center; padding: 10
px; margin-right: 20
px; } the problem here is that you'd end up with 20
px too much spacing at the right of the row, so you'd maybe do this to fix it: span:last-child { margin-right: 0; } it is a pain having to write another rule to achieve this, and i...
mask-border-outset - CSS: Cascading Style Sheets
the mask-border-outset css property specifies the distance by which an element's mask border is set out from its border box. syntax /* <length> value */ mask-border-outset: 1rem; /* <number> value */ mask-border-outset: 1.5; /* vertical | horizontal */ mask-border-outset: 1 1.2; /* top | horizontal | bottom */ mask-border-outset: 30
px 2 45
px; /* top | right | bottom | left */ mask-border-outset: 7
px 12
px 14
px 5
px; /* global values */ mask-border-outset: inherit; mask-border-outset: initial; mask-border-outset: unset; the mask-border-outset property may be specified as one, two, three, or four values. each value is a <length> or <number>. negative values are invalid. when one value is specified, it applies the same outset to all four sides. when two values are specified, the fir...
mask-border-width - CSS: Cascading Style Sheets
here yet. when it eventually starts to be supported, it will serve to define the width of the border mask — setting this to a different value to mask-border-slice will cause the slices to be scaled to fit the border mask. mask-border-width: 30 fill; chromium-based browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20
px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect. specifications specification status comment css masking module level 1the definition of 'mask-border-width' in that specification. candidate recommendation initial definition ...
mask-clip - CSS: Cascading Style Sheets
r elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100
px; height: 100
px; background-color: #8cffa0; margin: 20
px; border: 20
px solid #8ca0ff; padding: 20
px; 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="paddi...
mask-origin - CSS: Cascading Style Sheets
s to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100
px; height: 100
px; margin: 10
px; border: 10
px solid blue; background-color: #8cffa0; padding: 10
px; 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</opti...
max-width - CSS: Cascading Style Sheets
gth-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller. html <div id="parent"> <div id="child"> fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. </div> </div> css #parent { background: lightblue; width: 300
px; } #child { background: gold; width: 100%; max-width: 150
px; } result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification. editor's draft css box sizing module level 3the definition of 'max-width' in that specification. working draft adds the max-content, min-co...
max() - CSS: Cascading Style Sheets
n can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. in the first above example, the width will be at least 400
px, but will be wider if the the viewport is more than 2000
px wide (in which case 1vw would be 20
px, so 20vw would be 400
px). think of the max() value as providing the minimum value a property can have. syntax the max() function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned...
object-fit - CSS: Cascading Style Sheets
="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: 940
px; } img { width: 150
px; height: 100
px; border: 1
px solid #000; } .narrow { width: 100
px; height: 150
px; margin-top: 10
px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status comment cs...
opacity - CSS: Cascading Style Sheets
t people experiencing low vision conditions will be able to read the content of the page. color contrast ratio is determined by comparing the luminosity of the opacity-adjusted text and background color values. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. large text is defined as 18.66
px and bold or larger, or 24
px or larger. webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <...
order - CSS: Cascading Style Sheets
content block. the flexible box layout module automatically creates blocks of equal vertical size and uses as much horizontal space as available. html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200
px; order: 1; } main > aside { width: 200
px; order: 3; } result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification. candidate recommendation initial definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specified...
orphans - CSS: Cascading Style Sheets
les 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 is used to demonstrate how orphans work.</p> <p>this is the third paragraph. it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150
px; 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. candidate recommendation extends orphans to apply to any type of fragment, including pages, regions, or columns. ...
overflow-wrap - CSS: Cascading Style Sheets
s">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself. (<code>hyphens</code>, english rules)</p> <p class="hyphens" lang="de">they say the fishing is excellent at lake <em class="hyphens">chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though i've never been there myself. (<code>hyphens</code>, german rules)</p> css p { width: 13em; margin: 2
px; background: gold; } .ow-anywhere { overflow-wrap: anywhere; } .ow-break-word { overflow-wrap: break-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; } result specifications specification status comment css text module level 3the definition of 'overflow-wrap' in that specification. working draft initial definition ...
overscroll-behavior-x - CSS: Cascading Style Sheets
ll width (and height) set on it so it sits comforably inside the viewport, but its content is given a large width so it will scroll horizontally. by default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300
px; width: 500
px; overflow: auto; position: relative; top: 100
px; left: 100
px; overscroll-behavior-x: contain; } specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification. working draft ...
overscroll-behavior-y - CSS: Cascading Style Sheets
s to neighbouring scrolling areas, and default scroll overflow behavior is prevented. formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220
px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation. specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-y' in that specification. working draft ...
overscroll-behavior - CSS: Cascading Style Sheets
ge list of fake contacts, and a dialog box containing a chat window. both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. this can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this: .messages { height: 220
px; overflow: auto; overscroll-behavior-y: contain; } we also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. chrome on android refreshes the page when you scroll past the top boundary). this can be prevented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specificati...
padding-bottom - CSS: Cascading Style Sheets
e-column-group and table-column. 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> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10
px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification. working draft no change. css level 2 (revision 1)the definition of 'padding-bottom' in that specification. recommendation no change. css level 1the definition of 'padding-bottom' in that specification. recommend...
padding-left - CSS: Cascading Style Sheets
table-column-group and table-column. 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> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10
px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification. working draft no change. css level 2 (revision 1)the definition of 'padding-left' in that specification. recommendation no change. css level 1the definition of 'padding-left' in that specification. recommendation ...
padding-right - CSS: Cascading Style Sheets
ble-column-group and table-column. 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> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10
px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification. working draft no change. css level 2 (revision 1)the definition of 'padding-right' in that specification. recommendation no change. css level 1the definition of 'padding-right' in that specification. recommendati...
padding-top - CSS: Cascading Style Sheets
ow, table-column-group and table-column. 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> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10
px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification. working draft no change. css level 2 (revision 1)the definition of 'padding-top' in that specification. recommendation no change. css level 1the definition of 'padding-top' in that specification. recommendation ...
<percentage> - CSS: Cascading Style Sheets
sociated with the animation. 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:18
px;"> <p>full-size text (18
px)</p> <p><span style="font-size:50%;">50% (9
px)</span></p> <p><span style="font-size:200%;">200% (36
px)</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. editor's draft no significant change. ...
<position> - CSS: Cascading Style Sheets
his is not allowed in other properties that use <position>. interpolation when animated, a point's abscissa and ordinate values are interpolated independently. however, because the speed of the interpolation is determined by a single timing function for both coordinates, the point will move in a straight line. examples valid positions center left center top right 8.5% bottom 12vmin right -6
px 10% 20% 8rem 14
px invalid positions left right bottom top 10
px 15
px 20
px 15
px specifications specification status comment css values and units module level 3the definition of '<position>' in that specification. candidate recommendation relists links to both definitions: if css backgrounds and borders module level 3 is supported, its definition of <position...
resize - CSS: Cascading Style Sheets
use the resize property to make any element resizable. 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: 1
px solid black; } div { height: 300
px; width: 300
px; } p { height: 200
px; width: 200
px; } result specifications specification status comment css logical properties and values level 1the definition of 'resize' in that specification. editor's draft adds the values block and inline. css basic user interface module level 3the definition of 'res...
revert - CSS: Cascading Style Sheets
should have its original font-weight (bold) and color: black</h3> <p>just some text</p> revert all reverting all values is useful when you did heavy modifications for something and then want to revert to defaults. so to iterate on above example instead of reverting font-weight and color separately you could just revert all of them. h3 { font-weight: normal; color: blue; border-bottom: 1
px solid grey; } <h3>this will have custom styles</h3> <p>just some text</p> <h3 style="all: revert">this should be reverted to browser/user defaults</h3> <p>just some text</p> revert on a parent reverting effectively removes the value for the element you select with some rule and only for that element. to illustrate this we will set a green color on a section and red color on a paragraph. sec...
rotate - CSS: Cascading Style Sheets
n 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: 150
px; margin: 0 auto; } p { padding: 10
px 5
px; border: 3
px solid black; border-radius: 20
px; width: 150
px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in ...
scroll-behavior - CSS: Cascading Style Sheets
on typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50
px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339
px; padding: 5
px; border: 1
px solid black; } scroll-container { display: block; width: 350
px; height: 200
px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; ...
scroll-margin-block-end - CSS: Cascading Style Sheets
gular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-block-end: 10
px; scroll-margin-block-end: 1em; /* global values */ scroll-margin-block-end: inherit; scroll-margin-block-end: initial; scroll-margin-block-end: unset; values <length> an outset from the block end edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specificat...
scroll-margin-block-start - CSS: Cascading Style Sheets
ar bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-block-start: 10
px; scroll-margin-block-start: 1em; /* global values */ scroll-margin-block-start: inherit; scroll-margin-block-start: initial; scroll-margin-block-start: unset; values <length> an outset from the block start edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> ...
scroll-margin-block - CSS: Cascading Style Sheets
nteractive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: scroll-margin-block-end scroll-margin-block-start syntax /* <length> values */ scroll-margin-block: 10
px; scroll-margin-block: 1em .5em ; /* global values */ scroll-margin-block: inherit; scroll-margin-block: initial; scroll-margin-block: unset; values <length> an outset from the corresponding edge of the scroll container. description the scroll-margin values represent outsets defining the scroll snap area that is used for snapping this box to the snapport. the scroll snap area is determin...
scroll-margin-bottom - CSS: Cascading Style Sheets
tangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-bottom: 10
px; scroll-margin-bottom: 1em; /* global values */ scroll-margin-bottom: inherit; scroll-margin-bottom: initial; scroll-margin-bottom: unset; values <length> an outset from the bottom edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications ...
scroll-margin-left - CSS: Cascading Style Sheets
ctangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* <length> values */ scroll-margin-left: 10
px; scroll-margin-left: 1em; /* global values */ scroll-margin-left: inherit; scroll-margin-left: initial; scroll-margin-left: unset; values <length> an outset from the left edge of the scroll container. formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specifica...
scaleX() - CSS: Cascading Style Sheets
ply on the abscissa of each point of the element. 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: 80
px; height: 80
px; 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. working draft initial definition ...
scaleY() - CSS: Cascading Style Sheets
apply on the ordinate of each point of the element. 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: 80
px; height: 80
px; 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. working draft initial definition ...
skew() - CSS: Cascading Style Sheets
es 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: 80
px; height: 80
px; 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: 80
px; height: 80
px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specification...
skewX() - CSS: Cascading Style Sheets
element along the abscissa. 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: 80
px; height: 80
px; 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. working draft initial definition ...
skewY() - CSS: Cascading Style Sheets
element along the ordinate. 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: 80
px; height: 80
px; 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. working draft initial definition ...
url() - CSS: Cascading Style Sheets
; border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); offset-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30
px / 30
px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.
Used value - CSS: Cascading Style Sheets
sed-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: 1
px solid red; padding: 8
px; } 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"); }...
writing-mode - CSS: Cascading Style Sheets
t5"><span>我家没有电脑。</span></td> <td class="example text5"><span>example text</span></td> <td class="example text5"><span>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1
px black solid; padding: 3
px; } th { background-color: lightgray; } .example { height:75
px; width:75
px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; ...
Using device orientation with 3D transforms - Developer guides
3d transform is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values. there are however two corrections that should be applied to those values: the initial alpha value is 180 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 180 the y axis of the screen coordinate system is inverted, such that translatey(100
px) moves an element 100
px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then rotatex and then rotatey. here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember ...
HTML attribute: min - HTML: Hypertext Markup Language
input type syntax example <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0. we add a big red border around invalid inputs: input:invalid { border: solid red 3
px; } then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1. <input id="mynumber" name="mynumber" type="number" min="7.2" value="8"> because step defaults to 1, valid values include 7.2, 8.2, 9.2, and so on. the value 8 is not valid. as we included an invalid value, supporting browsers will show the value as invalid. if not explicitly included,...
HTML attribute: minlength - HTML: Hypertext Markup Language
ty or five characters or longer to be valid. <label for="fruit">enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"> we can use pseudoclasses to style the element based on whether the value is valid. the value will be valid as long as it is either null (empty) or five or more characters long. lime is invalid, lemon is valid. input { border: 2
px solid currentcolor; } input:invalid { border: 2
px dashed red; } input:invalid:focus { background-image: linear-gradient(pink, lightgreen); } specifications specification status html living standardthe definition of 'minlength attribute' in that specification. living standard html 5.1the definition of 'minlength attribute' in that specification. reco...
HTML attribute: multiple - HTML: Hypertext Markup Language
any trailing and leading whitespace is removed from each address in the list. if the required attribute is present, at least one email address is required. some browsers support the appearance of the list of options from the associated <datalist> for subsequent ema...
HTML attribute: step - HTML: Hypertext Markup Language
.2 to be valid, step would have had to be set to any, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <input type="number" min="-5.2"> min impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0. we add a big red border around invalid inputs: input:invalid { border: solid red 3
px; } then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1. <input id="mynumber" name="mynumber" type="number" step="2" min="1.2"> valid values include 1.2, 3.2, 5.2, 7.2, 9.2, 11.2, and so on. integers and even numbers follwed by .2 are not valid. as we included an invalid value, supporting browsers will show the value as invalid. the number spi...
<button>: The Button element - HTML: Hypertext Markup Language
e experiencing low vision conditions will be able to perceive it. color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. in order to meet current web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for large text. (large text is defined as 18.66
px and bold or larger, or 24
px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os. the results for <input> of type="button" and type="submit" are the same. does clic...
<caption>: The Table Caption element - HTML: Hypertext Markup Language
simple example presents a table that includes a caption. <table> <caption>example caption</caption> <tr> <th>login</th> <th>email</th> </tr> <tr> <td>user1</td> <td>user1@sample.com</td> </tr> <tr> <td>user2</td> <td>user2@sample.com</td> </tr> </table> caption { caption-side: top; align: right; } table { border-collapse: collapse; border-spacing: 0
px; } table, th, td { border: 1
px solid black; } table {background: red;} do not alter caption. for that you need display: block. specifications specification status comment html living standardthe definition of '<caption>' in that specification. living standard html5the definition of '<caption>' in that specification. recommendation ...
<del>: The Deleted Text element - HTML: Hypertext Markup Language
paragraph.</p> <del><p>this paragraph has been deleted.</p></del> result accessibility concerns the presence of the del element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. del::before, del::after { clip-path: inset(100%); clip: rect(1
px, 1
px, 1
px, 1
px); height: 1
px; overflow: hidden; position: absolute; white-space: nowrap; width: 1
px; } del::before { content: " [deletion start] "; } del::after { content: " [deletion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it in ...
<div>: The Content Division element - HTML: Hypertext Markup Language
/div> the result looks like this: a styled example this example creates a shadowed box by applying a style to the <div> using css. note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element. html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1
px solid #333; box-shadow: 8
px 8
px 5
px #444; padding: 8
px 12
px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification. living standard no changes since the latest snapshot html5the definition of '<div>' in that speci...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
r the fieldset is given by the first <legend> element nested inside it. styling with css there are several special styling considerations for <fieldset>. its display value is block by default, and it establishes a block formatting context. if the <fieldset> is styled with an inline-level display value, it will behave as inline-block, otherwise it will behave as block. by default there is a 2
px groove border surrounding the contents, and a small amount of default padding. the element has min-inline-size: min-content by default. if a <legend> is present, it is placed over the block-start border. the <legend> shrink-wraps, and also establishes a formatting context. the display value is blockified. (for example, display: inline behaves as block.) there will be an anonymous box holding th...
<input type="button"> - HTML: Hypertext Markup Language
"> <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: #ccc; width: 150
px; height: 75
px; padding: 5
px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5
px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d...
<input type="checkbox"> - HTML: Hypertext Markup Language
ing"> <label for="cooking">cooking</label> </div> <div> <input type="checkbox" id="other" name="interest" value="other"> <label for="other">other</label> <input type="text" id="othervalue" name="other"> </div> <div> <button type="submit">submit form</button> </div> </fieldset> </form> css html { font-family: sans-serif; } form { width: 600
px; margin: 0 auto; } div { margin-bottom: 10
px; } fieldset { background: cyan; border: 5
px solid blue; } legend { padding: 10
px; background: blue; color: cyan; } javascript var othercheckbox = document.queryselector('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('ch...
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
etting appearance: none removes platform native borders, but not functionality. caret-color a property specific to text entry-related elements is the css caret-color property, which lets you set the color used to draw the text input caret: html <label for="textinput">note the red caret:</label> <input id="textinput" class="custom" size="32"> css input.custom { caret-color: red; font: 16
px "helvetica", "arial", "sans-serif" } result object-position and object-fit in certain cases (typically involving non-textual inputs and specialized interfaces), the <input> element is a replaced element. when it is, the position and size of the element's size and positioning within its frame can be adjusted using the css object-position and object-fit properties styling for more informati...
<ins> - HTML: Hypertext Markup Language
time string. examples <ins>this text has been inserted</ins> result accessibility concerns the presence of the <ins> element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. ins::before, ins::after { clip-path: inset(100%); clip: rect(1
px, 1
px, 1
px, 1
px); height: 1
px; overflow: hidden; position: absolute; white-space: nowrap; width: 1
px; } ins::before { content: " [insertion start] "; } ins::after { content: " [insertion end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it i...
<mark>: The Mark Text element - HTML: Hypertext Markup Language
s the custom class "match" to each match. the results look like this: accessibility concerns the presence of the mark element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. mark::before, mark::after { clip-path: inset(100%); clip: rect(1
px, 1
px, 1
px, 1
px); height: 1
px; overflow: hidden; position: absolute; white-space: nowrap; width: 1
px; } mark::before { content: " [highlight start] "; } mark::after { content: " [highlight end] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only apply it...
<menu> - HTML: Hypertext Markup Language
ly to change to 'toolbar' according to html5.1. 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: 300
px; height: 80
px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet. the type attribute on the <menu> element is now obsolete. <menuitem> element is obsolete. html <!-- a button, which displays a menu when clicked. --> <button type="menu" menu="popup-menu"> dropdown </button> <menu type="context" id="popup-menu"> ...
<menuitem> - HTML: Hypertext Markup Language
commands don't render their contents. </menuitem> <menuitem type="command" label="this command has javascript" onclick="alert('command clicked')"> 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: 300
px; height: 80
px; background-color: lightgreen; } result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification. recommendation snapshot of the html living standard, made obsolete. html 5.1the definition of '<menuitem>' in that specification. recommendation snapshot of the html living standar...
<picture>: The Picture element - HTML: Hypertext Markup Language
e the selection of the image inside <picture>. the media attribute the media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element. if the <source>'s media condition evaluates to false, the browser skips it and evaluates the next element inside <picture>. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600
px)"> <img src="mdn-logo-narrow.png" alt="mdn"> </picture> the srcset attribute the srcset attribute is used to offer list of possible images based on size. it is composed of a comma-separated list of image descriptors. each image descriptor is composed of a url of the image, and either... a width descriptor, followed by a w (such as 300w); or a pixel density descriptor, followed by an x...
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
ion on the other hand is delimited by two <rt> elements. note that we could also write this example with the two base text parts annotated completely separately. in this case we don't need to include <rb> elements: <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> <ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> body { font-size: 22
px; } the output looks like so: the html above might look something like this when rendered by a browser without ruby support: 漢字 (kan ji) body { font-size: 22
px; } note: see the article about the <ruby> element for further examples. specifications specification status comment html5the definition of '<rb>' in that specification. recommendation...
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
in the case of lack of <ruby> element support; the <rp> content provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses. examples this example uses ruby annotations to display the romaji equivalents for each character. <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> css body { font-size: 22
px; } the result looks like this in your browser: the html above rendered by a browser without ruby support might look like this: 漢 (kan) 字 (ji) body { font-size: 22
px; } see the article about the <ruby> element for further examples. specifications specification status comment html living standardthe definition of '<rp>' in that specification. l...
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
element. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. examples this simple example provides romaji transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-size: 22
px; } the output looks like this in your browser: on a browser without ruby support, this example might look like this: 漢 kan 字 ji body { font-size: 22
px; } specifications specification status comment html living standardthe definition of '<rt>' in that specification. living standard html5the definition of '<rt>' in that specificati...
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
nts a <ruby> element. permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. 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: 10
px; font-size: 36
px; } specifications specification status comment html 5.2the definition of '<rtc>' in that specification. recommendation html 5.1the definition of '<rtc>' in that specification. recommendation html5the definition of '<rtc>' in that specification. recommendation initial definition. ...
<s> - HTML: Hypertext Markup Language
style="text-decoration:line-through;">today's special: salmon</span> sold out accessibility concerns the presence of the s element is not announced by most screen reading technology in its default configuration. it can be made to be announced by using the css content property, along with the ::before and ::after pseudo-elements. s::before, s::after { clip-path: inset(100%); clip: rect(1
px, 1
px, 1
px, 1
px); height: 1
px; overflow: hidden; position: absolute; white-space: nowrap; width: 1
px; } s::before { content: " [start of stricken text] "; } s::after { content: " [end of stricken text] "; } some people who use screen readers deliberately disable announcing content that creates extra verbosity. because of this, it is important to not abuse this technique and only ...
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
eat resource. picture example in this example, two <source> elements are included within the <picture>, providing versions of an image to use when the available space exceeds certain widths. if the available width is less than the smaller of these widths, the user agent will fall back to the image given by the <img> element. <picture> <source srcset="mdn-logo-wide.png" media="(min-width: 800
px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600
px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an irrelevant background decorative image). specifications specification status comment ...
<textarea> - HTML: Hypertext Markup Language
one: textarea { resize: none; } styling valid and invalid values valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes. for example, to give your textarea a different border depending on whether it is valid or invalid: textarea:invalid { border: 2
px dashed red; } textarea:valid { border: 2
px solid lime; } examples basic example the following example show a very simple textarea, with a set numbers of rows and columns and some default content. <textarea name="textarea" rows="10" cols="50">write something here</textarea> min and max length this example has a minimum and maximum number of characters — of 10 and 20 respectively. ...
data-* - HTML: Hypertext Markup Language
any dash (u+002d) is replaced by the capitalization of the next letter, converting the name to camelcase. usage by adding data-* attributes, even ordinary html elements can become rather complex and powerful program-objects. for example, a space-ship "sprite" in a game could be a simple <img> element with a class attribute and several data-* attributes: <img class="spaceship cruiserx3" src="shi
px3.png" data-ship-id="324" data-weapons="laseri laserii" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" onclick="spaceships[this.dataset.shipid].blasted()"> for a more in-depth tutorial about using html data attributes, see using data attributes. specifications specification status comment html living standardthe definition of 'data-*' in that...
CSS Houdini
ponent.js'); </script> this added module contains registerpaint() functions, which register completely configurable worklets. the css paint() function parameters include the name of the worklet, along with optional parameters. the worklet also has access to the element's custom properties: they don't need to be passed as function arguments. li { background-image: paint(mycomponent, stroke, 10
px); --highlights: blue; --lowlights: green; } note: with great power comes great responsibility! with houdini you could invent your own masonry, grid, or regions implementation, but doing so is not necessarily the best idea. the css working group does a lot of work to ensure every feature is performant, handles all edge cases, and considers security, privacy, and accessibility. as you ext...
parseInt() - JavaScript
console.log(filterint('1.61803398875')) // nan examples using parseint the following examples all return 15: parseint('0xf', 16) parseint('f', 16) parseint('17', 8) parseint(021, 8) parseint('015', 10) // but `parseint(015, 10)` will return 13 parseint(15.99, 10) parseint('15,123', 10) parseint('fxx123', 16) parseint('1111', 2) parseint('15 * 3', 10) parseint('15e2', 10) parseint('15
px', 10) parseint('12', 13) the following examples all return nan: parseint('hello', 8) // not a number at all parseint('546', 2) // digits other than 0 or 1 are invalid for binary radix the following examples all return -15: parseint('-f', 16) parseint('-0f', 16) parseint('-0xf', 16) parseint(-15.1, 10) parseint('-17', 8) parseint('-15', 10) parseint('-1111', 2) parseint('-15e1', 10) pars...
export - JavaScript
from 'bar.js'; // invalid the correct way of doing this is to rename the export: export { default as defaultexport } from 'bar.js'; examples using named exports in a module my-module.js, we could include the following code: // module "my-module.js" function cube(x) { return x * x * x; } const foo = math.pi + math.sqrt2; var graph = { options: { color:'white', thickness:'2
px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = { color:'blue', thickness:'3
px' }; graph.draw(); console.log(cube(3)); // 27 console.log(foo); // 4.555806215962888 it is important t...
for - JavaScript
used instead. function showoffsetpos(sid) { var nleft = 0, ntop = 0; for ( var oitnode = document.getelementbyid(sid); /* initialization */ oitnode; /* condition */ nleft += oitnode.offsetleft, ntop += oitnode.offsettop, oitnode = oitnode.offsetparent /* final-expression */ ); /* semicolon */ console.log('offset position of \'' + sid + '\' element:\n left: ' + nleft + '
px;\n top: ' + ntop + '
px;'); } /* example call: */ showoffsetpos('content'); // output: // "offset position of "content" element: // left: 0
px; // top: 153
px;" note: this is one of the few cases in javascript where the semicolon is mandatory. indeed, without the semicolon the line that follows the cycle declaration will be considered a statement. specifications specification ...
Values - MathML
lengths several mathml presentation elements have attributes that accept length values used for size or spacing. mathml accepts different units and constants for specifying lengths. units unit description em font-relative unit ex font-relative unit. (the "x"-height of the element, 1ex ≈ 0.5em in many fonts)
px pixels in inches (1 inch = 2.54 centimeters) cm centimeters mm millimeters pt points (1 point = 1/72 inch) pc picas (1 pica = 12 points) % percentage of the default value. constants a replacement for the deprecated constants below is: veryverythinmathspace => 0.05555555555555555em verythinmathspace => 0.1111111111111111em thinmathspace ...
Authoring MathML - MathML
instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support. 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='23
px' width='77
px'/></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 engines with native mathml support (gecko and webkit). note that ua string sniffing is...
<mpadded> - MathML
pth", "height", and "width" as a pseudo-unit for the attributes depth, height, lspace, voffset, and width. they represent each length of the same-named dimension. prior to gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) the mathml2 pseudo-unit lspace was allowed, which is no longer present in the mathml3 recommendation and has been removed now. examples <math> <mpadded height="+150
px" width="100
px" lspace="2height"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </mpadded> </math> specifications specification status comment mathml 3.0the definition of 'mpadded' in that specification. recommendation current specification mathml 2.0the definition of 'mpadded' in that specification. recommendation initial specification ...
<mspace> - MathML
ak, goodbreak, badbreak. starting with mathml 3, it is preferred to use <mo> to control linebreaking. mathbackground the background color. you can use #rgb, #rrggbb and html color names. width the desired width of the space (see length for values and units). note that some common attributes like mathcolor, mathvariant or dir have no effect on <mspace>. examples <math> <mspace depth="40
px" height="20
px" /> <mspace width="100
px" /> </math> specifications specification status comment mathml 3.0the definition of 'mspace' in that specification. recommendation current specification mathml 2.0the definition of 'mspace' in that specification. recommendation initial specification ...
Critical rendering path - Web Performance
f 50%, will be half of the width of its parent. unless otherwise defined, the body has a width of 100%, meaning it will be 100% of the width of the viewport. this width of the device impacts layout. the viewport meta tag defines the width of the layout viewport, impacting the layout. without it, the browser uses the default viewport width, which on by-default full screen browsers is generally 960
px. on by-default full screen browsers, like your phone's browser, by setting <meta name="viewport" content="width=device-width">, the width will be the width of the device instead of the default viewport width. the device-width changes when a user rotates their phone between landscape and portrait mode. layout happens every time a device is rotated or browser is otherwise resized. layout performan...
alignment-baseline - SVG: Scalable Vector Graphics
specifications specification status comment css inline layoutthe definition of 'alignment-baseline' in that specification. working draft no change scalable vector graphics (svg) 2the definition of 'alignment-ba...
<a> - SVG: Scalable Vector Graphics
s considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s. see warning below */ svg|a:link, svg|a:visited { cursor: pointer; } svg|a text, text svg|a { fill: blue; /* even for text, svg uses fill over color */ text-decoration: underline; } svg|a:hover, svg|a:active { outline: dotted 1
px blue; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. value type: <string> ; default value: none; ...
<clipPath> - SVG: Scalable Vector Graphics
> <path id="heart" d="m10,30 a20,20,0,0,1,50,30 a20,20,0,0,1,90,30 q90,60,50,90 q10,60,10,30 z" /> <!-- only the portion of the red heart inside the clip circle is visible. --> <use clip-path="url(#myclip)" xlink:href="#heart" fill="red" /> </svg> /* with a touch of css for browsers who * * implemented the r geometry property. */ @keyframes openyourheart {from {r: 0} to {r: 60
px}} #myclip circle { animation: openyourheart 15s infinite; } a clipping path is conceptually equivalent to a custom viewport for the referencing element. thus, it affects the rendering of an element, but not the element's inherent geometry. the bounding box of a clipped element (meaning, an element which references a <clippath> element via a clip-path property, or a child of the referencing...
<set> - SVG: Scalable Vector Graphics
es. for attributes that can be reasonably be interpolated, the <animate> is usualy prefered. note: the <set> element is non-additive. the additive and accumulate attributes are not allowed, and will be ignored if specified. html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5
px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation. the value must match the requirements of the target attribute. value type: <anything>; default value: none; animat...
<style> - SVG: Scalable Vector Graphics
svg <style> element allows style sheets to be embedded directly within svg content. svg's style element has the same attributes as the corresponding element in html (see html's <style> element). html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2
px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string. value type: <string>; default value: text/css; animatable: no media this attribute defines to which media the style applies. value type: <string>; default value: all; animatable: no title this attribute the title of the sty...
<tspan> - SVG: Scalable Vector Graphics
the svg <tspan> element defines a subtext within a <text> element or another <tspan> element. it allows for adjustment of the style and/or position of that subtext as needed. html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12
px serif; } tspan { font: bold 10
px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! </text> </svg> attributes x the x coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: none; animatable: yes y the y coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: none; animatable: yes dx shifts the t...
Basic Transformations - SVG: Scalable Vector Graphics
ransformations apply to. that means, the units you specify for the element and its children might not follow the 1:1 pixel mapping, but are also distorted, skewed, translated and scaled according to the transformation. <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the resulting rectangular in the above example will be 100x100
px. the more intriguing effects arise, when you rely on attributes like userspaceonuse and the such. embedding svg in svg in contrast to html, svg allows you to embed other svg elements seamlessly. this way you can also simply create new coordinate systems by utilizing the viewbox, width and height of the inner svg element. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" heigh...
Getting started - SVG: Scalable Vector Graphics
attributes should always be used instead. both version and baseprofile attributes are deprecated in svg 2. as an xml dialect, svg must always bind the namespaces correctly (in the xmlns attribute). see the namespaces crash course page for more info. the background is set to red by drawing a rectangle <rect> that covers the complete image area. a green circle <circle> with a radius of 80
px is drawn atop the center of the red rectangle (center of circle offset 150
px to the right, and 100
px downward from the top left corner). the text "svg" is drawn. the interior of each letter is filled in with white. the text is positioned by setting an anchor where we want the midpoint to be: in this case, the midpoint should correspond to the center of the green circle. fine adjustments can be m...
Paths - SVG: Scalable Vector Graphics
led with the letter m. when the parser runs into this letter, it knows it needs to move to a point. so, to move to (10,10) the command to use would be m 10 10. after that, the parser begins reading for the next command. all of the commands also come in two variants. an uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g., move 10
px up and 7
px to the left from the last point). coordinates in the d parameter are always unitless and hence in the user coordinate system. later, we will learn how paths can be transformed to suit other needs. line commands there are five line commands for <path> nodes. the first command is the "move to" or m, which was described above. it takes two parameters, a coordinate (x) and coordinate (y...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
demo</title> <style> stop.begin { stop-color:yellow; } stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1
px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100...
Using custom elements - Web Components
; 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 background-color to the style. 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. the connectedcallback() runs each time the element is added to the dom — here we run the updatestyle() function to make sure the square is styled as defined in its att...
Using shadow DOM - Web Components
g/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with some css to style it: // create some css to apply to the shadow dom let style = document.createelement('style'); style.textcontent = ` .wrapper { position: relative; } .info { font-size: 0.8rem; width: 200
px; display: inline-block; border: 1
px solid black; padding: 10
px; background: white; border-radius: 10
px; opacity: 0; transition: 0.6s all; position: absolute; bottom: 20
px; left: 10
px; z-index: 3; } img { width: 1.2rem; } .icon:hover + .info, .icon:focus + .info { opacity: 1; }`; attaching the shadow dom to the shadow root the final step is to attach all the created...
Basic Example - XSLT: Extensible Stylesheet Language Transformations
tylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10
px 155
px 0 50
px; border: 1
px dotted #639ace; padding:0 5
px 0 5
px;} </style> </head> <body> <p class="mybox"> <span class="title"> <xsl:value-of select="/myns:article/myns:title"/> </span> <br /> authors: <br /> <xsl:apply-templates select="/myns:article/myns:authors/myns:author"/> </p> <p class=...