Selection.setBaseAndExtent() - Web APIs
or example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is larger than the number of child nodes inside anchornode, or if focusoffset is larger than the number of child nodes inside focusnode, an indexsizeerror exception is thrown. examples in this example, we have two paragraphs containing spans, each one containing a single word. the first one is set as the anchornode and the second is set as the focusnode. we also have an additional paragraph that sits in between the two nodes. next, we have two form inputs that allow you to set the anchoroffset and focusoffset — they both have a default value of 0. we also have a button that when pressed invokes a function that runs the setbasean...
...s. next, we have two form inputs that allow you to set the anchoroffset and focusoffset — they both have a default value of 0. we also have a button that when pressed invokes a function that runs the setbaseandextent() method with the specified offsets, and copies the selection into the output paragraph at the very bottom of the html. ...
...e have two form inputs that allow you to set the anchoroffset and focusoffset — they both have a default value of 0. we also have a button that when pressed invokes a function that runs the setbaseandextent() method with the specified offsets, and copies the selection into the output paragraph at the very bottom of the html. ...
...And 15 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
le already set, you could provide the timezone in a hidden input type. for example: <input type="hidden" id="timezone" name="timezone" value="-08:00"> on the other hand, if you were required to allow the user to enter a timezone along with a date/time input, you could provide a means of inputting a timezone, such as a <select> element: <select name="timezone_offset" id="timezone-offset" class="span5"> <option value="-12:00">(gmt -12:00) eniwetok, kwajalein</option> <option value="-11:00">(gmt -11:00) midway island, samoa</option> <option value="-10:00">(gmt -10:00) hawaii</option> <option value="-09:50">(gmt -9:30) taiohae</option> <option value="-09:00">(gmt -9:00) alaska</option> <option value="-08:00">(gmt -8:00) pacific time (us &amp; canada)</option> ... </s...
...date field. let's look at an example; here we've set minimum and maximum date/time values, and also made the field required: <form> <div> <label for="party">choose your preferred party date and time (required, june 1st 8.30am to june 30th 4.30pm):</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30" required> <span class="validity"></span> </div> <div> <input type="submit" value="book party!"> </div> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the css used in the above example.
...lete date (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: 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. ...
...And 15 more matches

ARIA: table role - Accessibility
as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element. ...
...g data arranged in rows and columns, similar to the native <table> html element. ...
...ed in rows and columns, similar to the native <table> html element. ...
...And 14 more matches

text-transform - CSS: Cascading Style Sheets
n initial valuenoneapplies toall elements. ...
...st-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | capitalize | uppercase | lowercase | full-width | full-size-kana examples none <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transform: none; } strong { float: right; } this demonstrates no text transformation. capitalize (general) <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: capitalize <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transfor...
...the keyword target the first letter, that is the first unicode character part of the letter or number general category. ...
...And 14 more matches

<input type="time"> - HTML: Hypertext Markup Language
ys hh:mm:ss. you can learn more about the format of the time value used by this input type in time strings in date and time formats used in html. in this example, you can see the time input's value by entering a time and seeing how it changes afterward. first, a look at the html. this is simple enough, with the label and input as we've seen before, but with the addition of a <p> element with a <span> to display the value of the time input: <form> <label for="starttime">start time: </label> <input type="time" id="starttime"> <p> value of the <code>time</code> input: <code> "<span id="value">n/a</span>"</code>. </p> </form> the javascript code adds code to the time input to watch for the input event, which is triggered every time the contents of an input element chang...
...<form> <label for="starttime">start time: </label> <input type="time" id="starttime"> <p> value of the <code>time</code> input: <code> "<span id="value">n/a</span>"</code>. </p> </form> the javascript code adds code to the time input to watch for the input event, which is triggered every time the contents of an input element change. when this happens, the contents of the <span> are replaced with the new value of the input element. var starttime = document.getelementbyid("starttime"); var valuespan = document.getelementbyid("value"); starttime.addeventlistener("input", function() { valuespan.innertext = starttime.value; }, false); when a form including a time input is submitted, the value is encoded before being included in the form's data. the form's data entry ...
...d minimum times you can use the min and max attributes to restrict the valid times that can be chosen by the user. ...
...And 14 more matches

itemscope - HTML: Hypertext Markup Language
ed itemtype must have an associated itemref. note: find more about itemtype attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute. the example specifies the itemtype as "http://schema.org/movie", and specifies three related itemprop attributes. <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example. itemscope itemtype movie itemprop (itemprop name) (itemprop v...
... nutritioninformation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.org/recipe. ...
...uctured data for a recipe, as specified by the first itemtype, http://schema.org/recipe. ...
...And 14 more matches

itemtype - HTML: Hypertext Markup Language
y the vocabulary's specification. it is left to such specifications to define whether multiple items of the same global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same id. ...
...tion. it is left to such specifications to define whether multiple items of the same global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same id. ...
...is left to such specifications to define whether multiple items of the same global identifier (whether on the same page or different pages) are allowed to exist, and what processing rules for that vocabulary are, with respect to handling the case of multiple items with the same id. ...
...And 14 more matches

Location - Web APIs
the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
... the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
... the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
...And 13 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
ugh screen real estate to show two columns. @media (min-width: 500px) { .wrapper { grid-template-columns: 1fr 3fr; grid-template-areas: "header header" "nav nav" "sidebar content" "ad footer"; } nav ul { display: flex; justify-content: space-between; } } you can see the layout taking shape in the value of grid-template-areas. the header spans over two column tracks, as does the nav. in the third row track we have the sidebar alongside the content. in the fourth row track i have chosen to place my ad content – so it appears under the sidebar, then the footer next to it under the content. i’m using a flexbox on the navigation to display it in a row spaced out. i can now add a final breakpoint to move to a three-column layout. @me...
...olumn that has 4fr as the track size. this means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center. in this layout i am displaying the nav in the left column, alongside the content. in the right column we have the sidebar and underneath it the advertisements (ad). the footer now spans right across the bottom of the layout. i then use a flexbox to display the navigation as a column. this is a simple example but demonstrates how we can use a grid layout to rearrange our layout for different breakpoints. in particular i am changing the location of that ad block, as appropriate in my different column setups. i find this named areas method very helpful at a prototyping stage, ...
...ica, arial, sans-serif; } .wrapper > * { border: 2px solid #f08c00; background-color: #ffec99; border-radius: 5px; padding: 10px; } .wrapper { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; } to demonstrate how this grid system works i have four child elements inside my wrapper. <div class="wrapper"> <div class="item1">start column line 1, span 3 column tracks.</div> <div class="item2">start column line 6, span 4 column tracks. 2 row tracks.</div> <div class="item3">start row 2 column line 2, span 2 column tracks.</div> <div class="item4">start at column line 3, span to the end of the grid (-1).</div> </div> i can then place these on the grid using the named lines, and also the span keyword. .item1 { grid-column: col-start / ...
...And 11 more matches

<input type="month"> - HTML: Hypertext Markup Language
ou try to submit a date that is outside the set bounds, or an empty date field. let's look at an example; here we've set minimum and maximum dates, and also made the field required: <form> <div> <label for="month">what month would you like to visit us (summer months only, please)?</label> <input id="month" type="month" name="month" min="2017-06" max="2017-09" required> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the css used in the abov...
...specified (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: 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. ...
...nd :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: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } important: html form validation is not a substitute for scripts that ensure that the entered data is in the proper format. it's far too easy for someone to make adjustments to the html that...
...And 11 more matches

<input type="tel"> - HTML: Hypertext Markup Language
s of the wrong type, and so forth) is entered into your database. making telephone numbers required you can make it so that an empty input is invalid and won't be submitted to the server using the required attribute. ...
... so forth) is entered into your database. making telephone numbers required you can make it so that an empty input is invalid and won't be submitted to the server using the required attribute. ...
...umber (required): </label> <input id="telno" name="telno" type="tel" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } the output looks like this: pattern validation if you want to further restrict entered numbers so they also have to conform to a specific pattern, you ca...
...And 11 more matches

<input type="text"> - HTML: Hypertext Markup Language
e 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: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the 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 displa...
... icons. this was necessary because some input types on some browsers don't display icons placed directly after them very well. ...
...ry because some input types on some browsers don't display icons placed directly after them very well. ...
...And 11 more matches

clip-path - CSS: Cascading Style Sheets
s comparison of html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">...
...#mypath)<br><br> assuming the following clippath definition: <pre> &lt;svg&gt; &lt;clippath id="mypath" clippathunits="objectboundingbox"&gt; &lt;path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /&gt; &lt;/clippath&gt; &lt;/svg&gt;</pre> </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i ...
..."24" y="24" width="144" height="144" /> <text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <span>html</span> <div class="container"> <p class="svg2"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">...
...And 10 more matches

display - CSS: Cascading Style Sheets
pare and contrast how the different values affect the element's layout, and that of their children. we've included padding and background-color on the containers and their children, so that it is easier to see the effect the display values are having. note: we've not included any of the modern two-value syntax, as support for that is still fairly limited. ...
...trast how the different values affect the element's layout, and that of their children. we've included padding and background-color on the containers and their children, so that it is easier to see the effect the display values are having. note: we've not included any of the modern two-value syntax, as support for that is still fairly limited. ...
... the different values affect the element's layout, and that of their children. we've included padding and background-color on the containers and their children, so that it is easier to see the effect the display values are having. note: we've not included any of the modern two-value syntax, as support for that is still fairly limited. ...
...And 10 more matches

<input type="number"> - HTML: Hypertext Markup Language
gested values you can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value. each option's value is the corresponding suggested value for the number entry box. <input id="ticketnum" type="number" name="ticketnum" list="defaultnumbers"> <span class="validity"></span> <datalist id="defaultnumbers"> <option value="10045678"> <option value="103421"> <option value="11111111"> <option value="12345678"> <option value="12999922"> </datalist> use of the list attribute with number inputs is not supported in all browsers. it works in chrome and opera, for example, but not in firefox. validation we have already mentioned a numb...
... constrain valid values to lower and upper bounds. the following example exhibits all of the above features, as well as using some css to display valid and invalid icons, depending on the input's value: <form> <div> <label for="balloons">number of balloons to order (multiples of 10):</label> <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> <span class="validity"></span> </div> <div> <input type="submit"> </div> </form> try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that 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: di...
... <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: 10px; } input:invalid+span:after { content: '✖'; padding-left: 5px; } input:valid+span:after { content: '✓'; padding-left: 5px; } here we use the :invalid and :valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <span> element, as a visual indicator of validity. we put it on a separate <span> element for added flexibility. some browsers don't display gene...
...And 10 more matches

HTMLElement.offsetLeft - Web APIs
the htmlelement.offsetleft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the htmlelement.offsetparent node. for block-level elements, offsettop, offsetleft, offsetwidth, and offsetheight describe the border box of an element relative to the offsetparent. however, for inline-level elements (such as span) that can wrap from one line to the next, offsettop and offsetleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and o...
...tleft describe the positions of the first border box (use element.getclientrects() to get its width and height), while offsetwidth and offsetheight describe the dimensions of the bounding border box (use element.getboundingclientrect() to get its position). therefore, a box with the left, top, width and height of offsetleft, offsettop, offsetwidth and offsetheight will not be a bounding box for a span with wrapped text. syntax left = element.offsetleft; left is an integer representing the offset to the left in pixels 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 wi...
...he offset to the left in pixels 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. ...
...And 9 more matches

ARIA: cell role - Accessibility
the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row. <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element. <tr role="row"> <td role="cell">france</td> <td role="cell">67 million</td> </tr> description the element with role="cell" is a cell within a row, optionally within a rowgroup, within a grid, table or treegrid within a static tabular structure. using native html <td> elements, whenever possible, is strongly encouraged. each element with role="cell" must be n...
... treegrid. if a cell contains column or row header information, use the colheader or rowheader roles, respecitively. if the cell does not contain header information and is nested in a grid or treegrid, the role of gridcell may be more appropriate. a cell can contain a number of property attributes clarifying the cell's position within the tabular data structure, including aria-colindex, aria-colspan, aria-rowindex, and aria-rowspan. using the native html table element (<table>) along with the table row element (<tr>) and table cell element (<td>) whenever possible is strongly encouraged. associated wai-aria roles, states, and properties context roles role="row" an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells, co...
...umn scope. unlike a plain cell, the columnheader role establishes a relationship between it and all cells in the corresponding column. role="rowheader" a header cell that is the structural equivalent of the html <th> element with a row scope. unlike a plain cell, the rowheader role establishes a relationship between it and all cells in the corresponding row. states and properties aria-colspan similar to the html <th> and <td> colspan attribute, it defines the number of columns spanned by the cell. aria-rowspan similar to the html <th> and <td> rowspan attribute, it defines the number of rows spanned by the cell. aria-colindex attribute the aria-colindex attribute is only needed if columns are hidden from the dom. the attribute takes as its value an integer between 1 and the tot...
...And 9 more matches

grid-area - CSS: Cascading Style Sheets
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. if four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. ...
... <custom-i...
... <custom-ident> if there is a named line with the name '<custom-ident>...
...And 9 more matches

<input type="date"> - HTML: Hypertext Markup Language
error will be displayed if you try to submit an empty date field. this should work in most browsers, even if they fall back to a text input. let's look at an example of minimum and maximum dates, and also made a field required: <form> <label> choose your preferred party date (required, april 1st to 20th): <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you try to submit the form with an incomplete date (or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the css used in the above example. we make use of the :valid an...
...(or with a date outside the set bounds), the browser displays an error. try playing with the example now: here's a screenshot for those of you who aren't using a supporting browser: here's the css used in the above example. we make use of the :valid and :invalid pseudo-elements to add an icon next to the input, based on whether or not the current value is valid. ...
...e use of the :valid and :invalid 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: 5px; } 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 coul...
...And 9 more matches

Forms related code snippets - Archive of obsolete content
ed under the gnu public license, version 3 or later. ...
...r later. ...
...tandalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; otable.id = sprefs + "-cal-" + nid; od...
...And 8 more matches

How CSS works - Learn web development
cause the dom is where your css and the document's content meet up. when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply. a real dom representation rather than a long, boring explanation, let's look at an example to see how a real html snippet is converted into a dom. ...
... where your css and the document's content meet up. when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply. a real dom representation rather than a long, boring explanation, let's look at an example to see how a real html snippet is converted into a dom. ...
...ur css and the document's content meet up. when you start working with browser devtools you will be navigating the dom as you select items in order to see which rules apply. a real dom representation rather than a long, boring explanation, let's look at an example to see how a real html snippet is converted into a dom. ...
...And 8 more matches

ARIA: row role - Accessibility
a tabular structure. a row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid, table or treegrid, and optionally within a rowgroup. ...
...grid cells or column headers, and possibly a row header, within a grid, table or treegrid, and optionally within a rowgroup. ...
...lumn headers, and possibly a row header, within a grid, table or treegrid, and optionally within a rowgroup. ...
...And 8 more matches

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
peat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid. i would like the first item to start on the far left of the grid and span a single column track. it should also start on the first row line, at the top of the grid and span to the fourth row line. .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as you position some items, other items on the grid will continue to be laid out using the auto-placement rules. we will take a proper look at how these work in a later gui...
...id-column-end: 2; grid-row-start: 1; grid-row-end: 4; } as you position some items, other items on the grid will continue to be laid out using the auto-placement rules. we will take a proper look at how these work in a later guide but you can see as you work that grid is laying out un-placed items into empty cells of the grid. addressing each item individually we can place all four items spanning row and column tracks. note that we can leave cells empty if we wish. one of the very nice things about grid layout is this ability to have white space in our designs without having to push things around using margins to prevent floats from rising up into the space we have left. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-col...
...this means that our initial, long-hand, example would look like this: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; ...
...And 8 more matches

place-self - CSS: Cascading Style Sheets
ample we have a simple 2 x 2 grid layout. initially the grid container has justify-items and align-items values of stretch — the defaults — which causes the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of place-self, to show how these override the default placements. ...
...h across the entire width of their cells. the second, third, and fourth grid items are then given different values of place-self, to show how these override the default placements. 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. ...
... entire width of their cells. the second, third, and fourth grid items are then given different values of place-self, to show how these override the default placements. 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. ...
...And 8 more matches

writing-mode - CSS: Cascading Style Sheets
ith text in various languages. html the html is a <table> with each writing mode in a row with a column showing text in various scripts using that writing mode. ...
...s. html the html is a <table> with each writing mode in a row with a column showing text in various scripts using that writing mode. ...
...writing mode in a row with a column showing text in various scripts using that writing mode. ...
...And 8 more matches

<input type="week"> - HTML: Hypertext Markup Language
tting maximum and minimum weeks you can use the min and max attributes to restrict the valid weeks that can be chosen by the user. ...
...m weeks you can use the min and max attributes to restrict the valid weeks that can be chosen by the user. in the following example we are setting a minimum value of week 01, 2017 and a maximum value of week 52, 2017: <form> <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" min="2017-w01" max="2017-w52"> <span class="validity"></span> </form> 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-bo...
...nd :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: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers. making week values required in addition you can use the requir...
...And 8 more matches

Using templates and slots - Web Components
lement is included in the markup, or if the browser doesn't support slots, <my-paragraph> just contains the fallback content "my default text". to define the slot's content, we include an html structure inside the <my-paragraph> element with a slot attribute whose value is equal to the name of the slot we want it to fill. as before, this can be anything you like, for example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> or <my-paragraph> <ul slot="my-text"> <li>let's have some different text!</li> <li>in a list!</li> </ul> </my-paragraph> note: elements that can be inserted into slots are known as slotable; when an element has been inserted in a slot, it is said to be slotted. note: an unnamed <slot> will be filled with all...
...ting a template with some slots first of all, we use the <slot> element within a <template> element to create a new "element-details-template" document fragment containing some named slots: <template id="element-details-template"> <style> details {font-family: "open sans light",helvetica,arial} .name {font-weight: bold; color: #217ac0; font-size: 120%} h4 { margin: 10px 0 -8px 0; } h4 span { background: #217ac0; padding: 2px 6px 2px 6px } h4 span { border: 1px solid #cee9f9; border-radius: 4px } h4 span { color: white } .attributes { margin-left: 22px; font-size: 90% } .attributes p { margin-left: 16px; font-style: italic } </style> <details> <summary> <span> <code class="name">&lt;<slot name="element-name">need name</slot>&gt;</code> <i class=...
... the <template> uses <slot> and its nam...
...And 8 more matches

HTML table basics - Learn web development
prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html tables. what is a table ? a table is a structured set of data made up of rows and columns (tabular data). ...
..."person" and "age" cells in the first example shown in this article). to illustrate why they are useful, have a look at the following table example. ...
...if the column and row headings stood out in s...
...And 7 more matches

ChildNode.before() - Web APIs
x [throws, unscopable] void childnode.before((node or domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...ildnode.before((node or domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...r domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...And 7 more matches

Using IndexedDB - Web APIs
erdata.foreach(function(customer) { objstore.add(customer.name); }); }; for more details about the key generator, please see "w3c key generators". adding, retrieving, and removing data before you can do anything with your new database, you need to start a transaction. transactions come from the database object, and you have to specify which object stores you want the transaction to span. once you are inside the transaction, you can access the object stores that hold your data and make your requests. next, you need to decide if you're going to make changes to the database or if you just need to read from it. transactions have three available modes: readonly, readwrite, and versionchange. to change the "schema" or structure of the database—which involves creating or deleting ob...
...e deprecated constant idbtransaction.read_write instead of "readwrite". // in case you want to support such an implementation, you can write: // var transaction = db.transaction(["customers"], idbtransaction.read_write); the transaction() function takes two arguments (though one is optional) and returns a transaction object. the first argument is a list of object stores that the transaction will span. you can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an invalidaccesserror. if you don't specify anything for the second argument, you get a read-only transaction. since you want to write to it here you need to pass the "readwrite" flag. now that you have a transaction you need to understand its l...
... <td> <label for="pub-title" class="required"> title: </label> </td> <td> <input type="text" id="pub-title" name="pub-title" /> </td> </tr> <tr> <td> <label for="pub-biblioid" class="required"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span> </label> </td> <td> <input type="text" id="pub-biblioid" name="pub-biblioid"/> </td> </tr> <tr> <td> <label for="pub-year"> year: </label> </td> <td> <input type="number" id="pub-yea...
...And 7 more matches

justify-items - CSS: Cascading Style Sheets
| flex-end examples simple demonstration in the following example we have a simple 2 x 2 grid layout. initially the grid container is given a justify-items value of stretch (the default), which causes the grid items to stretch across the entire width of their cells. ...
... is given a justify-items value of stretch (the default), which causes the grid items to stretch across the entire width of their cells. if you hover or tab onto the grid container however, it is 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. ...
...y-items value of stretch (the default), which causes the grid items to stretch across the entire width of their cells. if you hover or tab onto the grid container however, it is 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 7 more matches

justify-self - CSS: Cascading Style Sheets
owing example we have a simple 2 x 2 grid layout. initially the grid container is given a justify-items value of stretch — the default — which causes the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of justify-self, to show how these override the justify-items value. ...
...ult — which causes the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of justify-self, to show how these 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. ...
...es the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of justify-self, to show how these 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 7 more matches

<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
as rtl. some other characters (such as spaces and some punctuation) are treated as neutral and are assigned directionality based on that of their surrounding characters. usually, the bidirectional algorithm will do the right thing without the author having to provide any special markup but, occasionally, the algorithm needs help. that's where <bdi> comes in. the <bdi> element is used to wrap a span of text and instructs the bidirectional algorithm to treat this text in isolation from its surroundings. this works in two ways: the directionality of text embedded in <bdi> does not influence the directionality of the surrounding text. the directionality of text embedded in <bdi> is not influenced by the directionality of the surrounding text. for example, consider some text like: embedde...
... example, consider some text like: embedded-text - 1st place if embedded-text is ltr, this works fine. but if embedded-text is rtl, then - 1 will be treated as rtl text (because it consists of neutral and weak characters). ...
... content categories flow content, phrasing content, palpable content. ...
...And 7 more matches

Progressive web app structure - Progressive web apps (PWAs)
o have the design look good on both mobile (with a responsive web design approach) and desktop devices. the main app javascript the app.js file does a few things we will look into closely in the next articles. first of all it generates the content based on this template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
...ign look good on both mobile (with a responsive web design approach) and desktop devices. the main app javascript the app.js file does a few things we will look into closely in the next articles. first of all it generates the content based on this template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
... web design approach) and desktop devices. the main app javascript the app.js file does a few things we will look into closely in the next articles. first of all it generates the content based on this template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
...And 7 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
loaded; its job is primarily to initialize the app, though it c can do other things as well. we'll look at how the app functions more closely in later articles in this guide. the first thing it does is to generate the app's displayed content using the following template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
...ob is primarily to initialize the app, though it c can do other things as well. we'll look at how the app functions more closely in later articles in this guide. the first thing it does is to generate the app's displayed content using the following template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
...t c can do other things as well. we'll look at how the app functions more closely in later articles in this guide. the first thing it does is to generate the app's displayed content using the following template: var template = "<article>\n\ <img src='data/img/slug.jpg' alt='name'>\n\ <h3>#pos. ...
...And 7 more matches

Beginning our React todo list - Learn web development
e="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="visually-hidden"> tasks</span> </button> <butt...
... <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>completed</span> <span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-...
...edby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="checkbox" /> <label classname="t...
...And 6 more matches

Starting our Svelte Todo list app - Learn web development
class="label__lg"> what needs to be done? ...
...ds to be done? ...
...? ...
...And 6 more matches

Dynamic behavior in Svelte: working with variables and props - Learn web development
ch todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in html attributes, li...
... a function to remove a todo from our todos array. at the bottom of the todos.svelte <script> section, add the removetodo() function like so: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) } we'll call it via the delete button. update it with a click event, like so: <button type="button" class="btn btn__danger" on:click={() => removetodo(todo)} > delete <span class="visually-hidden">{todo.name}</span> </button> a very common mistake with handlers in svelte is to pass the result of executing a function as a handler, instead of passing the function. for example, if you specify on:click={removetodo(todo)}, it will execute removetodo(todo) and the result will be passed as a handler, which is not what we had in mind. in this case you have to specify ...
...n a new array of todos filtered accordingly. let's update the filter button markup to make it dynamic and update the current filter when the user presses one of the filter buttons. ...
...And 6 more matches

ChildNode.after() - Web APIs
ax [throws, unscopable] void childnode.after((node or domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...hildnode.after((node or domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...or domstring)... nodes); parameters nodes a set of node or domstring objects to insert. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...And 6 more matches

DOMTokenList.toggle() - Web APIs
want to toggle. force optional a boolean that, if included, turns the toggle into a one way-only operation. if set to false, then token will only be removed, but not added. if set to true, then token will only be added, but not removed. return value a boolean indicating whether token is in the list after the call. ...
...lse, then token will only be removed, but not added. if set to true, then token will only be added, but not removed. return value a boolean indicating whether token is in the list after the call. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then replace a token in the list, and write the list into the <span>'s node.textcontent. ...
...added. if set to true, then token will only be added, but not removed. return value a boolean indicating whether token is in the list after the call. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then replace a token in the list, and write the list into the <span>'s node.textcontent. ...
...And 6 more matches

DataTransfer.clearData() - Web APIs
only time the drag operation's data store is writeable. syntax datatransfer.cleardata([format]); parameters format optional a string which specifies the type of data to remove. if this parameter is an empty string or is not provided, the data for all types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. ...
...ifies the type of data to remove. if this parameter is an empty string or is not provided, the data for all types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...
...he type of data to remove. if this parameter is an empty string or is not provided, the data for all types is removed. example this example shows the use of the datatransfer object's getdata(), setdata() and cleardata() methods. html <span class="tweaked" id="source" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element. ...
...And 6 more matches

Box-shadow generator - CSS: Cascading Style Sheets
yer_manager"> <div class="group section"> <div class="button" data-type="add"> </div> <div class="button" data-type="move-up"> </div> <div class="button" data-type="move-down"> </div> </div> <div id="stack_container"></div> </div> <div id="preview_zone"> <div id="layer_menu" class="col span_12"> <div class="button" id="element" data-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=...
...a-type="subject" data-title="element"> element </div> <div class="button" id="before" data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> ...
... data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> </div> </div> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 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 * ============================================...
...And 6 more matches

grid-row - CSS: Cascading Style Sheets
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. if two <grid-line> values are specified, the grid-row-start longhand is set to the value before the slash, and the grid-row-end longhand is set to the value after the slash. ...
... the slash. ...
...a shorthand for the following css properties: grid-row-end grid-row-start syntax /* keyword values */ grid-row: auto; grid-row: auto / auto; /* <custom-ident> values */ grid-row: somegridarea; grid-row: somegridarea / someothergridarea; /* <integer> + <custom-ident> values */ grid-row: somegridarea 4; grid-row: 4 somegridarea / 6; /* span + <integer> + <custom-ident> values */ grid-row: span 3; grid-row: span somegridarea; grid-row: 5 somegridarea span; grid-row: span 3 / 6; grid-row: span somegridarea / span someothergridarea; grid-row: 5 somegridarea span / 2 span; /* global values */ grid-row: inherit; grid-row: initial; grid-row: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an au...
...And 6 more matches

<colgroup> - HTML: Hypertext Markup Language
the html <colgroup> element defines a group of columns within a table. 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. content categories none. permitted content if the span attribute is present: none, it is an empty element. if the attribute is not present: zero or more <col> element tag omission the start tag may be omitted, if it has a <col> element as its first child and if it is not preceded by a <colgroup> whose end tag has been omitted. the end tag may be omitted, if it is not followed by a space or a comment. permitted parents a <table> element. the <c...
...permitted parents a <table> element. the <colgroup> must appear after any optional <caption> element but before any <thead>, <th>, <tbody>, <tfoot> and <tr> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmltablecolelement attributes this element's attributes include the global attributes. ...
...y <thead>, <th>, <tbody>, <tfoot> and <tr> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmltablecolelement attributes this element's attributes include the global attributes. span this attribute contains a positive integer indicating the number of consecutive columns the <colgroup> element spans. if not present, its default value is 1. note: this attribute is applied on the attributes of the column group, it has no effect on the css styling rules associated with it or, even more, to the cells of the column's members of the group. the span attribute is not permitted if there are one or more <col> elements within the <colgroup>. deprecated attributes the following attributes...
...And 6 more matches

DOMTokenList.forEach() - Web APIs
ng three arguments: currentvalue the current element being processed in the array. currentindex the index of the current element being processed in the array. listobj the array that foreach() is being applied to. thisarg optional value to use as this when executing callback. return value undefined. ...
...ssed in the array. listobj the array that foreach() is being applied to. thisarg optional value to use as this when executing callback. return value undefined. example in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the values using foreach(), writing each one to the <span>'s node.textcontent inside the foreach() inner function. ...
...ed to. thisarg optional value to use as this when executing callback. return value undefined. example in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the values using foreach(), writing each one to the <span>'s node.textcontent inside the foreach() inner function. ...
...And 5 more matches

Document.getElementsByClassName() - Web APIs
sttarget = parentdom.getelementsbyclassname("test")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.queryselector and document.queryselectorall. only elements with all of the classnames specified are selected. ...
...ame("test")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.queryselector and document.queryselectorall. only elements with all of the classnames specified are selected. ...
...st")[0]; // the first element, as we wanted console.log(testtarget); //<p class="test">hello world 2</p> </script> </body> </html> multiple classes example document.getelementsbyclassname works very similarly to document.queryselector and document.queryselectorall. only elements with all of the classnames specified are selected. ...
...And 5 more matches

Using the link role - Accessibility
ialogue list, such as “activate link” or “move to link”, should perform the same as they do with ordinary links. screen magnifiers may enlarge links. note: opinons may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples this example shows how to implement a fake link using a <span> element. this includes javascript to grab the location and handle navigating to the new location using window.open() via clicking, and using keyboard, css to give the desired visuals of a link, the tabindex="0" attribute to make it keyboard-focussable, and role="link" to make it recognised as a link by assistive technology. this is a huge amount of work just to recreate something you've get for...
...t whether the target of the fake link has been visited before, and therefore use :visited styles (e.g. the default purple color for visited links). opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. ...
...r for visited links). opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. ...
...And 5 more matches

Layout using named grid lines - CSS: Cascading Style Sheets
ackets with whitespace between them [sidebar-end main-start]. you can then refer to that line by either of the names. implicit grid areas from named lines when naming the lines, i mentioned that you can name these anything you like. the name is a custom ident, an author-defined name. when choosing the name you need to avoid words that might appear in the specification and be confusing - such as span. idents are not quoted. while you can choose any name, 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. ...
...as we have multiple lines named col-start if you place an item to start after line col-start grid uses the first line named col-start, in our case that will be the far left line. to address another line use the name, plus the number for that line. ...
...l-start grid uses the first line named col-start, in our case that will be the far left line. to address another line use the name, plus the number for that line. to place our item from the first line named col-start to the 5th, we can use: .item1 { grid-column: col-start / col-start 5 } you can also use the span keyword here. my next item will be placed from the 7th line named col-start and span 3 lines. ...
...And 5 more matches

Stacking context example 1 - CSS: Cascading Style Sheets
text div #2 (z-index 1) div #4 (z-index 2) note: div #1 and div #3 are not translucent. it is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value. and this example shows what happens when a parent element does not create a stacking context. ...
... 1) div #4 (z-index 2) note: div #1 and div #3 are not translucent. it is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value. and this example shows what happens when a parent element does not create a stacking context. ...
...not translucent. it is important to remember that assigning an opacity less than 1 to a positioned element implicitly creates a stacking context, just like adding a z-index value. and this example shows what happens when a parent element does not create a stacking context. ...
...And 5 more matches

<input type="search"> - HTML: Hypertext Markup Language
hich is too large, is of the wrong type, and so forth) 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: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; 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 t...
... necessary because some input types on some browsers don't display icons placed directly after them very well. ...
...input types on some browsers don't display icons placed 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: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; 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 followi...
...And 5 more matches

Inline elements - HTML: Hypertext Markup Language
lements. an inline element does not start on a new line and only takes up as much width as necessary. inline vs. block-level elements: a demonstration this is most easily demonstrated with a simple example. ...
...n inline element does not start on a new line and only takes up as much width as necessary. inline vs. block-level elements: a demonstration this is most easily demonstrated with a simple example. ...
...w line and only takes up as much width as necessary. inline vs. block-level elements: a demonstration this is most easily demonstrated with a simple example. ...
...And 5 more matches

x - SVG: Scalable Vector Graphics
for <altglyph>, x defines the x-axis coordinate of t...
... if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, 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 multiple values, x defines the x coordinate of each individual glyph from the t...
... value <length> | <percentage> ...
...And 5 more matches

y - SVG: Scalable Vector Graphics
for <altglyph>, y defines the y-axis coordinate of t...
... if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, 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 multiple values, y defines the y coordinate of each individual glyph from the t...
... value <length> | <percentage> de...
...And 5 more matches

Using the W3C DOM - Archive of obsolete content
ntroduced in the w3c dom 3 core, innertext has been an ie method since ie 4 and has been standardised in html5. both properties can be read or set. reading the property returns the text of an element with all the element content removed. setting the property replaces all the element's content with a single text node with the assigned text. ...
...and has been standardised in html5. both properties can be read or set. reading the property returns the text of an element with all the element content removed. setting the property replaces all the element's content with a single text node with the assigned text. the following examples show how to modify the text of a span element that already exists in the html file. ...
... both properties can be read or set. reading the property returns the text of an element with all the element content removed. setting the property replaces all the element's content with a single text node with the assigned text. the following examples show how to modify the text of a span element that already exists in the html file. ...
...And 4 more matches

Client-side form validation - Learn web development
out below: note: you can find this example live on github as custom-error-message.html (see also the source code.) a more detailed example now that we've seen a really simple example, let's see how we can use this api to build some slightly more complex custom validation. first, the html. again, feel free to build this along with us: <form novalidate> <p> <label for="mail"> <span>please enter an email address:</span> <input type="email" id="mail" name="mail" required minlength="8"> <span class="error" aria-live="polite"></span> </label> </p> <button>submit</button> </form> this simple form uses the novalidate attribute to turn off the browser's automatic validation; this lets our script take control over validation. however, this doesn't disable suppo...
...hough the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly. our input to validate is an <input type="email">, which is required, and has a minlength of 8 characters. let's check these using our own code, and show a custom error message for each one. we are aiming to show the error messages inside a <span> element. the aria-live attribute is set on that <span> to make sure that our custom error message will be presented to everyone, including it being read out to screenreader users. note: a key point here is that setting the novalidate attribute on the form is what stops the form from showing its own error message bubbles, and allows us to instead display the custom error messages in the dom in ...
...ssages */ .error { width : 100%; padding: 0; font-size: 80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } now lets look at the javascript that implements the custom error validation. // there are many ways to pick a dom node; here we get the form itself and the email // input box, as well as the span element into which we will place the error message. const form = document.getelementsbytagname('form')[0]; const email = document.getelementbyid('mail'); const emailerror = document.queryselector('#mail + span.error'); email.addeventlistener('input', function (event) { // each time the user types something, we check if the // form fields are valid. if (email.validity.valid) { // in ...
...And 4 more matches

How to structure a web form - Learn web development
> element. ...
...the rule ...
... <label for="title_2"> <input type="radio" id="title_2" name="title" value="q"> queen </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="j"> joker </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password:...
...And 4 more matches

Componentizing our React app - Learn web development
if at any point in the future you try to render a component that does not return anything, react will display an error in yo...
...if at any point in the future you try to render a component that does not return anything, react will display an error in your browser. our todo component is co...
... <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> </div> </li> ); } note: components must always return something. if at any point in the future you try to render a component that does not return anything, react will display an error in your browser. our todo component is complete, at least for now; now we can use it. in app.js, add the following line near the top of the fi...
...And 4 more matches

Creating localizable web applications
'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls, put all the code that irrelevant to localization outside the function call. snippet 1. bad: <?= _("<a href=\"https://addons.mozilla.org/firefox/downloads/latest/10900\" class=\"get-personas\" id=\"download\"><span>get personas for firefox - free</span>");?><span class="arrow"></span></a> snippet 2. good: <a href="https://addons.mozilla.org/firefox/downloads/latest/10900" class="get-personas" id="download"> <span><?= _("get personas for firefox - free");?></span><span class="arrow"></span> </a> snippet 3. bad: <p><?= _("<strong class=\"legal\">design acceptance:</strong> if a design is accepted, we...
... correctly if there are no latin characters next to them, which there aren't any), so let's leave it as it is. in general though, we should consider implementing such decorations as css images (background-image or ::after's/::before's content) and then select them with "html[dir="rtl"] > ...". it a safer method. <?php if($showwearthis) { ?> $(".try-button").personasbutton({ 'haspersonas':'<span><?= _("wear this");?></span><span>&nbsp;</span>', 'hasfirefox':'<span><?= _("get personas now!");?></span><span>&nbsp;</span>', 'nofirefox':'<span><?= _("get personas with firefox");?></span><span>&nbsp;</span>' }); <?php } ?> images don't put text or numbers in the images just don't do that. applies also to numbers. image 1. bad: image 2. bad: if you wish to use a non-standar...
...aphics. don't use images as buttons instead, use <button/> and style it with css. image 1. bad: snippet 1. ...
...And 4 more matches

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
ad, ensure that no text is selected, and press the "run" button. (if you get an error complaining that components.utils is not defined, be sure you've selected browser from the scratchpad's environment menu, as described in step 2.) save the following html text to a file, and visit the file in your browser. make sure the current browser tab is displaying this page. ...
...our browser. make sure the current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. ...
...current browser tab is displaying this page. <div onclick="dodivsandspans()"> click here to make the page do some allocations. ...
...And 4 more matches

HTMLTableCellElement - Web APIs
in particular, and is a valuable accessibility tool. usually the value of abbr is an abbreviation or acronym, but can be any text that's appropriate contextually. htmltablecellelement.cellindex read only a long integer representing the cell's position in the cells collection of the <tr> the cell is contained within. if the cell doesn't belong to a <tr>, it returns -1. htmltablecellelement.colspan an unsigned long integer indicating the number of columns this cell must span; this lets the cell occupy space across multiple columns of the table. it reflects the colspan attribute. htmltablecellelement.headers read only is a domsettabletokenlist describing a list of id of <th> elements that represents headers associated with the cell. it reflects the headers attribute. htmltablecellelemen...
... htmltablecellelement.scope a domstring indicating the scope of a <th> cell. ...
... htmltablecellelement.scope a domstring indicating the scope of a <th> cell. ...
...And 4 more matches

Node.insertBefore() - Web APIs
node's child nodes. note: referencenode is not an optional parameter. you must explicitly pass a node or null. failing to provide it or passing invalid values may behave differently in different browser versions. return value returns the added child (unless newnode is a documentfragment, in which case the empty documentfragment is returned). ...
...erencenode is not an optional parameter. you must explicitly pass a node or null. failing to provide it or passing invalid values may behave differently in different browser versions. return value returns the added child (unless newnode is a documentfragment, in which case the empty documentfragment is returned). ...
...rovide it or passing invalid values may behave differently in different browser versions. return value returns the added child (unless newnode is a documentfragment, in which case the empty documentfragment is returned). ...
...And 4 more matches

Node - Web APIs
which contains a certain string). parameters rootnode the node object whose descendants will be recursed through. callback optional an optional callback function that receives a node as its only argument. if omitted, eachnode returns an array of every node contained within rootnode (including the root itself). ...
...e node object whose descendants will be recursed through. callback optional an optional callback function that receives a node as its only argument. if omitted, eachnode returns an array of every node contained within rootnode (including the root itself). ...
...ect whose descendants will be recursed through. callback optional an optional callback function that receives a node as its only argument. if omitted, eachnode returns an array of every node contained within rootnode (including the root itself). ...
...And 4 more matches

WindowOrWorkerGlobalScope.setInterval() - Web APIs
typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 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: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: ...
...proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna ...
...proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. pellentesque placerat enim at lacus ultrici...
...And 4 more matches

::after (:after) - CSS: Cascading Style Sheets
text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want. ...
...or exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">look at the orange box after this text. </span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. no javascript is required! we can also support keyboard us...
... { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips. ...
...And 4 more matches

:host() - CSS: Cascading Style Sheets
ttribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
...ken> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
... <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
...And 4 more matches

:host-context() - CSS: Cascading Style Sheets
ttribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
...ken> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
... <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s examples selectively styling shadow hosts the following snippets are taken from our host-selectors example (see it live also). ...
...And 4 more matches

:host - CSS: Cascading Style Sheets
ds, this allows you to select a custom element from inside its shadow dom. note: this has no effect when used outside a shadow dom. /* selects a shadow root host */ :host { font-weight: bold; } syntax :host examples styling the shadow host the following snippets are taken from our host-selectors example (see it live also). ...
... this has no effect when used outside a shadow dom. /* selects a shadow root host */ :host { font-weight: bold; } syntax :host examples styling the shadow host the following snippets are taken from our host-selectors example (see it live also). ...
...en used outside a shadow dom. /* selects a shadow root host */ :host { font-weight: bold; } syntax :host examples styling the shadow host the following snippets are taken from our host-selectors example (see it live also). ...
...And 4 more matches

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
what this means is that the start line of the item will be set by auto-placement, and the e...
...: repeat(4, 1fr); grid-auto-rows: 100px; grid-gap: 10px; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; } .wrapper div:nth-child(5) { grid-column: 1 / 3; grid-row: 1 / 3; } deal with items that span tracks you can use placement properties while still taking advantage of auto-placement. in this next example i have added to the layout by setting odd items to span two tracks both for rows and columns. i do this with the grid-column-end and grid-row-end properties and setting the value of this to span 2. what this means is that the start line of the item will be set by auto-placement, and the end line will span two tracks. you can see how this then leaves gaps in the grid, as for the auto-placed items if grid comes across an item that doesn’t fit into a ...
...this is generally what you want, if you are layin...
...And 4 more matches

<input type="url"> - HTML: Hypertext Markup Language
lem, 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. ...
...ant 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. ...
... of type url validate against both the standard url validation and the specified pattern, you can implement this easily. ...
...And 4 more matches

Texts - SVG: Scalable Vector Graphics
font in which it is displayed. svg offers a set of attributes, many similar to their css counterparts, to enable font selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. ...
...selection. each of the following properties can be set as an attribute or via a css declaration: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. ...
...font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing and text-decoration. other text-related elements tspan this element is used to mark up sub-portions of a larger text. it must be a child of a text element or another tspan element. a typical usecase is to paint one word of a sentence bold red. ...
...And 4 more matches

JavaScript Daemons Management - Archive of obsolete content
[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[nletter]; oletter = { "elem": ospan, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(ospan); } } var nmaxdist = 25, aletters = [], stext = "...
...aemon.buildaround({ // http://tyleregeto.com/text-animation-in-javascript "letters": [], "numletters": 0, "clock": 0, "interval": 0.0, "delta": 33, "letters": [], "pool": ["0","1","2","3","4","5","6","7","8","9"], "target": document.createelement("p"), "create": function () { // build letters list this.target.textcontent = ""; this.letters.length = 0; for (var ospan, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.target }; this.letters.push(oletter); oletter.index = this.numletters; oletter.elem.style.position = "relative"; oletter.val = oletter.elem.textcontent; this.nu...
...; nletter < nlen; nletter++) { ospan = document.createelement("span"); ospan.textcontent = stext[nletter]; oletter = { "elem": ospan, "parent": this.target }; this.letters.push(oletter); oletter.index = this.numletters; oletter.elem.style.position = "relative"; oletter.val = oletter.elem.textcontent; this.numletters++; this.target.appendchild(ospan); } }, "perform": function (nindex, nlength, bbackw) { for (var oletter, nletter = 0; nletter < this.letters.length; nletter++) { oletter = this.letters[nletter]; if (nlength < nindex && this.clock + this.delta < this.interval) { clock += this.delta; return; } this.clock = 0; oletter.elem.textcontent = nindex / nlength - oletter.index / th...
...And 3 more matches

Table Layout Strategy - Archive of obsolete content
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 des_con fix min_adj des_adj fix_adj pct pct_adj min_pro final the width parameter have the following meaning: #define width_not_set -1 #define num_widths 10 #define num_major_widt...
...e width_not_set -1 #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...hs 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...And 3 more matches

Getting started with CSS - Learn web development
our starting point is an html document. you can copy the code from below if you want to work on your own computer. save the code below as index.html in a folder on your machine. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph. it contains an <em>emphasized</em> element.</p> <ul> <li>item one</li> <li>item two</li> <li>item <em>three</em></li> </ul> </body> </html> note: if you are reading this on a device or an environment where you can't easily create files, then don't w...
...l> in your css you can target the class of special by creating a selector that starts with a full stop character. add the following to your css file: .special { color: orange; font-weight: bold; } save and refresh to see what the result is. you can apply the class of special to any element on your page that you want to have the same look as this list item. for example, you might want the <span> in the paragraph to also be orange and bold. try adding a class of special to it, then reload your page and see what happens. sometimes you will see rules with a selector that lists the html element selector along with the class: li.special { color: orange; font-weight: bold; } this syntax means "target any li element that has a class of special". if you were to do this then you would no ...
... bold. try adding a class of special to it, then reload your page and see what happens. sometimes you will see rules with a selector that lists the html element selector along with the class: li.special { color: orange; font-weight: bold; } this syntax means "target any li element that has a class of special". if you were to do this then you would no longer be able to apply the class to a <span> or another element by simply adding the class to it; you would have to add that element to the list of selectors: li.special, span.special { color: orange; font-weight: bold; } as you can imagine, some classes might be applied to many elements and you don't want to have to keep editing your css every time something new needs to take on that style. therefore it is sometimes best to bypass t...
...And 3 more matches

How can we design for all types of users? - Learn web development
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. ...
...base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px). ...
...at the equivalent of 32px, yet if within the h1 we find a span with the subheading class, it too must be rendered at the default font size (usually 16px). ...
...And 3 more matches

Video and Audio APIs - Learn web development
the <video> element contains two <source> elements so that different formats can be loaded dependi...
... the <video> element contains two <source> elements so that different formats can be loaded depending on the browser viewing the s...
...vide an understandable description of each button, since we're not providing a human-readable label inside the tags. the contents of aria-label attributes are read out by screenreaders when their users focus on the elements that contain them. there is also a timer <div>, which will report the elapsed time when the video is playing. just for fun, we are providing two reporting mechanisms — a <span> containing the elapsed time in minutes and seconds, and an extra <div> that we will use to create a horizontal indicator bar that gets 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...
...And 3 more matches

React interactivity: Editing, filtering, conditional rendering - Learn web development
rn statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} ...
...e="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> </div> </div> ); we've now got the two different template structures — "edit" and "view" —...
...! toggling the <todo /> templates at long last, we are ready to make our final core feature interactive. to start with, we want to call setediting() with a value of true when a user presses the "edit" button in our viewtemplate, so that we can switch templates. update the "edit" button in the viewtemplate like so: <button type="button" classname="btn" onclick={() => setediting(true)}> edit <span classname="visually-hidden">{props.name}</span> </button> now we'll add the same onclick handler to the "cancel" button in the editingtemplate, but this time we'll set isediting to false so that it switches us back to the view template. update the "cancel" button in the edittemplate like so: <button type="button" classname="btn todo-cancel" onclick={() => setediting(false)} > cancel ...
...And 3 more matches

IAccessibleTable
accessibleat([in] long row, [in] long column, [out] iunknown accessible ); [propget] hresult caption([out] iunknown accessible ); [propget] hresult childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in]...
...lumncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowdescription([in] long row, [out] bstr description ); [propget] hresult rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] hresult rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] hresult rowindex([in] long cellindex, [out] long rowindex ); hresult selectcolumn([in] long column ); [propget] hresult selectedchildren([in] long maxchildren, [out, size_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] hresult s...
...column in the table if such a description exists. otherwise a null pointer is returned. return value e_invalidarg if bad [in] passed, [out] value is null. s_false if there is nothing to return, [out] value is null. s_ok. columnextentat() returns the number of columns occupied by the accessible object at the specified row and column in the table. the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextentat( [in] long row, [in] long column, [out] long ncolumnsspanned ); parameters row 0 based row index of the accessible for which to return the column extent. column 0 based column index of the accessible for which to return the column extent. ncolumnsspanned returns the 1 based column extent of the specified cell. return value e_invalidarg ...
...And 3 more matches

IAccessibleTableCell
other-licenses/ia2/accessibletablecell.idlnot scriptable this interface gives access to the cells of a two-dimensional table. ...
...e_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] hresult columnindex([out] long columnindex ); [propget] hresult isselected([out] boolean isselected ); [propget] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowextent([out] long nrowsspanned ); [propget] hresult rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] hresult rowindex([out] long rowindex ); [propget] hresult table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible. the result is greater than 1 if the specified cell spans multiple columns. ...
...is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] hresult rowindex([out] long rowindex ); [propget] hresult table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible. the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell. return value s_ok. columnheadercells() returns the column headers as an array of cell accessibles. [propget] hresult columnheadercells( [out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); parameters cellaccessibles pointer to an array of references to cel...
...And 3 more matches

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ied at least in part in css text module level 3, and especially the parts about the css white-space property and whitespace processing details, but we also offer an easier explanation below. let’s take another really simple example. to make it easier, we’ve illustrated all spaces with ◦, all tabs with ⇥ , and all line breaks with ⏎: this example: <h1>◦◦◦hello◦⏎ ⇥⇥⇥⇥<span>◦world!</span>⇥◦◦</h1> is rendered in the browser like so: hidden example <h1> hello <span> world!</span> </h1> the <h1> element contains only inline elements. in fact it contains: a text node (consisting of some spaces, the word "hello" and some tabs). an inline element (the <span>, which contains a space, and the word "world!"). another text node (consisting only of...
...alled an inline formatting context. this is one of the possible layout rendering contexts that browser engines work with. ...
...formatting context. this is one of the possible layout rendering contexts that browser engines work with. ...
...And 3 more matches

Index - Web APIs
gh the browser's user interface. 1193 element: dblclick event api, dom, double click, double-click, element, event, input, interface, mouseevent, reference, button, dblclick, events, mouse the dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time. 1194 element: error event audio, dom, error handling, errors, event, media, reference, ui, ui events, uievent, video, web, events the error event is fired on an element object when a resource failed to load, or can't be used. for example, if a script has an execution error or an image can't be found or is invalid. 1195 element: focus event api, dom, el...
...event is fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change. 1900 htmlsourceelement api, html dom, interface, reference the htmlsourceelement interface provides special properties (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating <source> elements. 1901 htmlspanelement api, html dom, interface, reference the htmlspanelement interface represents a <span> element and derives from the htmlelement interface, but without implementing any additional properties or methods. 1902 htmlstyleelement api, html dom, htmlstyleelement, interface, reference the htmlstyleelement interface represents a <style> element. it inherits properties ...
...orresponds to the <switch> element. 3830 svgsymbolelement api, interface, needsexample, reference, svg, svg dom, svgsymbolelement the svgsymbolelement interface corresponds to the <symbol> element. 3831 svgtrefelement api, deprecated, needsexample, reference, svg, svg dom the svgtrefelement interface corresponds to the <tref> elements. 3832 svgtspanelement api, needsexample, reference, svg, svg dom the svgtspanelement interface represents a <tspan> element. 3833 svgtests api, needsexample, reference, svg, svg dom the svgtests interface is used to reflect conditional processing attributes and is mixed into other interfaces for elements that support these attributes. 3834 svgtextcontentelement api,...
...And 3 more matches

Node.replaceChild() - Web APIs
before old). childnode.replacewith() may be easier to read and use. syntax parentnode.replacechild(newchild, oldchild); parameters newchild the new node to replace oldchild. if it already exists in the dom, it is first removed. oldchild the child to be replaced. return value the returned value is the replaced node. this is the same node as oldchild. ...
...childnode.replacewith() may be easier to read and use. syntax parentnode.replacechild(newchild, oldchild); parameters newchild the new node to replace oldchild. if it already exists in the dom, it is first removed. oldchild the child to be replaced. return value the returned value is the replaced node. this is the same node as oldchild. ...
...cewith() may be easier to read and use. syntax parentnode.replacechild(newchild, oldchild); parameters newchild the new node to replace oldchild. if it already exists in the dom, it is first removed. oldchild the child to be replaced. return value the returned value is the replaced node. this is the same node as oldchild. ...
...And 3 more matches

Example and tutorial: Simple synth keyboard - Web APIs
o contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. ...
...ettings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "range". the range element will typically be presented as a slider control; we configure it to allow any value between 0.0 and 1.0, stepping by 0.01 each position. ...
...ume". this lets us provide a set of common values and special strings which the browser may optionally choose to display in some fashion; we provide names for the values 0.0 ("mute") and 1.0 ("100%"). the waveform picker on the right side of the settings bar, we place a label and a <select> element named "waveform" whose options correspond to the available waveforms. ...
...And 3 more matches

ARIA: button role - Accessibility
touch event. onkeydown handles the event raised when the button is activated using the enter or space key on the keyboard. (note not the deprecated onkeypress) changing attribute values aria-pressed the value of aria-pressed defines the state of a toggle button. this attribute has one of four possible values: true, false, mixed, undefined examples basic button example in this example, a span element has been given the button role. because a <span> element is used, the tabindex attribute is required to make the button focusable and part of the page's tab order. the included css style is provided to make the <span> element look like a button, and to provide visual cues when the button has focus. the handlebtnclick and handlebtnkeydown event handlers perform the button's action when ac...
...ion when activated using a mouse click or the space or enter key. in this case, the action is to add a new name to the list of names. try the example by adding a name to the text box. the button will cause the name to be added to a list. ...
... add a new name to the list of names. try the example by adding a name to the text box. the button will cause the name to be added to a list. ...
...And 3 more matches

:valid - CSS: Cascading Style Sheets
ly make valid fields adopt an appearance that helps the user confirm that their data is formatted properly. /* selects any valid <input> */ input:valid { background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user. ...
...-class is useful for highlighting correct fields for the user. ...
...is useful for highlighting correct fields for the user. ...
...And 3 more matches

Coordinate systems - CSS: Cascading Style Sheets
e() method. it simply calls setcoords() once for each coordinate system, passing in the event that occurred. our main code sets up the event handlers on the inner box by calling addeventlistener() for each of the types mouseenter, mousemove, and mouseleave. html the html for our example is below. ...
...tener() for each of the types mouseenter, mousemove, and mouseleave. html the html for our example is below. note that within the <div> with the id "log", we have a paragraph for each coordinate system, with span used for each of the elements to receive and display the coordinates in each model. ...
...he types mouseenter, mousemove, and mouseleave. html the html for our example is below. note that within the <div> with the id "log", we have a paragraph for each coordinate system, with span used for each of the elements to receive and display the coordinates in each model. ...
...And 3 more matches

grid-column-end - CSS: Cascading Style Sheets
the grid-column-end css property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid 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. ...
...ample 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. ...
...ribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword value */ grid-column-end: auto; /* <custom-ident> values */ grid-column-end: somegridarea; /* <integer> + <custom-ident> values */ grid-column-end: 2; grid-column-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-end: span 3; grid-column-end: span somegridarea; grid-column-end: 5 somegridarea span; /* global values */ grid-column-end: inherit; grid-column-end: initial; grid-column-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if there is a named line w...
...And 3 more matches

grid-column-start - CSS: Cascading Style Sheets
the grid-column-start css property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. this start position defines the block-start edge of the grid 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. ...
...s 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 */ grid-column-start: auto; /* <custom-ident> value */ grid-column-start: somegridarea; /* <integer> + <custom-ident> values */ grid-column-start: 2; grid-column-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-column-start: span 3; grid-column-start: span somegridarea; grid-column-start: span somegridarea 5; /* global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> val...
...a; grid-column-start: span somegridarea 5; /* global values */ grid-column-start: inherit; grid-column-start: initial; grid-column-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both. values auto a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if there is a named line with the name <custom-ident>-start, it contributes the first such line to the grid item’s placement. note: named...
...And 3 more matches

grid-column - CSS: Cascading Style Sheets
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 grid item’s placement. if a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. an <integer> value of 0 is invalid. span && [ <integer> || <custom-ident> ] contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search di...
...And 3 more matches

grid-row-end - CSS: Cascading Style Sheets
the grid-row-end css property specifies a grid item’s end position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-end edge of its grid 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. ...
...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. syntax /* keyword value */ grid-row-end: auto; /* <custom-ident> values */ grid-row-end: somegridarea; /* <integer> + <custom-ident> values */ grid-row-end: 2; grid-row-end: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-end: span 3; grid-row-end: span somegridarea; grid-row-end: 5 somegridarea span; /* global values */ grid-row-end: inherit; grid-row-end: initial; grid-row-end: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. ...
...he grid item’s placement. note: named grid areas automatically generate implicit named lines of this form, so specifying grid-row-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it). otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>. the <custom-ident> cannot take the span value. <integer> && <custom-ident>? contributes the nth grid line to the grid item’s placement. if a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. if a name is given as a <custom-ident>, only lines with that name are counted. if not enough lines with that name exist, all implicit grid lines are assumed to have that name for the pu...
...And 3 more matches

grid-row-start - CSS: Cascading Style Sheets
the grid-row-start css property specifies a grid item’s start position within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the inline-start edge of its grid 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. ...
...e 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 */ grid-row-start: auto; /* <custom-ident> values */ grid-row-start: somegridarea; /* <integer> + <custom-ident> values */ grid-row-start: 2; grid-row-start: somegridarea 4; /* span + <integer> + <custom-ident> values */ grid-row-start: span 3; grid-row-start: span somegridarea; grid-row-start: 5 somegridarea span; /* global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer...
... somegridarea; grid-row-start: 5 somegridarea span; /* global values */ grid-row-start: inherit; grid-row-start: initial; grid-row-start: unset; this property is specified as a single <grid-line> value. a <grid-line> value can be specified as: either the auto keyword or a <custom-ident> value or an <integer> value or both <custom-ident> and <integer>, separated by a space or the keyword span together with either a <custom-ident> or an <integer> or both. values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement, an automatic span, or a default span of 1. <custom-ident> if there is a named line with the name '<custom-ident>-start', it contributes the first such line to the grid item’s placement. note...
...And 3 more matches

outline-width - CSS: Cascading Style Sheets
agent. typically equivalent to 5px in desktop browsers (including firefox). ...
...ivalent to 5px in desktop browsers (including firefox). ...
... to 5px in desktop browsers (including firefox). ...
...And 3 more matches

Microdata - HTML: Hypertext Markup Language
(such as schema.org) that describes the item and its properties context. itemtype – specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active. ...
...s the item and its properties context. itemtype – specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active. ...
...operties context. itemtype – specifies the url of the vocabulary that will be used to define itemprop's (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active. ...
...And 3 more matches

Microformats - HTML: Hypertext Markup Language
oformat represents a a person or organization. the value of each property is defined in html using the class property any element can carry example h-card <p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">joe bloggs</a> <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, <span class="p-street-address">17 austerstræti</span> <span class="p-locality">reykjavík</span> <span class="p-country-name">iceland</span> </p> property description p-name the full/formatted name of the person or organization. u-email email address u-photo a photo of the person or organization u-url home page or other url representing...
...blah blah blah</p> </div> </article> properties property description p-name entry name/title p-author who wrote the entry, optionally embedded h-card dt-published when the entry was published p-summary short entry summary e-content full content of the entry parsed reply h-entry example <div class="h-entry"> <p><span class="p-author h-card"> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a> <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">greg mcverry</a></span> replied to <a class="u-in-reply-to" href="/docs/web/...
...the items of the feed h-event the h-event is for events on the web. ...
...And 3 more matches

Normal Flow - Learn web development
h have the margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too. let's look at a simple example that explains all of this: <h1>basic document flow</h1> <p>i am a basic block level element. ...
...adjacent block level elements sit on new lines below me.</p> <p>by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</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. ...
...d height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</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. ...
...And 2 more matches

How to build custom form controls - Learn web development
give it some basic semantics. here is what we need to rebuild a <select> element: <!-- this is our main container for our control. the tabindex attribute is what allows the user to focus the control. we'll see later that it's better to set it through javascript. --> <div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <span class="value">cherry</span> <!-- this container will contain all the options available for our control. because it's a list, it makes sense to use the ul element. --> <ul class="optlist"> <!-- each option only contains the value to be displayed, we'll see later how to handle the real value that will be sent with the form data --> <li class="option">cherry</li> <li...
...l use this select to send data from our custom control along with the rest of our form data. we will discuss this in greater depth later. ...
...ata from our custom control along with the rest of our form data. we will discuss this in greater depth later. ...
...And 2 more matches

CustomElementRegistry.define() - Web APIs
ment.attachshadow(). examples autonomous custom element the following code is taken from our popup-info-box-web-component example (see it live also). ...
...om element the following code is taken from our popup-info-box-web-component example (see it live also). ...
...t live also). ...
...And 2 more matches

DOMTokenList.contains() - Web APIs
boolean — true if the underlying list contains the given token, otherwise false. syntax tokenlist.contains(token); parameters token a domstring representing the token you want to check for the existance of in the list. return value a boolean, which is true if the calling list contains token, otherwise false. ...
... a domstring representing the token you want to check for the existance of in the list. return value a boolean, which is true if the calling list contains token, otherwise false. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then test for the existence of "c" in the list, and write the result into the <span>'s node.textcontent. ...
...to check for the existance of in the list. return value a boolean, which is true if the calling list contains token, otherwise false. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then test for the existence of "c" in the list, and write the result into the <span>'s node.textcontent. ...
...And 2 more matches

Element.getClientRects() - Web APIs
s boxes that have empty border-boxes. the left, top, right, and bottom coordinates can still be meaningful. fractional pixel offsets are possible. examples these examples draw client rects in various colors. note that the javascript function that paints the client rects is connected to the markup via the class withclientrectsoverlay. ...
...el offsets are possible. examples these examples draw client rects in various colors. note that the javascript function that paints the client rects is connected to the markup via the class withclientrectsoverlay. html example 1: this html creates three paragraphs with a <span> inside, each embedded in a <div> block. client rects are painted for the paragraph in the second block, and for the <span> element in the third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. ...
...ay. html example 1: this html creates three paragraphs with a <span> inside, each embedded in a <div> block. client rects are painted for the paragraph in the second block, and for the <span> element in the third block. <h3>a paragraph with a span inside</h3> <p>both the span and the paragraph have a border set. the client rects are in red. ...
...And 2 more matches

Using files from web applications - Web APIs
the file as a read-only string or "" if the type couldn't be determined. ...
...ly string or "" if the type couldn't be determined. ...
...e couldn't be determined. ...
...And 2 more matches

HTMLTextAreaElement - Web APIs
put.value; omsginput.value = soldtext.substring(0, nselstart) + (bdouble ? sstarttag + soldtext.substring(nselstart, nselend) + sendtag : sstarttag) + soldtext.substring(nselend); omsginput.setselectionrange(bdouble || nselstart === nselend ? nselstart + sstarttag.length : nselstart, (bdouble ? ...
...) + soldtext.substring(nselend); omsginput.setselectionrange(bdouble || nselstart === nselend ? nselstart + sstarttag.length : nselstart, (bdouble ? ...
...+ sstarttag.length : nselstart, (bdouble ? ...
...And 2 more matches

Using the group role - Accessibility
ot normative. examples example 1: using the group role with a html tree view the snippet below shows how the group role is added directly into the html source code. ...
...he group role with a html tree view the snippet below shows how the group role is added directly into the html source code. ...
... into the html source code. ...
...And 2 more matches

ARIA annotations - Accessibility
those changes. the semantics for this have long been available in html, via the <ins> and <del> elements: <p>freida’s pet is a <del>black cat called luna</del><ins>purple tyrannosaurus rex called tiny</ins>.</p> with the new additions, you now have new roles available to provide the same semantics, should you be unable to use <ins> and <del> elements for some reason: <p>freida’s pet is a <span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span>.</p> however, this often isn’t enough — when you’ve got a content change like the one above that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. this is the job of role="suggestion", which should be set on an...
...>purple tyrannosaurus rex called tiny</span>.</p> however, this often isn’t enough — when you’ve got a content change like the one above that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. this is the job of role="suggestion", which should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>. ...
...ld be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>. </p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>. </p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions...
...And 2 more matches

ARIA: Suggestion role - Accessibility
be used on an element that wraps an element with an insertion role, and one with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. ...
...aps an element with an insertion role, and one with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. ...
...ne with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. ...
...And 2 more matches

:nth-last-of-type() - CSS: Cascading Style Sheets
unts items backwards from the end, not forwards from the beginning. syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. ...
...wards from the end, not forwards from the beginning. syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. ...
...rom the end, not forwards from the beginning. syntax the nth-last-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end. see :nth-last-child for a more detailed explanation of its syntax. ...
...And 2 more matches

Border-image generator - CSS: Cascading Style Sheets
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"> </span> </div> <div class="css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> </div> <div class="css-property"> ...
...="name"> border-image-slice: </span> <span id="out-border-slice" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-width: </span> <span id="out-border-width" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-outset: </span> <span id="out-border-outset" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-repeat: </span> <span id="out-border-repeat" class="value"> </span> </div> <div class="css-property"> ...
...me"> border-image-outset: </span> <span id="out-border-outset" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-repeat: </span> <span id="out-border-repeat" class="value"> </span> </div> <div class="css-property"> <span class="name"> border-image-source: </span> <span id="out-border-source" class="value"> </span> </div> </div> </div> </div> css content /* grid of twelve * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 83%; } .span_9 { wid...
...And 2 more matches

Stacking context example 3 - CSS: Cascading Style Sheets
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. ...
... position: relative; border: 2px outset #990000; background-color: #ffdddd; padding-left: 5px; } #container2 { z-index: 1; position: absolute; top: 20px; left: 110px; } div.lev3 { z-index: 10; width: 100px; position: relative; border: 2px outset #000099; background-color: #ddddff; padding-left: 5px; } </style></head> <body> <br /> <div class="lev1"> <span class="bold">level #1</span> <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> ...
... <div id="container1"> <div class="lev2"> <br /><span class="bold">level #2</span> <br />z-index: 1; <div id="container2"> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> <div class="lev3"><span class="bold">level #3</span></div> ...
...And 2 more matches

position - CSS: Cascading Style Sheets
tor that is not static). if a positioned ancestor doesn't exist, it is positioned relative to the icb (initial containing block — see also the w3c definition), which is the containing block of the document's root element. html <h1>absolute positioning</h1> <p>i am a basic block level element. ...
...l elements sit on new lines below me.</p> <p class="positioned">by default we span 100% of the width of our parent element, and we are as tall as our child content. our total width and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</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. ...
...th and height is our content + padding + border width/height.</p> <p>we are separated by our margins. because of margin collapsing, we are separated by the width of one of our margins, not both.</p> <p>inline elements <span>like this one</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. ...
...And 2 more matches

Media buffering, seeking, and time ranges - Developer guides
length: the number of time ranges in the object. start(index): the start time, in seconds, of a time range. end(index): the end time, in seconds, of a time range. without any user interaction there is usually only one time range, but if you jump about in the media more than one time range can appear, as illustrated by the below visualization. this represents two buffered time ranges — one spanning 0 to 5 seconds and the second spanning 15 to 19 seconds. ------------------------------------------------------ |=============| |===========| | ------------------------------------------------------ 0 5 15 19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.b...
...his value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...
...e duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...
...And 2 more matches

Creating a cross-browser video player - Developer guides
ted after the <video> element, but inside the <figure> element (this is important for the fullscreen functionality, which is explained later on). ...
...ment, but inside the <figure> element (this is important for the fullscreen functionality, which is explained later on). ...
... the controls are initially hidden with a css display:none and will be enabled with javascript. ...
...And 2 more matches

Using custom elements - Web Components
instance of it is instantiated. in this case we attach a shadow root to the custom element, use some dom manipulation to create the element's internal shadow dom structure — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. ...
... a shadow root to the custom element, use some dom manipulation to create the element's internal shadow dom structure — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. ...
...m structure — which is then attached to the shadow root — and finally attach some css to the shadow root to style it. ...
...And 2 more matches

ui/frame - Archive of obsolete content
an be used in conjunction with a toolbar: you create a frame, then supply it to the toolbar's constructor, and the content is then displayed inside the toolbar. constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory. ...
...t supplied under your add-ons "data" directory. ...
...irectory. ...
...for example, this html document defines a <select> element and a couple of <span> elements, and includes a css file to style the content and a javascript script to implement behavior: <!doctype html> <html> <head> <link href="city-info.css" rel="stylesheet"></link> </head> <body> <select name="city" id="city-selector"></select> <span id="time" class="info-element"></span> <span id="weather" class="info-element"></span> <script type="text/javascript" src="city-info.js"></script> </body> </html> if we save this document as "city-info.html" under the add-on's "data" directory, we can create a frame hosting it and add the frame to a toolbar like this: var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var frame = new frame({ u...

Block and Line Layout Cheat Sheet - Archive of obsolete content
stletterstyleok ll_istopofpage ll_updatedband ll_impactedbyfloaters ll_lastfloaterwasletterframe ll_canplacefloater ll_knowstrictmode ll_instrictmode ll_lineendsinbr perframedata (why isn't this just stored in the frame?) mflags pfd_relativepos pfd_istextframe pfd_isnonemptytextframe pfd_isnonwhitespacetextframe pfd_isletterframe pfd_issticky pfd_isbullet perspandata in nslinelayout, a "span" is a container inline frame, and a "frame" is one of its children. perhaps perparentdata and perchilddata would be better names? nslinelayout::beginlinereflow creates the initial perspandata which is called the "root span". nsinlineframe::reflowframes creates a new perspandata when it calls nslinelayout::beginspan: at this time, the nslinelayout object's mcurrentspa...
..."span" is a container inline frame, and a "frame" is one of its children. perhaps perparentdata and perchilddata would be better names? ...
...ntainer inline frame, and a "frame" is one of its children. perhaps perparentdata and perchilddata would be better names? nslinelayout::beginlinereflow creates the initial perspandata which is called the "root span". nsinlineframe::reflowframes creates a new perspandata when it calls nslinelayout::beginspan: at this time, the nslinelayout object's mcurrentspan is switched to the new span. the new span records the old mcurrentspan as its parent. after reflowing the child inline frames, nsinlineframe::reflowframes calls nslinelayout::endspan, which pops the perspandata and re-sets mcurrentspan. mfirstframe the first perframedata structure in the span. mlastframe the last perframedata structure frame in the span. perframedata structures are added to the span as they are reflowed. mlastframe...
...a and re-sets mcurrentspan. mfirstframe the first perframedata structure in the span. mlastframe the last perframedata structure frame in the span. perframedata structures are added to the span as they are reflowed. mlastframe may also be directly manipulated if a line is split, or if frames are pushed from one line to the next. mframe the perframedata of the inline frame that "owns" the span, or null if this is the root span. mframe is initialized to the containing inline frame's perframedata when a new perspandata is pushed in nslinelayout::beginspan. original document information author(s): chris waterson last updated date: december 4, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a cre...

Audio for Web games - Game development
ng track's current time gives you enough information to synchronize separate pieces of audio. ...
...enough information to synchronize separate pieces of audio. ...
...p class="loading-text">loading...</p> <button data-playing="false" aria-decribedby="guitar-play-label"> <span id="guitar-play-label">play</span> </button> </li> <li data-loading="true"> <a href="bassguitar.mp3" class="track">bass guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="bass-play-label"> <span id="bass-play-label">play</span> </button> </li> <li data-loading="true"> <a href="drums.mp3" class="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">h...
.../a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">horns</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="horns-play-label"> <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://j...

The box model - Learn web development
as an outer display type of inline, then: the box will not break onto a new line. the width and height properties will not apply. vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box. horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box. the <a> element, used for links, <span>, <em> and <strong> are all examples of elements that will display inline by default. the type of box applied to an element is defined by display property values such as block and inline, and relates to the outer value of display. aside: inner and outer display types at this point, we'd better also explain inner and outer display types. as mentioned above, boxes in css have an outer display ty...
... begins on a new line, and expands to the full width available to it. the second is a list, which is laid out using display: flex. this establishes flex layout for the items inside the container, however, the list itself is a block box and — like the paragraph — expands to the full container width and breaks onto a new line. below this, we have a block-level paragraph, inside which are two <span> elements. these elements would normally be inline, however, one of the elements has a class of block, and we have set it to display: block. we can see how inline elements behave in this next example. the <span> elements in the first paragraph are inline by default and so do not force line breaks. we also have a <ul> element which is set to display: inline-flex, creating an inline box around...
... box. you can also change the padding on the class .container, which will make space between the container and the box. padding can be changed on any element, and will make space between its border and whatever is inside the element. the box model and inline boxes all of the above applies fully to block boxes. some of the properties can apply to inline boxes too, such as those created by a <span> element. in the example below, we have a <span> inside a paragraph and have applied a width, height, margin, border, and padding to it. you can see that the width and height are ignored. the vertical margin, padding, and border are respected but they do not change the relationship of other content to our inline box and so the padding and border overlaps other words in the paragraph. horizontal ...
... a subset of the block things we already know about: the width and height properties are respected. padding, margin, and border will cause other elements to be pushed away from the box. it does not, however, break onto a new line, and will only become larger than its content if you explicitly add width and height properties. in this next example, we have added display: inline-block to our <span> element. try changing this to display: block or removing the line completely to see the difference in display models. where this can be useful is when you want to give a link to a larger hit area by adding padding. <a> is an inline element like <span>; you can use display: inline-block to allow padding to be set on it, making it easier for a user to click the link. you see this fairly frequ...

Multiple-column layout - Learn web development
viverra quis vestibulum sem. aliquam tincidunt eget purus in interdum. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> something to take note of is that the rule does not take up any width of its own. it lies across the gap you created with column-gap. to make more space either side of the rule you will need to increase the column-gap size. spanning columns you can cause an element to span across all of the columns. in this case the content breaks when the spanning element is introduced and continues below creating a new set of column boxes. to cause an element to span all of the columns use the column-span property set to all. note that it isn't possible to cause an element to span some columns. the property can only have the value o...
...span across all of the columns. in this case the content breaks when the spanning element is introduced and continues below creating a new set of column boxes. to cause an element to span all of the columns use the column-span property set to all. note that it isn't possible to cause an element to span some columns. the property can only have the value of none (which is the default) or all. ...
...nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. duis felis orci, pulvinar id metus ut, rutrum luctus orci. ...
...le 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 auctor cursus massa at porta. integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. <h2>spanning subhead</h2> curabitur vehicula tellus neque, ac ornare ex malesuada et. in vitae convallis lacus. aliquam erat volutpat. suspendisse ac imperdiet turpis. aenean finibus sollicitudin eros pharetra congue. duis ornare egestas augue ut luctus. proin blandit quam nec lacus varius commodo et a urna. ut id ornare felis, eget fermentum sapien.</p> <p>nam vulputate diam nec tempor bibendum.

CSS FAQ - Learn web development
s are applied to html elements depends also on the elements hierarchy. it is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of css rules. .news { color: black; } .corpname { font-weight: bold; color: red; } <!-- news item text is black, but corporate name is red and in bold --> <div class="news"> (reuters) <span class="corpname">general electric</span> (ge.nys) announced on thursday... </div> in case of complex html hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style. explicitly re-defined style rule in css stylesheets, order is important. if you define a rule and then you re-define the same rule, the last definition is used. #stockticker...
... important. if you define a rule and then you re-define the same rule, the last definition is used. #stockticker { font-weight: bold; } .stocksymbol { color: red; } /* other rules */ /* other rules */ /* other rules */ .stocksymbol { font-weight: normal; } <!-- most text is in bold, except "ge", which is red and not bold --> <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ... </div> to avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector. use of a shorthand 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 remembere...
...and 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. #stockticker { font-size: 12px; font-family: verdana; font-weight: bold; } .stocksymbol { font: 14px 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: 12px verdana; /* font-weight is now set to normal */ } use of the * selector the * wildcard selector refers to any element, and it ha...
...ule order is important. #stockticker { font-weight: bold; font: 12px 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: 12px verdana; } .corpname { font-weight: bold; } .stockup { color: red; } <div id="section"> nys: <span class="corpname"><span class="stockup">ge</span></span> +1.0 ... </div> in this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockup class. so font-weight: bold; applied to the .corpname class is overridden by font-weight: normal; applied to all elements in the body. the use of the * selector should be minimized as it is a slo...

Example 1 - Learn web development
this is the first example of code that explains how to build a custom form widget. ...
... this is the first example of code that explains how to build a custom form widget. ...
...p-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active,...
...top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.acti...

Example - Learn web development
<li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password:...
...me: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</o...
... </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> <...
... name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: ver...

IAccessibleTable2
and unselects all previously selected columns. the behavior should mimic that of the application, but for those applications which do not have a means in the gui to select a full column of cells the behavior should be as follows: first any selected columns in the table are unselected. then the entire column of cells for the specified column is selected. if any of the cells in the selected column span additional columns, the cells in those columns are also selected. hresult selectcolumn( [in] long column ); parameters column 0 based index of the column to be selected. return value e_invalidarg if bad [in] passed. s_ok. selectedcells() returns a list of accessibles currently selected. [propget] hresult selectedcells( [out, size_is(, nselectedcells,)] iunknown cells, [out] long nselecte...
...ow() selects a row and unselects all previously selected rows. the behavior should mimic that of the application, but for those applications which do not have a means in the gui to select a full row of cells the behavior should be as follows: first any selected rows in the table are unselected. then the entire row of cells for the specified row is selected. if any of the cells in the selected row span additional rows, the cells in those rows are also selected. hresult selectrow( [in] long row ); parameters row 0 based index of the row to be selected. return value e_invalidarg if bad [in] passed. s_ok. summary() returns the summary description of the table. the returned object could be an iaccessible or an iaccessible2. [propget] hresult summary( [out] iunknown accessible ); parameters ...
... is null. s_ok. unselectcolumn() unselects one column, leaving other selected columns selected (if any). the behavior should mimic that of the application, but for those applications which do not have a means in the gui to unselect a full column of cells the behavior should be as follows: the entire column of cells for the specified column is unselected. if any of the cells in the selected column span additional columns, the cells in those columns are also unselected. hresult unselectcolumn( [in] long column ); parameters column 0 based index of the column to be unselected. return value e_invalidarg if bad [in] passed. s_ok. unselectrow() unselects one row, leaving other selected rows selected (if any). the behavior should mimic that of the application, but for those applications which do...
...invalidarg if bad [in] passed. s_ok. unselectrow() unselects one row, leaving other selected rows selected (if any). the behavior should mimic that of the application, but for those applications which do not have a means in the gui to unselect a full row of cells the behavior should be as follows: the entire row of cells for the specified row is unselected. if any of the cells in the selected row span additional rows, the cells in those rows are also unselected. hresult unselectrow( [in] long row ); parameters row 0 based index of the row to be unselected. return value e_invalidarg if bad [in] passed. s_ok. see also iaccessibletable iaccessibletablecell ...

DOMTokenList.entries() - Web APIs
the domtokenlist.entries() method returns an iterator allowing you to go through all key/value pairs contained in this object. the values are domstring objects, each representing a single token. syntax tokenlist.entries(); return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. ...
...ring objects, each representing a single token. syntax tokenlist.entries(); return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the key/value pairs using entries(), then iterate through each one using a for...of loop, writing them to the <span>'s node.textcontent. ...
.... syntax tokenlist.entries(); return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the key/value pairs using entries(), then iterate through each one using a for...of loop, writing them to the <span>'s node.textcontent. ...
...entries(); return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the key/value pairs using entries(), then iterate through each one using a for...of loop, writing them to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification. living standar...

DOMTokenList.replace() - Web APIs
en); parameters oldtoken a domstring representing the token you want to replace. newtoken a domstring representing the token you want to replace oldtoken with. return value a boolean value, which is true if oldtoken was successfully replaced, or false if not. note: in older browsers, replace() returns void. ...
...he token you want to replace oldtoken with. return value a boolean value, which is true if oldtoken was successfully replaced, or false if not. note: in older browsers, replace() returns void. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then replace a token in the list, and write the list into the <span>'s node.textcontent. ...
...return value a boolean value, which is true if oldtoken was successfully replaced, or false if not. note: in older browsers, replace() returns void. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then replace a token in the list, and write the list into the <span>'s node.textcontent. ...
...an value, which is true if oldtoken was successfully replaced, or false if not. note: in older browsers, replace() returns void. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then replace a token in the list, and write the list into the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.replace("c", "z"); console.log(result); if (result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the output looks like this: polyfill the following polyfill will add the replace method to the domtokenlist class. the foll...

Element.querySelector() - Web APIs
s returned: var el = document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches. ...
... var el = document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches. ...
...l = document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches. ...
... the specified baseelement are still considered when locating matches. html <div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </div> <div> <h5>output</h5> <div id="output"></div> </div> javascript var baseelement = document.queryselector("p"); document.getelementbyid("output").innerhtml = (baseelement.queryselector("div span").innerhtml); result the result looks like this: notice how the "div span" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the div element (it is still part of the specified selector). more examples see document.queryselector() for additional examples of the proper format for the selectors. specifications specifica...

GlobalEventHandlers.onresize - Web APIs
is an eventhandler that processes resize events. the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...that processes resize events. the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
.... the resize event fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...
...t fires after the window has been resized. syntax window.onresize = functionref; value functionref is a function name or a function expression. the function receives a focusevent object as its sole argument. ...

HTMLElement.innerText - Web APIs
.g detached from the document or is hidden from view), the returned value is the same as the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...
...he same as the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...
...s the node.textcontent property. example this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...
...le this example compares innertext with node.textcontent. note how innertext is aware of things like <br> elements, and ignores hidden elements. ...

InputEvent.dataTransfer - Web APIs
value a datatransfer object. examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...
...ample we've set up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...
...t up an event listener on the input event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...
...sted into the contenteditable <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...

ParentNode.prepend() - Web APIs
st child node currently in the parentnode. each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...parentnode. each node can be specified as either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
... either a node object or as a string; strings are inserted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...
...ted as new text nodes. return value undefined. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. ...

TextDecoder.prototype.decode() - Web APIs
ptions optional is a textdecodeoptions dictionary with the property: stream a boolean flag indicating that additional data will follow in subsequent calls to decode(). set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
...decodeoptions dictionary with the property: stream a boolean flag indicating that additional data will follow in subsequent calls to decode(). set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
... the property: stream a boolean flag indicating that additional data will follow in subsequent calls to decode(). set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...
... a boolean flag indicating that additional data will follow in subsequent calls to decode(). set to true if processing the data in chunks, and false for the final chunk or if the data is not chunked. it defaults to false. example this example encodes and decodes the euro symbol, €. ...

UIEvent.layerX - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scroll...
...this is a positioned div so clicking it will return layerx/layery values tha...
... absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="...

UIEvent.layerY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scroll...
...this is a positioned div so clicking it will return layerx/layery values tha...
... absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
...is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="...

UIEvent.pageY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolli...
...this is a positioned div so clicking it will return layerx/layery values that...
...: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. ...
... is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</span> </div> <div id="d2"> <span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more! this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element. note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" si...

Controlling multiple parameters with ConstantSourceNode - Web APIs
input control. the other oscillator has a fixed volume. html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of type range to control the volume of two of the three oscillators. ...
... the other oscillator has a fixed volume. html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of type range to control the volume of two of the three oscillators. ...
... setting up let's start by looking at the global variable initialization. let co...
...-o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time. setting up let's start by looking at the global variable initialization. let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode3 = null; let constantnode = null; let gainnode1 = null; let gainnode2 = null...

Window: resize event - Web APIs
aft document, and github issues to read the on-going discussions. examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...ithub issues to read the on-going discussions. examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
...going discussions. examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...
... examples window size logger the following example reports the window size each time it is resized. bear in mind that since the example is running in an <iframe>, you'll need to actually get the <iframe> to resize before you see an effect. ...

:first-of-type - CSS: Cascading Style Sheets
examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. ...
...yling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. ...
...paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. ...
...nt-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification. working draft matching elements are not required to have...

Using CSS custom properties (variables) - CSS: Cascading Style Sheets
which leads us to this: notice the repetition in the css. the background color is set to brown in several places. for some css declarations, it is possible to declare this higher in the cascade and let css inheritance solve this problem naturally. for non-trivial proj...
...which leads us to this: notice the repetition in the css. the background color is set to brown in several places. for some css declarations, it is possible to declare this higher in the cascade and let css inheritance solve this problem naturally. for non-trivial projects, this is not always possible...
... inheritance of custom properties custom properties do inherit. this mean...
... inheritance of custom properties custom properties do inherit. this means that if no value is set for a...

<percentage> - CSS: Cascading Style Sheets
editor's draft no significant change. css values and units module level 3the d...
... editor's draft no significant change. css values and units module level 3the definition of '<percentage>' in that spe...
... editor's draft no significant change. css values and units module level 3the definition of '<percentage>' in that specification. c...
... editor's draft no significant change. css values and units module level 3the definition of '<percentage>' in that specification. candidate recommendation no significant ...

z-index - CSS: Cascading Style Sheets
ck level is 0. this means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element. ...
...he z-indexes of descendants are not compared to the z-indexes of elements outside this element. ...
...xes of descendants are not compared to the z-indexes of elements outside this element. ...
...d to the z-indexes of elements outside this element. ...

Adding captions and subtitles to HTML5 video - Developer guides
implementation section. in this example we are using a different video, sintel, as it actually has some speech in it and therefore is better for illustrating how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
... control the subtitles menu that we will build. ...
...nu that we will build. ...
... browser compatibility browser support for ...

Video player styling basics - Developer guides
ther than residing inside unordered list items. ...
... unordered list items. ...
...lso defined here as internet explorer uses this defined colour for styling the progress bar's background colour as it increases. ...
...t; this also needs to be styled appropriately: .controls progress[data-state="fake"] { background:#e6e6e6; height:65%; } .controls progress span { width:0%; height:100%; display:inline-block; background-color:#2a84cd; } a .data-state class is also used here when a <progress> element is being "faked"; when it's in this state the background colour needs to be set. the internal <span> element used as the actual progressing part of the faked progress bar has its width initially set to 0% (it is updated via javascript) and it also has its background colour set. there are some browser-specific properties that need to be set to ensure that firefox and chrome use the required colour for the progress bar: .controls progress::-moz-progress-bar { background-color:#0095dd; } .co...

HTML attribute: pattern - HTML: Hypertext Markup Language
xpression for a simple crash course on using regular expressions to validate inputs). the example below restricts the value to 4-8 characters and requires that it contain only lower-case letters. ...
...rash course on using regular expressions to validate inputs). the example below restricts the value to 4-8 characters and requires that it contain only lower-case letters. ...
... relying on the title attribute for the visu...
...quired size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size: 80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern. relying on the title attribute for the visual display of text content is generally discour...

<tbody>: The Table Body element - HTML: Hypertext Markup Language
e list, and update the table so that instead of listing each student's major on every row, the students are grouped by major, with heading rows for each major. ...
...r> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>3741255</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> </tr> </tbody> <tbody> <tr> <th colspan="2">astrophysics</th> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> </tr> <tr> <td>8892377</td> <td>toyota, hiroko</td> </tr> </tbody> </table> notice that each major is placed in a separa...
...that heading lists the name of the major contained within the <tbody>. then each remaining row in each major's <tbody> consists of two cells: the first for the student's id and the second for their name. ...
...that heading lists the name of the major contained within the <tbody>. then each remaining row in each major's <tbody> consists of two cells: the first for the student's id and the second for their name. ...

itemref - HTML: Hypertext Markup Language
data data model. it is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
... a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
...ated does not follow a convenient tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. ...
...t tree structure. for example, it allows authors to mark up data in a table so that each column defines a separate item while keeping the properties in the cells. example html <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } } result specifications specification status comment html microdatathe definition of 'itemref' in that specification. working draft ...

dx - SVG: Scalable Vector Graphics
the dx attribute indicates a shift along the x-axis on the position of an element or its content. ...
... 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 values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, 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 there are more values than glyphs, extra values are ignored. value list of...
...fects module level 1the definition of 'dx' in that specification. working draft initial definition for <fedropshadow> filter effects module level 1the definition of 'dx' in that specification. working draft definition for <feoffset> scalable vector graphics (svg) 2the definition of 'dx' in that specification. candidate recommendation definition for <text> and <tspan> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <feoffset> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition o...
...' in that specification. ...

dy - SVG: Scalable Vector Graphics
the dy attribute indicates a shift along the y-axis on the position of an element or its content. ...
... 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 values than glyphes, extra values are ignored. value list of <length> default value none animatable yes tspan for <tspan>, 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. if there are more values than glyphes, extra values are ignored. value list...
...fects module level 1the definition of 'dy' in that specification. working draft initial definition for <fedropshadow> filter effects module level 1the definition of 'dy' in that specification. working draft definition for <feoffset> scalable vector graphics (svg) 2the definition of 'dy' in that specification. candidate recommendation definition for <text> and <tspan> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <feoffset> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition o...
...' in that specification. ...

visibility - SVG: Scalable Vector Graphics
attribute, visibility can be used as a css property. see the css visibility property for more information. ...
...mple toggles the css visibility of the svg image path. ...
...sibility of the svg image path. ...
...button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification sta...

SVG documentation index - SVG: Scalable Vector Graphics
the descent attribute defines the maximum unaccented depth of the font. 57 diffuseconstant filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and end points of a line of text as used by the text-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 59 display svg, svg attribute the display attribute lets you control the rendering of graphical or container elements. ...
...rated with an underline, overline and/or strike-through. 220 text-rendering svg, svg attribute the text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text. 221 textlength attribute, css, html, javascrip, svg attribute, text, height, length, size, width the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. 222 to needscompatt...
... the word-spacing attribute specifies spacing behavior between words. 250 writing-mode needsexample, svg, svg attribute the writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. the writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <textpath> sub-elements. (note that the inline-progression-direction can change within a <text> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) 251 x svg, svg attribute the x attribute defines a x-axis coordinate in the user coordinate system. 252 x-height deprecated, svg, svg attribute ...
...ble, short-text description of any svg container element or graphics element. 374 <tref> element, reference, svg, svg text content the textual content for a <text> svg element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element. 375 <tspan> element, reference, svg, svg text content 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. 376 <use> element, reference, svg, svg graphics the <use> element takes nodes from within the svg document, and duplicates them somewhere else. ...

JXON - Archive of obsolete content
"@type": "hidden", "@name": "currency", "@value": "gbp" }, { "@type": "hidden", "@name": "amount", "@value": 0 }, { "@type": "hidden", "@name": "name", "@value": "captured" }], "table": { "tr": [{ "th": { "@style": "text-align: right;", "keyvalue": "product:" }, "td": { "span": [{ "input": { "@type": "radio", "@name": "nome", "@id": "rel_tshirt", "@value": "tshirt" }, "label": { "@for": "rel_tshirt", "keyvalue": "t-shirt" }, "@class": "product" }, { "input": { "@type": "radio", ...
...harcode === 0 || /\d/.test(string.fromcharcode(okeyevent.charcode)); } </script> <input type="hidden" name="instid" value="1234" /> <input type="hidden" name="currency" value="gbp" /> <input type="hidden" name="amount" value="0" /> <input type="hidden" name="name" value="captured" /> <table> <tr> <th style="text-align: right;">product:</th> <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></...
... class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">t-shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">pullover</label></span> </td> </tr> <tr> <th style="text-align: right;">quantity:</th> <td> <input type="text" name="myinput" onkeypress="return numbersonly(this, event);" onpaste="return false;" /> </td> </tr> </table> <p> <input type="submit" value="purchase!" /> </p> </form> </div> other examples example #1: how to use jxon to create a...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
acters. mozilla will not skip these, so sometimes you need to distinguish these nodes. every node has a nodetype property specifying the node type. for example, an element node has type 1, while a text node has type 3 and a comment node is type 8. ...
...illa will not skip these, so sometimes you need to distinguish these nodes. every node has a nodetype property specifying the node type. for example, an element node has type 1, while a text node has type 3 and a comment node is type 8. ...
...id].document; } return rv; } </script> another difference between mozilla and internet explorer is the html that the rich text editor creates. mozilla defaults to using css for the generated markup. however, mozilla allows you to toggle between html and css mode using the usecss execcommand and toggling it between true and false. internet explorer always uses html markup. mozilla (css): <span style="color: blue;">big blue</span> mozilla (html): <font color="blue">big blue</font> internet explorer: <font color="blue">big blue</font> below is a list of commands that execcommand in mozilla supports: table 6. rich text editing commands command name description argument bold toggles the selection's bold attribute. --- createlink generates...

HTML: A good basis for accessibility - Learn web development
able cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcol...
...all rights reversed.</p> </td> </tr> </table> if you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). ...

HTML: A good basis for accessibility - Learn web development
able cells to contain the header, footer, sidebar, main content column, etc. this is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables. ...
... <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> <h2>related</h2> <!-- aside content goes here --> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- footer row --> <tr id="footer" bgcol...
...all rights reversed.</p> </td> </tr> </table> if you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). ...

Advanced form styling - Learn web development
one; }. however, this seems to get rid of the icon with focus too, with no apparent way to get it back. styling checkboxes and radio 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. ...
... get rid of the icon with focus too, with no apparent way to get it back. styling checkboxes and radio 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. ...
...d of the icon with focus too, with no apparent way to get it back. styling checkboxes and radio 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. ...

Example 2 - Learn web development
this is the second example that explain how to build custom form widgets. ...
... this is the second example that explain how to build custom form widgets. ...
...{ var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hid...

HTML Cheatsheet - Learn web development
inline elements can be implemented within the <body></body> tags. ...
...n the <body></body> tags. ...
...">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="25" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another inline container <p>span its used to differentiate a part <span style="color:blue">of the content</span> that we will work on differently </p> span its used to differentiate a part of the content that we will work on differently emphasize some text <em>i'm posh</em> i'm posh italic textt you can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in ita...

HTML text fundamentals - Learn web development
default, the browser will give it a large font size to make it look like a heading (although you could style it to look like anything you wanted using css). more importantly, its semantic value will be used in multiple ways, for example by search engines and screen readers (as mentioned above). on the other hand, you could make any element look like a top level heading. consider the following: <span style="font-size: 32px; margin: 21px 0; display: block;">is this a top level heading?</span> this is a <span> element. it has no semantics. you use it to wrap content when you want to apply css to it (or do something to it with javascript) without giving it any extra meaning. (you'll find out more about these later on in the course.) we've applied some css to it to make it look like a top level ...
...e, expressing annoyance that the person arrived a bit late. in html we use the <em> (emphasis) element to mark up such instances. as well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. to do that, you'd use a <span> element and some css, or perhaps an <i> element (see below). <p>i am <em>glad</em> you weren't <em>late</em>.</p> strong importance to emphasize important words, we tend to stress them in spoken language and bold them in written language. for example: this liquid is highly toxic. i am counting on you. do not be late! in html we use the <strong> (strong importance) element to mark up such i...
... is highly toxic. i am counting on you. do not be late! in html we use the <strong> (strong importance) element to mark up such instances. as well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. to do that, you'd use a <span> element and some css, or perhaps a <b> element (see below). <p>this liquid is <strong>highly toxic</strong>.</p> <p>i am counting on you. <strong>do not</strong> be late!</p> you can nest strong and emphasis inside one another if desired: <p>this liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p> active learning: let's be important! in t...

Accessibility API cross-reference
roup, such as a static table of contents. directory see <nav> if it really is a table of contents, use <toc> containing <toci> elements (which are wrappers for internal hyperlinks in such a table). for an index, use <index> with a <l>(list) inside. no default semantics in html, but semantics and other accessibility features may be provided with aria. see also span n/a n/a n/a <div> <div> but if you need custom semantic structure, use <nonstruct> instead window that corresponds to an mdi document. in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listb...
... separator separator <hr> adjust in increments from min to max values slider slider slider slider <input type=range> a system sound sound n/a n/a n/a no default semantics in html, but semantics and other accessibility features may be provided with aria. see also div n/a n/a n/a <span> span kind of like a dial, but controls the value in a related field spinbutton n/a n/a spinbutton uneditable text statictext label label see aria-readonly the text nodes of html elements are uneditable by default, apart from <input type=text>, or those with a contenteditable attribute entire status bar. in ...
...a-checked checked (boolean attribute) defines the total number of columns in a table, grid, or treegrid. n/a n/a aria-colcount defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. n/a n/a aria-colindex defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. n/a n/a aria-colspan identifies the element (or elements) whose contents or presence are controlled by the current element. n/a n/a aria-controls indicates the element that represents the current item within a container or set of related elements. n/a n/a ...

Debugging Table Reflow
different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...hs 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. ...
...uired of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell, col, etc. + padding #define min_adj 3 // minimum width + padding due to col spans #define des_adj 4 // desired width + padding due to col spans #define fix_adj 5 // fixed width + padding due to col spans #define pct 6 // percent width of cell or col #define pct_adj 7 // percent width of cell or col from percent colspan #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // width after the table has been balanced, considering all of the others in the last log snippet none of these width's has been set. leaving ...

Aggregate view - Firefox Developer Tools
r" at the top-right of the pane. you can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated. type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". each type gets a row in the table, and rows are ordered by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. ...
...alloc.js", or in functions called by that function we can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations. it's easier to explain this with reference to a simple example. for this we'll use the dom allocation example. this page simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 htmlspanelement objects). let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line ...
...ree to find out exactly where we're allocating memory: this is where the "bytes" and "count" columns are useful: they show allocation size and number of allocations at that exact point. so in the example above, we can see that we made 4002 allocations, accounting for 89% of the total heap, in createtoolbarbutton(), at alloc.js line 9, position 23: that is, the exact point where we create the <span> elements. the file name and line number is a link: if we click it, we go directly to that line in the debugger: inverted call stack the call stack view is top-down: it shows allocations that happen at that point or points deeper in the call tree. so it's good for getting an overview of where your program is memory-hungry. however, this view means you have to drill a long way down to find th...

DOM allocation example - Firefox Developer Tools
. you can try out the site at https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html. ...
... ...
... ...

Animation inspector example: CSS transitions - Firefox Developer Tools
firefox-logo-animation example animation using css transitions. ...
... firefox-logo-animation example animation using css transitions. ...
...lter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); transform: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javascript content function toggleselection(e) { if (e.button != 0) { return; } if (e.target.classlist.contains("icon")) { var wasselected = (e.target.getattribute("id") == "selected"); clearselection(); if (!wasselected) { e.target.setattribute("id", "selected"); } } } function clearselection() { var selected = document.ge...

DOMTokenList.add() - Web APIs
the add() method of the domtokenlist interface adds the given token to the list. syntax tokenlist.add(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token (or tokens) to add to the tokenlist. return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. ...
...ven token to the list. syntax tokenlist.add(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token (or tokens) to add to the tokenlist. return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then add a new token to the list, and write the list into the <span>'s node.textcontent. ...
...token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token (or tokens) to add to the tokenlist. return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then add a new token to the list, and write the list into the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.add("d"); span.textcontent = classes; the output looks like this: you can add multiple tokens as well: span.classlist.add("d", "e", "f"); specifications specification status comment domthe definition of 'add()' in that specification. ...

DOMTokenList.keys() - Web APIs
the keys() method of the domtokenlist interface returns an iterator allowing to go through all keys contained in this object. the keys are of type unsigned integer. syntax tokenlist.keys(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. ...
... keys are of type unsigned integer. syntax tokenlist.keys(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the keys using values(), then iterate through those keys using a for ... of loop, writing each one to the <span>'s node.textcontent. ...
...okenlist.keys(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the keys using values(), then iterate through those keys using a for ... of loop, writing each one to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification. livi...

DOMTokenList.remove() - Web APIs
the domtokenlist interface removes the specified tokens from the list. syntax tokenlist.remove(token1[, token2[, ...tokenn]]); parameters tokenn a domstring representing the token you want to remove from the list. if the string is not in the list, no error is thrown, and nothing happens. ...
...]]); parameters tokenn a domstring representing the token you want to remove from the list. if the string is not in the list, no error is thrown, and nothing happens. return value undefined examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then remove a token from the list, and write the list into the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.remove("c"); span.textcontent = classes; the output looks like this: to remove multiple classes at once, you can supply multiple tokens. the order you supply the tokens doesn't have to match the order they appear in the lis...
....textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.remove("c"); span.textcontent = classes; the output looks like this: to remove multiple classes at once, you can supply multiple tokens. the order you supply the tokens doesn't have to match the order they appear in the list: let span2 = document.getelementsbytagname("span")[0] let classes2 = span.classlist; classes2.remove("c", "b"); span2.textcontent = classes; specifications specification status comment domthe definition of 'remove()' in that specification. living standard initial definition ...

DOMTokenList.values() - Web APIs
the values() method of the domtokenlist interface returns an iterator allowing developers to go through all values contained in the domtokenlist. the individual values are domstring objects. syntax tokenlist.values(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. ...
...values are domstring objects. syntax tokenlist.values(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the values using values(), then iterate through those values using a for ... of loop, writing each one to the <span>'s node.textcontent. ...
...st.values(); parameters none. return value returns an iterator. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we when retrieve an iterator containing the values using values(), then iterate through those values using a for ... of loop, writing each one to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification. ...

Slottable: assignedSlot - Web APIs
eate a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-text. ...
...graph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-text. ...
...ntents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slottable element by including it inside the element with a slot attribute with the value my-text. here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in. let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-text">' specifications specification status comment domthe definition of 'assignedslot' in that specification. living standard initial definition. ...

window.location - Web APIs
nullam ultrices dolor ac dolor imperdiet ullamcorper. suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. quisque in ante tellus, in placerat est. pellentesque habitant morbi tristique senectus et netu...
...us ut nisi consectetur cursus. ut vitae quam elit. donec dignissim est in quam tempor consequat. aliquam aliquam diam non felis convallis suscipit. nulla facilisi. donec lacus risus, dignissim et fringilla et, egestas vel eros. duis malesuada accumsan dui, at fringilla mauris bibendum quis. cras adipiscing ultricies fermentum. praesent bibendum condimentum feugiat.</p> <p id="mybookmark1">[&nbsp;<span class="intlink" onclick="showbookmark('#mybookmark2');">go to bookmark #2</span>&nbsp;]</p> <p>vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. proin ac ante a felis ornare vehicula. fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. in tincidunt tincidunt tincidunt. nulla vi...
...rttitor at, volutpat vitae eros. sed pretium pharetra dapibus. donec auctor interdum erat, lacinia molestie nibh commodo ut. maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. curabitur id arcu est. in semper mollis lorem at pellentesque. sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. pellentesque porttitor facilisis ultricies.</p> <p id="mybookmark2">[&nbsp;<span class="intlink" onclick="showbookmark('#mybookmark1');">go to bookmark #1</span> | <span class="intlink" onclick="showbookmark('#mybookmark1', false);">go to bookmark #1 without using location.hash</span> | <span class="intlink" onclick="showbookmark('#mybookmark3');">go to bookmark #3</span>&nbsp;]</p> <p>phasellus tempus fringilla nunc, eget sagittis orci molestie vel. nulla sollicitudin diam n...

ARIA: Comment role - Accessibility
the comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. the related comment is marked up using an html structure wrapped with a <div> containing role="comment". ...
...ment/reaction to some content on the page, or to a previous comment. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. the related comment is marked up using an html structure wrapped with a <div> containing role="comment". ...
...nt. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. the related comment is marked up using an html structure wrapped with a <div> containing role="comment". ...

ARIA: Mark role - Accessibility
the mark landmark role semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. if possible, you should use this element instead. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. ...
...ntaining text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. if possible, you should use this element instead. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. ...
...this is semantically equivalent to the html <mark> element. if possible, you should use this element instead. examples in the following example we have a document section that has been commented. the commented section is marked up using <span role="mark">. <p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the related comment is marked up using an html structure wrapped with a <div> containing role="comment". to associate the comm...

ARIA: switch role - Accessibility
he aria switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." this example creates a widget and assigns the aria switch role to it. <button type="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the checkbox role, the aria-checked attribute is required. the two possible values are true and false. unlike a <checkbox> or role="checkbox...
...f power switch. html the html is fairly simple here. the switch is implemented as a <button> element which is initially checked courtesy of its aria-checked attribute being set to "true". the switch has two child elements containing the "off" and "on" labels and is followed by a <label> identifying the switch. <button role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> javascript this javascript code defines and applies a function to handle click events on switch widgets. the function changes the aria-checked attribute from true to false, or vice versa. document.queryselectorall(".switch").foreach(function(theswitch) { theswitch.addeventlistener("click", ...
... the purpose of the css is to establish a look and feel for the switch that's reminiscent of the power switch paradigm. ...

ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have t...
...press handle the case where the user presses the space key to change the state of the checkbox by changing the value of the aria-checked attribute and the appearance of the checkbox so it appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element. ...
...earance of the checkbox so it appears checked or unchecked to the sighted user examples the following example creates a simple checkbox element using css and javascript to handle the checked or unchecked status of the element. ...

Keyboard-navigable JavaScript widgets - Accessibility
this document describes techniques to make javascript widgets accessible with the keyboard. using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. ...
...values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11"). non-native controls native html elements that are interactive, like <a>, <input> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards. authors can also make a <div> or <span> keyboard accessible by adding a tabindex of 0. this is particularly useful for components that use interactive elements that do not exist in html. grouping controls for grouping widgets such as menus, tablists, grids, or tree views, the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). users s...
...s take up space, and ie doesn't implement css outlines). prevent used key events from performing browser functions if your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code. if your event handler returns false, the event will not be propagated beyond your handler. for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, preventing the browser from performing any action based on the keystroke. don't rely on consistent behavior for key repeat, at this point unfortunately onkeydown may or may not repeat depending on what browser and os you're running on. ...

::slotted() - CSS: Cascading Style Sheets
any element that has been placed into a slot inside an html template (see using templates and slots for more information). this only works when used inside css placed within a shadow dom. note also that this selector won't select a text node placed into a slot; it only targets actual elements. ...
... slot inside an html template (see using templates and slots for more information). this only works when used inside css placed within a shadow dom. note also that this selector won't select a text node placed into a slot; it only targets actual elements. ...
...latecontent.clonenode(true)); } }) you'll see that when filling the style element with content, we select all slotted elements (::slotted(*)) and give them a different font and color. this allows them to stand out better next to the slots that haven't been successfully filled. the element looks like this when inserted into the page: <person-details> <p slot="person-name">dr. shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">superhero</span> </person-details> specifications specification status comment css scoping module level 1the definition of '::slotted' in that specification. working draft initial definition. browser compatibility the compatibility table on this page is generated from structured data. if...

:last-of-type - CSS: Cascading Style Sheets
examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. ...
...styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. ...
...t paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; } result nested elements this example shows how nested elements can also be targeted. note that the universal selector (*) is implied when no simple selector is written. html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type { background-color: pink; } result specifications specification status comment selectors level 4the definition of ':last-of-type' in that specification. worki...

Border-radius generator - CSS: Cascading Style Sheets
this tool can be used to generate css3 border-radius effects. ...
...ckbox" data-topic='bottom-right'></div> <div class="ui-checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </div> </div> </div> css content /* grid of ten * ========================================================================== */ .span_12 { width: 100%; } .span_11 { width: 91.46%; } .span_10 { width: 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 * ==========================================...
...= topic; this.node = node; this.unit = unit; this.sensivity = sensivity > 0 ? ...

CSS Multi-column Layout - CSS: Cascading Style Sheets
becomes a fragment, much like a printed page becomes a fragment of an overall document. therefore the properties now defined in the css fragmentation specification are required in order to control how content breaks between columns. ...
... handling overflow in multicol what happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container. ...
... handling overflow in multicol what happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container. content breaks in multicol introduction to the fragmentation specification and how to control where column content breaks. ...

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> it is worth noting, that using these space distribution values may cause items on your grid to become larger. if an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. we’re always working in a strict grid. therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch. in...
...ecide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch. in the below image i have placed the grid with align-content, with a value of start alongside the grid when align-content has a value of space-between. you can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks: justifying the grid tracks on the row axis on the inline axis, we can use justify-content to perform the same type of alignment that we used align-content for in the block axis. using the same example, i am setting justify-content to space-around. this once again causes trac...
...tracks have taken on extra height as they gain the additional space added to the gap between those two tracks: justifying the grid tracks on the row axis on the inline axis, we can use justify-content to perform the same type of alignment that we used align-content for in the block axis. using the same example, i am setting justify-content to space-around. ...

Subgrid - CSS: Cascading Style Sheets
meaning that they do not take their track sizing from the parent grid. this makes it difficult to line nested grid items up with the main grid. if you set the value subgrid on grid-template-columns, grid-template-rows or both, instead of creating a new track listing the nested grid uses the tracks defined on the parent. for example, if you use grid-template-columns: subgrid and the nested grid spans three column tracks of the parent, 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 an...
...e 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 100px 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 grid area on the parent expands to be large enough for this nested grid. note that line numbering restarts inside the subgrid — column line 1, when inside the subgrid, is the first line o...
...nt that may be placed in different positions on the main grid, knowing that the line numbers on the component will always be the same. subgrid for rows the next example is the same setup, however we are using subgrid as the value of grid-template-rows and defining explicit column tracks. so the column tracks behave as a regular nested grid, but the rows are tied to the two tracks that the child spans. a subgrid in both dimensions you can of course define both rows and columns as a subgrid, as in the example below. this means that your subgrid is tied in both dimensions to the number of tracks on the parent. no implicit grid in a subgridded dimension if you need to autoplace items, and do not know how many items you will have, take care when creating a subgrid, as it will prevent addi...

Stacking context example 2 - CSS: Cascading Style Sheets
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. ...
...0px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; } </style></head> <body> <br /> <div id="div1"><br /> <span class="bold">div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; <div id="div4"><br />...
...div #1</span><br /> position: relative; <div id="div2"><br /> <span class="bold">div #2</span><br /> position: absolute;<br /> z-index: 2; </div> </div> <br /> <div id="div3"><br /> <span class="bold">div #3</span><br /> position: relative;<br /> z-index: 1; <div id="div4"><br /> <span class="bold">div #4</span><br /> position: absolute;<br /> z-index: 10; </div> </div> </body> </html> ...

Linear-gradient Generator - CSS: Cascading Style Sheets
<div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker ...
... preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic, onchangefunc) { var wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.su...
...unit; this.sensivity = sensivity > 0 ? sensivity : 5; value = isnan(value) ? ...

break-inside - CSS: Cascading Style Sheets
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 st...
...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 hea...
...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. ...

font-size - CSS: Cascading Style Sheets
he font-size property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). this means em units and percentages do the same thing for font-size. one important fact to keep in mind: em values compound. ...
... the parent element's font size (unlike all other properties, where they're relative to the font size on the element). this means em units and percentages do the same thing for font-size. one important fact to keep in mind: em values compound. take the following html and css: html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; } <div> <span>outer <span>inner</span> outer</span> </div> the result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px. this is because the inner <span>'s font-size is 1.6em which is relative to its parent's font-size, which is in turn relative to its parent's font-size. this is often called com...
...ot html element, not the parent element. in other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding. the css below is nearly identical to the previous example. the only exception is that the unit has been changed to rem. html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6rem; } then we apply this css to the same html, which looks like this: <span>outer <span>inner</span> outer</span> in this example, the words “outer inner outer” are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 10px). formal definition initial valuemediumapplies toall elements. it also applies to ::first-letter an...

Rich-Text Editing in Mozilla - Developer guides
g a link) or affect an entire line (indenting). when using contenteditable, calling execcommand will affect the currently active editable element. ...
...ifferences one major difference between mozilla and internet explorer that affects designmode is the generated code in the editable document: while internet explorer uses html tags (em, i, etc), mozilla 1.3 will generate by default spans with inline style rules. the stylewithcss command can be used to toggle between css and html markup creation. ...
... and internet explorer that affects designmode is the generated code in the editable document: while internet explorer uses html tags (em, i, etc), mozilla 1.3 will generate by default spans with inline style rules. the stylewithcss command can be used to toggle between css and html markup creation. figure 1 : generated html differences mozilla: <span style="font-weight: bold;">i love geckos.</span> <span style="font-weight: bold; font-style: italic; text-decoration: underline;">dinosaurs are big.</span> internet explorer: <strong>i love geckos.</strong> <strong><em><u>dinosaurs are big.</u></em></strong> another difference between mozilla and ie is how to access the document object of an iframe, which is usually used in conjunction with designmode. mozilla uses the w3c standard wa...

HTML attribute reference - HTML: Hypertext Markup Language
s referenced by the code attribute are stored. color <basefont>, <font>, <hr> this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb format. note: this is a legacy attribute. please use the css color property instead. cols <textarea> defines the number of columns in a textarea. colspan <td>, <th> the colspan attribute defines the number of columns a cell should span. content <meta> a value associated with http-equiv or name depending on the context. contenteditable global attribute indicates whether the element's content is editable. contextmenu global attribute defines the id of a <menu> element which will serve as the element...
...nk> specifies the relationship of the target object to the link object. required <input>, <select>, <textarea> indicates whether this element is required to fill out or not. reversed <ol> indicates whether the list should be displayed in a descending order instead of a ascending. rows <textarea> defines the number of rows in a text area. rowspan <td>, <th> defines the number of rows a table cell should span over. sandbox <iframe> stops a document loaded in an iframe from using certain features (such as submitting forms or opening new windows). scope <th> defines the cells that the header test (defined in the th element) relates to. scoped <style> selected <option> defines...
... value which will be selected on page load. shape <a>, <area> size <input>, <select> defines the width of the element (in pixels). if the element's type attribute is text or password then it's the number of characters. sizes <link>, <img>, <source> slot global attribute assigns a slot in a shadow dom shadow tree to an element. span <col>, <colgroup> spellcheck global attribute indicates whether spell checking is allowed for the element. src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> the url of the embeddable content. srcdoc <iframe> srclang <track> srcset <img>, <source> one or more responsive image cand...

<col> - HTML: Hypertext Markup Language
have an effect on the column (see the css 2.1 specification for a list). content categories none. permitted content none, it is an empty element. tag omission it must have start tag, but must not have an end tag. permitted parents <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a span attribute. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmltablecolelement attributes this element includes the global attributes. span this attribute contains a positive integer indicating the number of consecutive columns the <col> element spans. if not present, its default value is 1. deprecated...
...of the <colgroup> element this <col> element belongs too. if there are none, the left value is assumed. note: to achieve the same effect as the left, center, right or justify values: do not try to set the text-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector. set a to zero and b to the position of the column in the table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. bgcolor the backgrou...
...e to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will put the text as close to the top of the cell as it is possible. note: do not try to set the vertical-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector where a is the total number of the columns in the table and b is the ordinal position of the column in the table. only after this selector the vertical-align property can be used. if the table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. ...

<input type="button"> - HTML: Hypertext Markup Language
using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. ...
...t and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. ...
...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: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } input[type="range"] { width: 70%; } span { position: relative; bottom: 5px; } var canvas = document.queryselector('.mycanvas'); var width = canvas.width = window.innerwidth; var height = canvas.height = window.innerheight-85; var ctx = canvas.getcontext('2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('inp...

<listing> - HTML: Hypertext Markup Language
an also be obtained on a simple <div> element, by applying an adequate css style using monospace as the generic-font value in a font-family property. attributes this element has no other attributes than the global attributes, common to all elements. dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on ...
...ox for androidopera for androidsafari on iossamsung internetlisting deprecatedchrome no support noedge no support nofirefox no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.ie no support noopera no support nosafari no support nowebview android no support nochrome android no support n...
...not...

<table>: The Table element - HTML: Hypertext Markup Language
head, tfoot, and tbody</p> <table> <thead> <tr> <th>header content 1</th> <th>header content 2</th> </tr> </thead> <tbody> <tr> <td>body content 1</td> <td>body content 2</td> </tr> </tbody> <tfoot> <tr> <td>footer content 1</td> <td>footer content 2</td> </tr> </tfoot> </table> <p>table with colgroup</p> <table> <colgroup span="4"></colgroup> <tr> <th>countries</th> <th>capitals</th> <th>population</th> <th>language</th> </tr> <tr> <td>usa</td> <td>washington, d.c.</td> <td>309 million</td> <td>english</td> </tr> <tr> <td>sweden</td> <td>stockholm</td> <td>9 million</td> <td>swedish</td> </tr> </table> <p>table with colgroup and col</p> <table> <colgroup> ...
... <th>capitals</th> <th>population</th> <th>language</th> </tr> <tr> <td>usa</td> <td>washington, d.c.</td> <td>309 million</td> <td>english</td> </tr> <tr> <td>sweden</td> <td>stockholm</td> <td>9 million</td> <td>swedish</td> </tr> </table> <p>table with colgroup and col</p> <table> <colgroup> <col style="background-color: #0f0"> <col span="2"> </colgroup> <tr> <th>lime</th> <th>lemon</th> <th>orange</th> </tr> <tr> <td>green</td> <td>yellow</td> <td>orange</td> </tr> </table> <p>simple table with caption</p> <table> <caption>awesome caption</caption> <tr> <td>awesome data</td> </tr> </table> table { border-collapse: collapse; border-spacing: 0px; } table, th, td { padding: 5px; borde...
... accessibility tutorials h63: using the scope attribute to associate header cells and data cells in data tables | w3c techniques for wcag 2.0 complicated tables assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. this is typically indicated by the presence of the colspan and rowspan attributes. ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the colspan and rowspan attributes. in addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty...

HTML elements reference - HTML: Hypertext Markup Language
mphasis. the <em> element can be nested, with each level of nesting indicating a greater degree of emphasis. <i> the html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. <kbd> the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. <mark> the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context. <q> the html <q> element indicates that the enclosed text is ...
... the html sample element (<samp>) is used to enclose inline text which represents sample (or quoted) output from a computer program. <small> the html <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. by default, it renders text within it one font-size smaller, such as from small to x-small. <span> the html <span> element is a generic inline container for phrasing content, which does not inherently represent anything. it can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. <strong> the html strong importance element (<strong>) indicates that its contents have strong importance, seriousn...
...inline text which should be displayed as subscript for solely typographical reasons. <sup> the html superscript element (<sup>) specifies inline text which is to be displayed as superscript for solely typographical reasons. <time> the html <time> element represents a specific period in time. <u> the html unarticulated annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. <var> the html variable element (<var>) represents the name of a variable in a mathematical expression or a programming context. <wbr> the html <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, tho...

HTML documentation index - HTML: Hypertext Markup Language
<isindex> was an obsolete html element that put a text field in a page for querying the document. 144 <kbd>: the keyboard input element displaying input, displaying keys, displaying keystrokes, displaying user input, element, html, html text-level semantics, keyboard input, keystroke, reference, web, keyboard, user input the html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. 145 <keygen> deprecated, element, html, html5, obsolete, reference, web the html <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an html form. this mechanism is designed for use with web-based certificate manage...
... html element which allowed insertion of empty spaces on pages. it was devised by netscape to accomplish the same effect as a single-pixel layout image, which was something web designers used to use to add white spaces to web pages without actually using an image. however, <spacer> no longer supported by any major browser and the same effects can now be achieved using simple css. 195 <span> element, html, html text-level semantics, html:flow content, reference, web the html <span> element is a generic inline container for phrasing content, which does not inherently represent anything. it can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. 196 <strike> element, html, obs...
...eates inline text which is presented using the user agent's default monospace font face. 215 <u>: the unarticulated annotation (underline) element annotation, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, reference, unarticulated annotation, underline, web the html unarticulated annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. 216 <ul>: the unordered list element element, html, html grouping content, reference the html <ul> element represents an unordered list of items, typically rendered as a bulleted list. 217 <var>: the variable element element, html, html text-level semantics, ht...

textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <tspan> elements, lets you specify the width of the space into which the text will draw. the user agent will ensure that the text does not extend farther than that distance, using the method or methods specified by the lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). ...
...lengthadjust attribute. by default, only the spacing between characters is adjusted, but the glyph size can also be adjusted if you change lengthadjust. by using textlength, you can ensure that your svg text displays at the same width regardless of conditions including web fonts failing to load (or not having loaded yet). ...
... fill="green"> hello world! </text> </svg> first, a <rect> element is used to create and stroke a rectangle to contain the text. then <text> is used to create the text element itself, with an id of "hello". html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text. a <span> element of id "widthdisplay" is provided to display the current width value. javascript finally, let's have a look at the javascript code. it starts by stashing references to the elements it will need to access, using doc...

Using shadow DOM - Web Components
onstructor, which defines all the functionality the element will have when an instance of it is instantiated. ...
...ity the element will have when an instance of it is instantiated. ...
...w root we first attach a shadow root to the custom element: // create a shadow root let shadow = this.attachshadow({mode: 'open'}); creating the shadow dom structure next, we use some dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper = document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img...

Extension Versioning, Update and Compatibility - Archive of obsolete content
2 and h3 for general headings p, div, pre and blockquote for block formatting ul, ol, li, dl, dt and dd for lists b, i, em, strong, u, q, sub, sup and code for text formatting br and hr for line breaking the head, style and script tags and any of their contents are completely stripped. ...
...al headings p, div, pre and blockquote for block formatting ul, ol, li, dl, dt and dd for lists b, i, em, strong, u, q, sub, sup and code for text formatting br and hr for line breaking the head, style and script tags and any of their contents are completely stripped. ...

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
he given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nodes.link); function addentrytopopup(menupopup, doc, chromewindow) { var newitem = doc.createelement("menuitem"); newitem.setattribute("value", "testvalue"); newitem.setattribute("label", "another popup menu item"); menupopup.appendchild(newitem); }; var jsontemplatebtn = ["xul:toolbarbutto...
...sed instead of the latter. when using the jquery constructor, only empty tags should be specified in order to avoid invoking the dom parser. var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) { alert(event.target.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases. it is safe, though inefficient, to assign dynamic values to innerhtml if any dynamic content in the value is escaped with the following function: function escapehtml(str) { return str.replace(/[&"'<>]/g, (m) => ({ "&": "&amp;", '"': "&quot;", "...

Index - Archive of obsolete content
to build prism, you must first build the xulrunner tree, and then build pris...
...is a new technology which enables developers to construct accessible controls within (x)html pages. developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). 1153 deprecated and defunct markup reference, xul {many elements on this page are wrongly marked as deprecated, this page needs review} 1154 dynamically modifying xul-based user interface add-ons, dom, extensions, xul this article discusses manipulating xul interfac...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
="javascript"> //// /// object detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xm...
...ck=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s): marcio galli, netscape communications; roger soares, intelinet.com.br; ian oeschger, netscape communications last updated date: published 16...

Style System Overview - Archive of obsolete content
ade decides which wins: sort by origin (ua, user, author) & weight (!important), then specificity of selector, then order example document source <doc> <title>a few quotes</title> <para class="emph"> franklin said that <quote>"a penny saved is a penny earned."</quote> </para> <para> fdr said <quote>"we have nothing to fear but <span class="emph">fear itself.</span>"</quote> </para> </doc> example document tree doc ↙ ↓ ↘ title para class="emph" para ↓ ↓ quote quote ↓ span class="emph" example stylesheet doc { display: block; text-indent: 1em; } t...
...this is big, and slow to fill in. the rule tree allows sharing. to allow for optimizations, each style struct contains only inherited properties or only “reset” properties. (thus these structs can be called inherited structs or reset str...

statustext - Archive of obsolete content
n the menu bar. ...
...ote server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <button label="ping" statustext="ping the server" onmouseover="setstatusmessage(this)" onmouseout="clearstatusmessage()"/> <statusbar> <statusbarpanel id="mystatuspanel" label="" flex="1"/> <spacer flex="1"/> </statusbar> <script> function setstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = obj.getattribute('statustext'); } function clearstatusmessage(obj){ document.getelementbyid('mystatuspanel').label = ''; } </script> see also statusbar and statusbarpanel ...

Gecko Compatibility Handbook - Archive of obsolete content
. internet explorer incorrectly treats id's and class names as case insensitive while gecko treats them correctly as case sensitive. inconsistent case between the css defining the style for html id's and classes results in gecko browsers not applying the styles to id's or class names that differ in case. internet explorer incorrectly specifies height and width of inline elements such as span. internet explorer implements the box model (padding, margins, borders) incorrectly. do not use internet explorer's invalid implementation of css. use only the cross-browser, standards conformant features of css. use consistent case when writing html id and class name attributes and css styles for those ids and classes. do not specify heights or widths on inline elemen...
...rnet explorer implements the box model (padding, margins, borders) incorrectly. do not use internet explorer's invalid implementation of css. use only the cross-browser, standards conformant features of css. use consistent case when writing html id and class name attributes and css styles for those ids and classes. do not specify heights or widths on inline elements such as spans. use only cross-browser box specifications for margins, padding and borders. (more about css) content differs in gecko browsers and internet explorer incorrect layout mode specified by doctype. if pages should be displayed by legacy browsers such as netscape navigator 4 or internet explorer 4 and 5, be sure to specify quirks mode layout via the doctype. ...

Windows Media in Netscape - Archive of obsolete content
ipt. use of html behaviors in conjunction with windows media player the only ie emulation that netscape 7.1 does in terms of html usage is with respect to the object element usage with clsid and script for="" event="" syntax. dhtml behaviors can be used in internet explorer to perform activex control detection. ...
...o the object element usage with clsid and script for="" event="" syntax. dhtml behaviors can be used in internet explorer to perform activex control detection. for example, the following uses dhtml behaviors to associate a set of behaviors with a span element, which is then interrogated for its version number (the script attempts to verify that the windows media player control is at version 9): <span style="behavior:url(#default#clientcaps)" id="cc"></span> <script language=javascript> var cv = cc.getcomponentversion( "{6bf52a52-394a-11d3-b153-00c04f79faa6}", "componentid" ); if (cv == null || cv == "") { top.location.href = "http://foo.bar.foo/checkref"; } </script> netscape 7.1 does not support ie's dhtml behaviors. in order to use the windows media player control in both netscape 7...

Pseudo-classes and pseudo-elements - Learn web development
ments. pseudo-elements start with a double colon ::. ::pseudo-element-name note: some early pseudo-elements used the single colon syntax, so you may sometimes see this in code or examples. modern browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility. for example, if you wanted to select the first line of a paragraph you could wrap it in a <span> element and use an element selector; however, that would fail if the number of words you had wrapped were longer or shorter than the parent element's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will do this for you...
...er than the parent element's width. as we tend not to know how many words will fit on a line — as that will change if the screen width or font-size changes — it is impossible to robustly do this by adding html. the ::first-line pseudo-element selector will do this for you reliably — if the number of words increases and decreases it will still only select the first line. it acts as if a <span> was magically wrapped around that first formatted line, and updated each time the line length changed. you can see that this selects the first line of both paragraphs. combining pseudo-classes and pseudo-elements if you wanted to make the first line of the first paragraph bold you could chain the :first-child and ::first-line selectors together. try editing the previous live example so it use...

Type, class, and ID selectors - Learn web development
basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different css selectors we can use to apply css to a document. type selectors a type selector is sometimes referred to as a tag name selector or element selector, because it selects an html tag/element in your document. in the example below we have used the span, em and strong selectors. all instances of <span>, <em> and <strong> elements are therefore styled accordingly. try adding a css rule to select the <h1> element and change its color to blue. the universal selector the universal selector is indicated by an asterisk (*) and selects everything in the document (or inside the parent element if it is being chained together with another element and...
...document with that class applied to it. in the live example below we have created a class called .highlight, and have applied it to several places in my document. all of the elements that have the class applied are highlighted. targeting classes on particular elements you can create a selector that will target specific elements with the class applied. in this next example we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight. we do this by using the type selector for the element i want to target, with the class appended using a dot, with no white space in between. this approach reduces the scope of a rule as the rule will only apply to that particular element & class combination; so you would need to add another selector if you de...

Test your skills: Multicol - Learn web development
you will be working through three small tasks which use different elements of the material you have 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. ...
...rey rule between each column, ensuring there is 10px 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 heading and subheading to span across all columns so it looks like the image. 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. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed,...

Example 3 - Learn web development
this is the third example that explain how to build custom form widgets. ...
...his is the third example that explain how to build custom form widgets. ...

Example 4 - Learn web development
this is the fourth example that explain how to build custom form widgets. ...
... this is the fourth example that explain how to build custom form widgets. ...

Example 5 - Learn web development
this is the last example that explain how to build custom form widgets. ...
... this is the last example that explain how to build custom form widgets. ...

Document and website structure - Learn web development
oter> represents a group of end content for a page. non-semantic wrappers sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. sometimes you might want to just group a set of elements together to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01...
...te, to provide some kind of label for them so they can be easily targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[editor's note: at this point in the play, the lights should be down low]</span>.</p> in this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. for sighted users, css would perhaps be used to distance the note slightly from the main text. <div> is a block level non-semantic e...

HTML table advanced features and accessibility - Learn web development
n of the spent amounts seems to be in the wrong place, and there are some details missing from the code. put the obvious headers row inside a <thead> element, the "sum" row inside a <tfoot> element, and the rest of the content inside a <tbody> element. save and refresh, and you'll see that adding the <tfoot> element has caused the "sum" row to go down to the bottom of the table. next, add a colspan attribute to make the "sum" cell span across the first four columns, so the actual number appears at the bottom of the "cost" column. let's add some simple extra styling to the table, to give you an idea of how useful these elements are for applying css. inside the head of your html document, you'll see an empty <style> element. inside this element, add the following lines of css code: tbody {...
... 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</th> <th>cost (€)</th> </tr> </thead> <tfoot> <tr> <td colspan="4">sum</td> <td>118</td> </tr> </tfoot> <tbody> <tr> <td>haircut</td> <td>hairdresser</td> <td>12/09</td> <td>great idea</td> <td>30</td> </tr> <tr> <td>lasagna</td> <td>restaurant</td> <td>12/09</td> <td>regrets</td> ...

Index - Learn web development
of this task is to get you working with responsive web design with a practical task. everything you need to know to complete this task was covered in the guide to media queries, and the other layout lessons in this section. 157 test your skills: multicol css, example, guide the aim of this task is to get you working with the css column-count, column-width, column-gap, column-span and column-rule properties and values covered in our lesson on multiple-column layout. you will be working through three small tasks which use different elements of the material you have just covered. 158 test your skills: floats beginner, css, example, guide the aim of this task is to get you working with the css float and clear properties covered in our lesson on floats. y...
...pe, sumary, table, tbody, tfoot, thead there are a few other things you could learn about table html, but we have really given all you need to know at this moment in time. at this point, you might want to go and learn about styling html tables — see styling tables. 229 html table basics article, beginner, codingscripting, html, learn, tables, basics, cell, col, colgroup, colspan, header, row, rowspan 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. 230 introduction to html codingscripting, html, introduction to html, landing, links, structure, text, head, semantics at its heart, html is a fa...

Third-party APIs - Learn web development
const para2 = document.createelement('p'); const clearfix = document.createelement('div'); let current = articles[i]; console.log(current); link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multimedia.length > 0) { img.src = 'http://www.nytimes.com/' + current.multimedia[0].url; img.alt = current.headline.main; } clearfix.setattribute('class','clearfix'); article.appendchild(heading); headi...
...ich properties in the article objects contained the right data to show, we consulted the article search api reference (see nytimes apis). most of these operations are fairly obvious, but a few are worth calling out: we used a for loop (for(var j = 0; j < current.keywords.length; j++) { ... } ) to loop through all the keywords associated with each article, and insert each one inside its own <span>, inside a <p>. this was done to make it easy to style each one. we used an if() block (if(current.multimedia.length > 0) { ... }) to check whether each article has any images associated with it (some stories don't.) we display the first image only if it exists (otherwise an error would be thrown). we gave our <div> element a class of "clearfix", so we can easily apply clearing to it. ...

Ember app structure and componentization - Learn web development
completion of this todo" class="toggle" type="checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> </section> the rendered output should now be as follows: this looks pretty ...
...t aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> footer.hbs should be updated to contain the following: <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate compon...

Introduction to client-side frameworks - Learn web development
e this: const state = [ { id: 'todo-0', name: 'learn some frameworks!' } ] how do we show one of those tasks to our user? we want to represent each task as a list item – an html <li> element inside of an unordered list element (a <ul>). how do we make it? that could look something like this: function buildtodoitemel(id, name) { const item = document.createelement('li'); const span = document.createelement('span'); const textcontent = document.createtextnode(name); span.appendchild(textcontent) item.id = id; item.appendchild(span); item.appendchild(builddeletebuttonel(id)); return item; } here, we use the document.createelement() method to make our <li>, and several more lines of code to create the properties and children it needs. the tenth line of this sn...
...de that describes how your ui should look, and the framework makes it happen in the dom behind the scenes. the vanilla javascript approach to building out new dom elements in repetition was difficult to understand at a glance. by contrast, the following block of code illustrates the way you might use vue to describe our list of tasks: <ul> <li v-for="task in tasks" v-bind:key="task.id"> <span>{{task.name}}</span> <button type="button">delete</button> </li> </ul> that's it. this snippet reduces approximately thirty-two lines of code down to six lines. if the curly braces and v- attributes here are unfamiliar to you, that's okay; you’ll learn about vue-specific syntax later on in the module. the thing to take away here is that this code looks like the ui it represents, whereas ...

TypeScript support in Svelte - Learn web development
.svelte file with the following: <!-- components/filterbutton.svelte --> <script lang='ts'> import { filter } from '../types/filter.enum' export let filter: filter = filter.all </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === filter.all} aria-pressed={filter === filter.all} on:click={()=> filter = filter.all} > <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </bu...
... filter.active} aria-pressed={filter === filter.active} on:click={()=> filter = filter.active} > <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" class:btn__primary={filter === filter.completed} aria-pressed={filter === filter.completed} on:click={()=> filter = filter.completed} > <span class="visually-hidden">show</span> <span>completed</span> <span class="visually-hidden">tasks</span> </button> </div> here we are just importing the filter enum, and using it instead of the string values we used previously. todos.svelte we will also use the filter enum in the todos.svelte component. first add the lang='ts' attribute to it, as before. next, import the ...

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
at this point, every time the edit button is added to the dom, the focuseditbutton action is executed, but it will only give focus to the button if the editbuttonpressed flag is true. note: we have barely scratched the surface of actions here. actions can also have reactive parameters, and svelte lets...
...at this point, every time the edit button is added to the dom, the focuseditbutton action is executed, but it will only give focus to the button if the editbuttonpressed flag is true. note: we have barely scratched the surface of actions here. actions can also have reactive parameters, and svelte lets us detect when any of those parameters cha...

Vue conditional rendering: editing existing todos - Learn web development
opy the following code into that file: <template> <form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for &quot;{{label}}&quot;</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true }...
...hown below. <template> <div class="stack-small"> <div class="custom-checkbox"> <input type="checkbox" class="checkbox" :id="id" :checked="isdone" @change="$emit('checkbox-changed')" /> <label :for="id" class="checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="button" class="btn btn__danger" @click="deletetodo"> delete <span class="visually-hidden">{{label}}</span> </button> </div> </div> </template> we’ve added a wrapper <div> around the whole template for layout purposes. we've also added "edit" and "delete" buttons: the "edit" button, when clicked...

Focus management with Vue refs - Learn web development
with a string identifier for the value of the attribute. it's important to note that a ref needs to be unique within a component. no two elements rendered at the same time should have the same ref. adding a ref to our app so, let's attach a ref to our "edit" button in todoitem.vue. update it like this: <button type="button" class="btn" ref="editbutton" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> to access the value associated with our ref, we use the $refs property provided on our component instance. to see the value of the ref when we click our "edit" button, add a console.log() to our toggletoitemeditform() method, like so: toggletoitemeditform() { console.log(this.$refs.editbutton); this.isediting = true; } if you activate the ...
..., because our edit form is in a different component to our "edit" button, we can't just set focus inside the "edit" button’s click event handler. instead, we can use the fact that we remove and re-mount our todoitemeditform component whenever the "edit" button is clicked to handle this. so how does this work? well, vue components undergo a series of events, known as a lifecycle. this lifecycle spans from all the way before elements are created and added to the vdom (mounted), until they are removed from the vdom (destroyed). vue lets you run methods at various stages of this lifecycle using lifecycle methods. this can be useful for things like data fetching, where you may need to get your data before your component renders, or after a property changes. the list of lifecycle methods are bel...

overflow-clip-box-block
value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...
... padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...

overflow-clip-box-inline
value not found in db! syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...
... padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...

overflow-clip-box
y the formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...
... padding-box this keyword makes the clipping be related to the padding box. content-box this keyword makes the clipping be related to the content box. ...

Basics
n("a42","1"); setselection("a43","1"); } function incrementinput(inputid, increment) { var inputelement = document.getelementbyid(inputid); var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more... ...
...; var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more... ...

Mozilla Style System Documentation
*/ title { display: block; font-size: 3em; } /* rule 3 */ para { display: block; } /* rule 4 */ [class="emph"] { font-style: italic; } and the following document: <doc> <title>a few quotes</title> <para class="emph">benjamin franklin said that <quote>"a penny saved is a penny earned."</quote></para> <para>franklin d. roosevelt said that <quote>"we have nothing to fear but <span class="emph">fear itself</span>."</para> </doc> this will lead to a rule tree that looks like this, where each node is in the format [name of node: rule it points to]: [a: null] ,------' / \ `------. [b: 1] [c: 2] [d: 3] [e: 4] | [f: 4] note that two rule nodes point to rule 4. the style context t...
... nodes (all of which have style contexts pointing to rule node a), with each style context in the format [element type: rule node]: [doc: b] ,------------' | `-----------. [title: c] [para: f] [para: d] | | [quote: a] [quote: a] | [span: e] the reason the rule tree shares style data naturally is that most style rules specify properties in very few structs. as stated above, each style struct contains only features that are inherited by default or those that are set to their initial value ("reset") by default. this leads to (or perhaps three, depending on how you count) two types of sharing. for those structs where all the valu...

Bytecode Descriptions
ction.prototype.call. jsop::callignoresrv hints to the vm that the return value is ignored. this allows alternate faster implementations to be used that avoid unnecesary allocations. implements: evaluatecall steps 4, 5, and 7. format: jof_argc, jof_invoke, jof_typeset, jof_ic spreadcall stack: callee, this, args ⇒ rval like jsop::call, but the arguments are provided in an array rather than a span of stack slots. used to implement spread-call syntax: f(...args). args must be an array object containing the actual arguments. the array must be packed (dense and free of holes; see ispackedarray). this can be ensured by creating the array with jsop::newarray and populating it using jsop::initelemarray. format: jof_invoke, jof_spread, jof_typeset, jof_ic optimizespreadcall stack: arr ⇒ arr,...
...bytecode analysis and jit compilation. location information for catch/finally blocks is stored in a side table, script->trynotes(). format: jof_code_offset trydestructuring no-op instruction used by the exception unwinder to determine the correct environment to unwind to when performing iteratorclose due to destructuring. this instruction must appear immediately before each jstry_destructuring span in a script's try notes. exception stack: ⇒ exception push and clear the pending exception. ┬──┬◡ﾉ(° -°ﾉ) this must be used only in the fixed sequence of instructions following a jstry_catch span (see "bytecode invariants" above), as that's the only way instructions would run with an exception pending. used to implement catch-blocks, including the implicit ones generated as p...

Garbage collection
eader::next. the chunkinfo also contains some basic stats, such as the number of free arenas. arena an arena is an internal unit of memory allocation. an arena is one page (4096 bytes on almost all platforms) and contains an arenaheader, a few pad bytes, and then an array of aligned elements. all elements in an arena have the same allocation kind and size. every arena maintains a list of free spans, starting at arenaheader::firstfreespanoffets. the last cell in each free span (except the last one) holds a freespan for the next free span. free span struct freespan represents a contiguous sequence of free cells [first,last] within an arena. freespan contains functions to allocate from the free span. mark bitmap the mark bitmap is represented by chunkbitmap. the mark bitmap has two bits ...
...i you can access the light statistics the gc keeps at runtime through the gc statistics api. source files gc/gc.{h,cpp} defines gc internal api functions, including entry points to trigger gc. gc/barrier[-inl].h implements incremental and generational write barriers. gc/cell.h defines cell and tenuredcell. gc/heap.h defines chunk, chunkinfo, chunkbitmap, arena, arenaheader, cell, and freespan structures that define the heart of the gc heap's structures. gc/marking.{h,cpp} defines all marking functions for the various garbage-collected things. gc/memory.{h,cpp} contains a few functions for mapping and unmapping pages, along with platform-specific implementations. the map/unmap functions are used by gc.cpp to allocate and release chunks. there are also functions to commit or decommi...

Mozilla internal string guide
() in the failure case, in which case the destructor of the handle puts the string in a mostly harmless but consistent state (containing a single replacement character if a capacity greater than 0 was requested, or in the char case if the three-byte utf-8 representation of the replacement character doesn't fit, an ascii substitute). mozilla::bulkwritehandle<t> autoconverts to a writable mozilla::span<t> and also provides explicit access to itself as span (asspan()) or via component accessors named consistently with those on span: elements() and length() the latter is not the logical length of the string but the writable length of the buffer. the buffer exposed via these methods includes the prefix that you may have requested to be preserved. it's up to you to skip past it so as to not overwri...
... you to skip past it so as to not overwrite it. if there's a need to request a different capacity before you are ready to call finish(), you can call restartbulkwrite() on the handle. it takes three arguments that match the first three arguments of bulkwrite(). it returns mozilla::result<mozilla::ok, nsresult> to indicate success or oom. calling restartbulkwrite() invalidates previously-obtained span, raw pointer or length. once you are done writing, call finish(). it takes two arguments: the new logical length of the string (which must not exceed the capacity retuned by the length() method of the handle) and a boolean indicating whether it's ok to attempt to reallocate a smaller buffer in case a smaller mozjemalloc bucket could accommodate the new logical length. helper classes and functio...

Index
ent alternative for obtaining a service as compared to the indirect xpcom approach: getservice(), callgetservice(), etc methods are expensive and should be avoided when possible. 124 xpcom ownership guidelines xpcom ...naturally. if you create a temporary object, obviously it's up to you to destroy it. that's a sure sign of ownership. if you create an object with a longer lifespan, you will own it until you give ownership away. 125 xpcom reference add-ons, extensions, landing, mozilla, reference, xpcom this reference describes the interfaces and functions provided by the xpcom library. in addition, it details the various helper classes and functions, as well as the components, provided by the xpcom glue library. the contents herein are oriented primari...
...table2 interfaces, needshelp please also refer to the iaccessibletablecell interface. if you want to support older applications you should also support the iaccessibletable interface. 172 iaccessibletablecell interfaces, xpcom, xpcom interface reference returns the number of columns occupied by this cell accessible. the result is greater than 1 if the specified cell spans multiple columns. 173 iaccessibletext interfaces, needscontent, xpcom, xpcom interface reference this enum defines values which specify a text() boundary type. ia2_text_boundary_sentence is optional. when a method doesn't implement this method it must return s_false. typically this feature would not be implemented by an application. however, if the application developer was ...

nsIAccessibleTable
escription() return the description text of the specified column in the table. astring getcolumndescription( in long columnindex ); parameters columnindex the column index. return value the column description. getcolumnextentat() return the number of columns occupied by the accessible cell at the specified row and column in the table. the result differs from 1 if the specified cell spans multiple columns. long getcolumnextentat( in long row, in long column ); parameters row the row index of the cell. column the column index of the cell. return value the number of columns the cell spans. return the index of the column containg the given cell index. long getcolumnindexat( in long cellindex ); parameters cellindex the cell index. return value the column...
...ven cell index. getrowdescription() return the description text of the specified row in the table. astring getrowdescription( in long rowindex ); parameters rowindex the row index. return value the row description getrowextentat() return the number of rows occupied by the accessible cell at the specified row and column in the table. the result differs from 1 if the specified cell spans multiple rows. long getrowextentat( in long row, in long column ); parameters row row index of the cell. column column index of the cell. return value the number of rows the cell spans. return the index of the row containg the given cell index. long getrowindexat( in long cellindex ); parameters cellindex the cell index. return value the row index. getselectedcellin...

Animation inspector example: Web Animations API - Firefox Developer Tools
firefox-logo-animation example animation using the web animations api. ...
... firefox-logo-animation example animation using the web animations api. ...

Work with animations - Firefox Developer Tools
hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edition" and the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can ...
...e that those elements are, respectively, the browser name "firefox developer edition" and the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar. the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar. animation playback at the top of the animation inspector: there are buttons to play/pause and restart the animation there's a dropdown to change the ...

AbstractRange - Web APIs
urce impact of the more complex range interface. contents of elements when trying to access the contents of an element, keep in mind that the element itself is a node, but so is any text inside it. in order to set a range endpoint within the text of an element, be sure to find the text node inside the element: let startelem = document.queryselector("p"); let endelem = startelem.queryselector("span"); let range = document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].length/2); let contents = range.clonecontents(); document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is elementclass. the end point is set to be the middle of the first chil...
...ange = document.createrange(); range.setstart(startelem, 0); range.setend(endelem, endelem.childnodes[0].length/2); let contents = range.clonecontents(); document.body.appendchild(contents); this example creates a new range, rng, and sets its starting point to the third child node of the first element whose class is elementclass. the end point is set to be the middle of the first child of the span, and then the range is used to copy the contents of the range. ranges and the hierarchy of the dom in order to define a range of characters within a document in a way that is able to span across zero or more node boundaries, and which is as resilient as possible to changes to the dom, you can't simply specify the offset to the first and last characters in the html. there are a few good reasons ...

AudioBufferSourceNode.playbackRate - Web APIs
ack, and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly. you can run the example live (or view the source.) play the song and alter the playback rate for some fun results. ...
...rcenode. buttons are provided to play and stop the audio playback, and a slider control is used to change the playbackrate property value on the fly. you can run the example live (or view the source.) play the song and alter the playback rate for some fun results. ...

Background Tasks API - Web APIs
<a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. </p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id="currenttasknumber">0</span> of <span id="totaltaskcount">0</span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress. in addition, there's a "start" button (creativel...
...tbyid("totaltaskcount"); let currenttasknumberelem = document.getelementbyid("currenttasknumber"); let progressbarelem = document.getelementbyid("progress"); let startbuttonelem = document.getelementbyid("startbutton"); let logelem = document.getelementbyid("log"); next we have variables which reference the dom elements we need to interact with. these elements are: totaltaskcountelem is the <span> we use to insert the total number of tasks created into the status display in the progress box. currenttasknumberelem is the element used to display the number of tasks processed so far. progressbarelem is the <progress> element showing the percentage of the tasks processed so far. startbuttonelem is the start button. logelem is the <div> we'll insert logged text messages into. let logfrag...

DOMTokenList.item() - Web APIs
kenlist interface returns an item in the list by its index. syntax tokenlist.item(index) parameters index a domstring representing the index of the item you want to return. return value a domstring representing the returned item. it returns null if the number is greater than or equal to the length of the list. ...
...em you want to return. return value a domstring representing the returned item. it returns null if the number is greater than or equal to the length of the list. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist. we then retrieve the last item in the list using item(tokenlist.length - 1), and write it into the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.length-1); span.textcontent = item; the output looks like this: specifications specification status comment domthe definition of 'item()' in that specification. living ...

DataTransfer.getData() - Web APIs
string. caveats data availability the html5 drag and drop specification dictates a drag data store mode. this may result in unexpected behavior, being datatransfer.getdata() not returning an expected value. example this example shows the use of the datatransfer object's getdata() and setdata() methods. ...
...es a drag data store mode. this may result in unexpected behavior, being datatransfer.getdata() not returning an expected value. example this example shows the use of the datatransfer object's getdata() and setdata() methods. ...

DocumentOrShadowRoot.elementsFromPoint() - Web APIs
obsolete css object model (cssom) view modulethe definition of 'elementsfrompoint()' in that specification. working draft ...
... obsolete css object model (cssom) view modulethe definition of 'elementsfrompoint()' in that specification. working draft ...

DocumentOrShadowRoot.nodesFromPoint() - Web APIs
...
... ...

Examples of web and XML development using the DOM - Web APIs
two frequently used methods are htmltableelement.insertrow and tablerow.insertcell. to add a row and some cells to an existing table: <table id="table0"> <tr> <td>row 0 cell 0</td> ...
...two frequently used methods are htmltableelement.insertrow and tablerow.insertcell. to add a row and some cells to an existing table: <table id="table0"> <tr> <td>row 0 cell 0</td> <td>row 0 cell 1</td...

Element.attachShadow() - Web APIs
a shadow root to every type of element. there are some that can't have a shadow dom for security reasons (for example <a>), and more besides. the following is a list of elements you can attach a shadow root to: any autonomous custom element with a valid name <article> <aside> <blockquote> <body> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields: mode a string specifying the encapsulation mode for the shadow dom tree. this can be one of: open: elements of the shadow root are accessible from javascript outside the root, for example using element.shadowroot: ...
...ement var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.trim().split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); specifications ...

Element.slot - Web APIs
reate a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slotable element by including it inside the element with a slot attribute with the value my-text. ...
...agraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slotable element by including it inside the element with a slot attribute with the value my-text. here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the name of the corresponding <slot> element. let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-text' specifications specification status comment domthe definition of 'slot' in that specification. living...

HTMLTableColElement - Web APIs
properties inherits properties from its parent, htmlelement. htmltablecolelement.align is a domstring that indicates the horizontal alignment of the cell data in the column. htmltablecolelement.ch is a domstring representing the alignment character for cell data. htmltablecolelement.choff is a domstring representing the offset for the alignment character. htmltablecolelement.span is an unsigned long that reflects the span html attribute, indicating the number of columns to apply this object's attributes to. must be a positive integer. htmltablecolelement.valign is a domstring that indicates the vertical alignment of the cell data in the column. htmltablecolelement.width is a domstring representing the default column width. methods no specific method; inherit...
... default column width. methods no specific method; inherits methods from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'htmltablecolelement' in that specification. living standard no change from html5. html5the definition of 'htmltablecolelement' in that specification. recommendation the span property is now an unsigned long. document object model (dom) level 2 html specificationthe definition of 'htmltablecolelement' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'htmltablecolelement' in that specification. obsolete initial definition. ...

MouseEvent.pageX - Web APIs
t.pagey; } box.addeventlistener("mousemove", updatedisplay, false); box.addeventlistener("mouseenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events. ...
... register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events. updatedisplay() simply replaces the contents of the <span> elements meant to contain the x and y coordinates with the values of pagex and pagey. html <div class="box"> <p> move the mouse around in this box to watch its coordinates change. </p> <p> <code>pagex</code>: <span id="x">n/a</span> </p> <p> <code>pagey</code>: <span id="y">n/a</span> </p> </div> the html is simple; the box we'll be watching for mouse events on is given the class "box". 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 ...

Node.firstChild - Web APIs
the node.firstchild read-only property returns the node's first child in the tree, or null if the node has no children. if the node is a document, it returns the first node in the list of its direct children. syntax var childnode = node.firstchild; example this example demonstrates the use of firstchild and how whitespace nodes might interfere with using this property. <p id="para-01"> <span>first span</span> </p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags. any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on. anoth...
...ument.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> in the above, the console will show '#text' because a text node is inserted to maintain the whitespace between the end of the opening <p> and <span> tags. any whitespace will create a #text node, from a single space to multiple spaces, returns, tabs, and so on. another #text node is inserted between the closing </span> and </p>tags. if this whitespace is removed from the source, the #text nodes are not inserted and the span element becomes the paragraph's first child. <p id="para-01"><span>first span</span></p> <script> var p01 = document.getelementbyid('para-01'); console.log(p01.firstchild.nodename); </script> now the console will show 'span'. to avoid the issue with node.firstchild returning #text...

NodeList.entries() - Web APIs
the nodelist.entries() method returns an iterator allowing to go through all key/value pairs contained in this object. the values are node objects. syntax list.entries(); return value returns an iterator. ...
...ment.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); } results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...

NodeList.prototype.forEach() - Web APIs
index of the currentvalue being processed in somenodelist. listobj optional the somenodelist that foreach() is being applied to. thisarg optional value to use as this when executing callback. return value undefined. ...
...element("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist...

NodeList.values() - Web APIs
the nodelist.values() method returns an iterator allowing to go through all values contained in this object. the values are node objects. syntax nodelist.values(); return value returns an iterator. ...
...terator. ...

Using the Payment Request API - Web APIs
it to initiate the payment request. this returns a promise that fulfills with a paymentresponse object if the payment is successful: request.show().then(function(paymentresponse) { // here we would process the payment. for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }) this object provides the developer with access to details they can use to complete the logical steps required after the payment completes, such as an email address to contact the customer, a shipping address for mailing goods out to them, etc. in the code above, you'll see that we've called the paymentresponse.complete() method to signal that the interaction h...
...{ var request = new paymentrequest(buildsupportedpaymentmethoddata(), buildshoppingcartdetails()); request.show().then(function(paymentresponse) { // here we would process the payment. for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment. for demo purposes: intropanel.style.display = 'none'; legacypanel.style.display = 'block'; } }); }); note: see o...

Selection.containsNode() - Web APIs
is used. example check for selection this snippet checks whether anything inside the body element is selected. console.log(window.getselection().containsnode(document.body, true)); find the hidden word in this example, a message appears when you select the secret word. it uses addeventlistener() to check for selectionchange events. ...
...et checks whether anything inside the body element is selected. console.log(window.getselection().containsnode(document.body, true)); find the hidden word in this example, a message appears when you select the secret word. it uses addeventlistener() to check for selectionchange events. ...

Writing a WebSocket server in C# - Web APIs
.utf8.getstring(decoded); console.writeline("{0}", text); } else console.writeline("mask bit not set"); console.writeline(); } } } } client.html <!doctype html> <style> textarea { vertical-align: bottom; } #output { overflow: auto; } #output > p { overflow-wrap: break-word; } #output span { color: blue; } #output span.error { color: red; } </style> <h2>websocket test</h2> <textarea cols=60 rows=6></textarea> <button>send</button> <div id=output></div> <script> // http://www.websocket.org/echo.html var button = document.queryselector("button"), output = document.queryselector("#output"), textarea = document.queryselector("textarea"), // wsuri = ...
... wsuri = "ws://127.0.0.1/", websocket = new websocket(wsuri); button.addeventlistener("click", onclickbutton); websocket.onopen = function (e) { writetoscreen("connected"); dosend("websocket rocks"); }; websocket.onclose = function (e) { writetoscreen("disconnected"); }; websocket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span class=error>error:</span> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacenthtml("afterbegin", "<p>" + message + "</p>"); } fun...

Window.matchMedia() - Web APIs
ements. 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. ...
...n 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: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded. html <span class="mq-value"></span> a simple <span> to receive the output. css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; } result see tes...

Generating HTML - Web APIs
ating the basic html document xsl stylesheet (example2.xsl): ... <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </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="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> ... three more xsl:template's are needed to compl...
...method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </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="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> <xs...

Web APIs
temelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync ...
...svgmissingglyphelement svgnumber svgnumberlist svgpathelement svgpatternelement svgpoint svgpolygonelement svgpolylineelement svgpreserveaspectratio svgradialgradientelement svgrect svgrectelement svgrenderingintent svgsvgelement svgscriptelement svgsetelement svgsolidcolorelement svgstopelement svgstringlist svgstylable svgstyleelement svgswitchelement svgsymbolelement svgtrefelement svgtspanelement svgtests svgtextcontentelement svgtextelement svgtextpathelement svgtextpositioningelement svgtitleelement svgtransform svgtransformlist svgtransformable svgurireference svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serv...

Using the aria-hidden attribute - Accessibility
ed (default) the user agent determines if the element is exposed to or hidden from the accessibility api. examples in the example below, the paragraph is not exposed to the accessibility api (e.g. would not be read aloud by a screen reader). <p aria-hidden="true"> some things are better left unsaid. ...
...es if the element is exposed to or hidden from the accessibility api. examples in the example below, the paragraph is not exposed to the accessibility api (e.g. would not be read aloud by a screen reader). <p aria-hidden="true"> some things are better left unsaid. ...

Using the aria-labelledby attribute - Accessibility
="dialog" aria-labelledby="dialogheader"> <h2 id="dialogheader">choose a file</h2> ... ...
...low, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute: <p>the doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> </p> example 6: definition lists in the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute: <dl> <dt id="anathema">anathema</dt> <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority and ac...

Using the aria-orientation attribute - Accessibility
technology should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider that is oriented vertically. ...
...y should handle this technique. the information provided above is one of those opinions and therefore not normative. examples example 1: the snippet below shows a simple slider that is oriented vertically. ...

An overview of accessible web applications and widgets - Accessibility
pt libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. sliders, menu bars, file list views, and more can be built with a combination of javascript, css, and html. since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <span>. while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology. the problem dynamic content on a web page can be particularly problematic for users who, for whatever reason, are unable to view the screen. stock tickers, live twitter feed updates, progress indicators, and similar cont...
...er might be tempted to implement the "view" mode using a read-only text <input> element and setting its aria role to button, then switching to "edit" mode by making the element writable and removing the role attribute in "edit" mode (since <input> elements have their own role semantics). do not do this. instead, implement the "view" mode using a different element altogether, such as a <div> or <span> with a role of button, and the « edit » mode using a text <input> element. asynchronous content changes under construction. see also live regions keyboard navigation often times developers overlook support for the keyboard when they create custom widgets. to be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, with...

::first-line (:first-line) - CSS: Cascading Style Sheets
g, text-decoration, text-transform, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align. syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. ...
...xt-decoration-line, text-decoration-style, and vertical-align. syntax /* css3 syntax */ ::first-line /* css2 syntax */ :first-line examples html <p>styles will only be applied to the first line of this paragraph. after that, all text will be styled like normal. see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification. working draft ...

:scope - CSS: Cascading Style Sheets
working draft 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 https://github.com/mdn...
... working draft 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 https://github.com/mdn/browser-compat-data...

Color picker tool - CSS: Cascading Style Sheets
preview_color.classname = 'preview-color'; this.preview_color = preview_color; preview_box.appendchild(preview_color); this.node.appendchild(preview_box); }; colorpicker.prototype.newinputcomponent = function newinputcomponent(title, topic, onchangefunc) { var wrapper = document.createelement('div'); var input = document.createelement('input'); var info = document.createelement('span'); wrapper.classname = 'input'; wrapper.setattribute('data-topic', topic); info.textcontent = title; info.classname = 'name'; input.setattribute('type', 'text'); wrapper.appendchild(info); wrapper.appendchild(input); this.node.appendchild(wrapper); input.addeventlistener('change', onchangefunc); input.addeventlistener('click', function() { this.select(); }); this.su...
...unit; this.sensivity = sensivity > 0 ? sensivity : 5; value = isnan(value) ? ...

Introduction to formatting contexts - CSS: Cascading Style Sheets
a bfc contains everything inside it, float and clear only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context. bfc creation examples let's have a look at a couple of these in o...
...eating something that serves, in essence, like a new root element (like <html> does), given how the new context is created and its flow layout functions. inline formatting contexts inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. the paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <span> elements are used on text. the box model does not fully apply to items participating in an inline formatting context. in a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. however, margins above and below the element will not be applied. vertical padding and borders will be applied but may overlap content ...

CSS Fragmentation - CSS: Cascading Style Sheets
each piece of the rendering for the element is called a fragment. ...
...each piece of the rendering for the element is called a fragment. ...

Basic Concepts of grid layout - CSS: Cascading Style Sheets
rticle. the following example demonstrates doing this in a simple way. when placing an item, we target the line – rather than the track. in the following example i am placing the first two items on our three column track grid, using the grid-column-start, grid-column-end, grid-row-start and grid-row-end properties. working from left to right, the first item is placed against column line 1, and spans to column line 4, which in our case is the far-right line on the grid. it begins at row line 1 and ends at row line 3, therefore spanning two row tracks. the second item starts on grid column line 1, and spans one track. this is the default so i do not need to specify the end line. it also spans two row tracks from row line 3 to row line 5. the other items will place themselves into empty space...
... see how the items are positioned against the lines of the grid. grid cells a grid cell is the smallest unit on a grid. conceptually it is like a table cell. as we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. in the below image, i have highlighted the first cell of the grid. grid areas items can span one or more cells both by row or by column, and this creates a grid area. grid areas must be rectangular – it isn’t possible to create an l-shaped area for example. the highlighted grid area spans two row and two column tracks. gutters gutters or alleys between grid cells can be created using the column-gap and row-gap properties, or the shorthand gap. in the below example, i am creating ...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
this version does not include auto-placement capability, or grid template areas. some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties. as these properties are vendor prefixed, they will not effect any browser supporting the up to date and unprefixed specification. autoprefixer grid layout support the popular tool autoprefixe...
...rties implemented in ie/edge (≤15) are as follows: grid-template-columns as -ms-grid-columns grid-template-rows as -ms-grid-rows grid-row-start as -ms-grid-row grid-column-start as -ms-grid-column align-self as -ms-grid-row-align justify-self as -ms-grid-column-align the ie version has additional properties not required in the new specification of -ms-grid-column-span and -ms-grid-row-span. this version does not include auto-placement capability, or grid template areas. some simple grid layouts could be implemented for ie10, through to edge 15, using the -ms properties. as these properties are vendor prefixed, they will not effect any browser supporting the up to date and unprefixed specification. autoprefixer grid layout support the popular tool autoprefixer has been updated to ...

Grid template areas - CSS: Cascading Style Sheets
nt">content</div> <div class="footer">footer</div> </div> in order to make the layout neater i can use multiple . characters. as long as there is no white space between the full stops it will be counted as one cell. for a complex layout there is a benefit to having the rows and columns neatly aligned. it means that you can actually see, right there in the css, what this layout looks like. spanning multiple cells in our example each of the areas spans multiple grid cells and we achieve this by repeating the name of that grid area multiple times with white space between. you can add extra white space in order to keep your columns neatly lined up in the value of grid-template-areas. you can see that i have done this in order that the hd and ft line up with main. the area that you create...
...space in order to keep your columns neatly lined up in the value of grid-template-areas. you can see that i have done this in order that the hd and ft line up with main. the area that you create by chaining the area names must be rectangular, at this point there is no way to create an l-shaped area. the specification does note that a future level might provide this functionality. you can however span rows just as easily as columns. for example we could make our sidebar span down to the end of the footer by replacing the . with sd. .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-...

Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
: 40px; } you can see that the item is taking the area from grid column line 2 to 4, and starting after line 1. then it is offset in that area using the top and left properties. however, it has been taken out of flow as is usual for absolutely positioned items and so the auto-placement rules now place items into the same space. the item also doesn’t cause the additional row to be created to span to row line 3. if we remove position: absolute from the rules for .box3 you can see how it would display without the positioning. a grid container as parent if the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. the positioning context will be whatever element cre...
...s children and pseudo-elements in the document tree.” if you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. this means that children of a grid item can become grid items. sound odd? here is a simple example. in the following markup, i have a grid and the first item on the grid is set to span all three column tracks. it contains three nested items. as these items are not direct children, they don’t become part of the grid layout and so display using regular block layout. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .box { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; ...

CSS selectors - CSS: Cascading Style Sheets
attribute selector selects all elements that have the given attribute. syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] example: [autoplay] will match all elements that have the autoplay attribute set (to any value). grouping selectors selector list the , is a grouping method, it selects all the matching nodes. syntax: a, b example: div, span will match both <span> and <div> elements. combinators descendant combinator the (space) combinator selects nodes that are descendants of the first element. syntax: a b example: div span will match all <span> elements that are inside a <div> element. child combinator the > combinator selects nodes that are direct children of the first element. syntax: a > b example: ul > li will mat...
...> combinator selects nodes that are direct children of the first element. syntax: a > b example: ul > li will match all <li> elements that are nested directly inside a <ul> element. general sibling combinator the ~ combinator selects siblings. this means that the second element follows the first (though not necessarily immediately), and both share the same parent. syntax: a ~ b example: p ~ span will match all <span> elements that follow a <p>, immediately or not. adjacent sibling combinator the + combinator selects adjacent siblings. this means that the second element directly follows the first, and both share the same parent. syntax: a + b example: h2 + p will match all <p> elements that directly follow an <h2>. column combinator the || combinator selects nodes which belong to ...

Child combinator - CSS: Cascading Style Sheets
d by the second selector must be the immediate children of the elements matched by the first selector. this is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the dom. ...
...ate children of the elements matched by the first selector. this is stricter than the descendant combinator, which matches all elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the dom. syntax selector1 > selector2 { style properties } examples css span { background-color: white; } div > span { background-color: dodgerblue; } html <div> <span>span #1, in the div. <span>span #2, in the span that's in the div.</span> </span> </div> <span>span #3, not in the div at all.</span> result specifications specification status comment selectors level 4the definition of 'child combinator' in that specification. working draft selectors...

Column combinator - CSS: Cascading Style Sheets
mbinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
...lements matched by the first. /* table cells that belong to the "selected" column */ col.selected || td { background: gray; } syntax column-selector || cell-selector { /* style properties */ } examples html <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications specification status comment selectors level 4the definition of 'column combinator' in that specification. working draft initial ...

CSS reference - CSS: Cascading Style Sheets
iusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-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>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyemp...
... combinator a > b specifies that the element selected by b is the direct child of the element selected by a. descendant combinator a b specifies that the element selected by b is a descendant of the element selected by a, but is not necessarily a direct child. column combinator a || b specifies that the element selected by b is located within the table column specified by a. elements which span multiple columns are considered to be a member of all of those columns. pseudo pseudo classes : specifies a special state of the selected element(s). pseudo elements :: represents entities that are not included in html. see also: selectors in the selectors level 4 specification. concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorth...

Specificity - CSS: Cascading Style Sheets
raries, like bootstrap or normalize.css). never use !important when you're writing a plugin/mashup. never use !important on site-wide css. instead of using !important, consider: make better use of the css cascade use more specific rules. by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <span>text</span> </div> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to spec...
...> div#test span { color: green; } div span { color: blue; } span { color: red; } no matter the order, text will be green because that rule is most specific. (also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules) as a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify. #myid#myid span { color: yellow; } .myclass.myclass span { color: orange; } how !important can be used: a) overriding inline styles your global css file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements. both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former. in th...

break-after - CSS: Cascading Style Sheets
e in the level 4 spec. formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete 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: 200px. 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>...
...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: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification. candidate recommendation adds the recto and verso...

break-before - CSS: Cascading Style Sheets
e in the level 4 spec. formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete 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: 200px. 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 <...
...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: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification. candidate recommendation adds the recto and ver...

Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
ide explains the change to the syntax, including the reasoning behind this change. it also details the in-built backwards compatibility for the display property. what happens when we change the value of the display property? one of the first things we learn about css is that some elements are block-level and some are inline-level. for example, an <h1> or a <p> are block-level by default, and a <span> is inline-level. using the display property we can switch between block and inline. for example to make a heading inline we would use the following css: h1 { display: inline; } more recently we have gained css grid layout and flexbox. to access these we also use values of the display property — display: grid and display: flex. only when the value of display is changed do the children bec...
... both an outer and an inner display type. the outer display type describes whether the element is block-level or inline-level. the inner display type describes how the children of that box behave. as an example, when we use display: flex we create a block-level container, with flex children. the children are described as participating in a flex formatting context. you can see this if you take a <span> — normally an inline-level element — and apply display: flex to it. the <span> becomes a block-level element. it behaves as block-level things do in relationship to other boxes in the layout. it’s as if you had applied display: block to the span, however we also get the changed behavior of the children. the live example below has a <span> with display: flex applied. it has become a block-...

<display-outside> - CSS: Cascading Style Sheets
that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow. this will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. ...
...ult in expected behavior; for example if you specify an element to be block, you would 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: 1px solid rebeccapurple; } result specifications specification status css display module level 3the definition of 'display-outside' in that specification. candidate recommendation ...

inset - CSS: Cascading Style Sheets
es the same values as the left property. ...
.... ...

margin-trim - CSS: Cascading Style Sheets
instead, margin-trim could fix i...
...instead, margin-trim could fix it: article { margin-trim: in-flow; ... ...

<string> - CSS: Cascading Style Sheets
racters which would otherwise be invalid can be escaped with a backslash. these include double quotes when used inside a double-quoted string, single quotes when used inside a single-quoted string, and the backslash itself. for example, \\ will create a single backslash. to output new lines, you must escape them with a line feed character such as \a or \00000a. in your code, however, strings can span multiple lines, in which case each new line must be escaped with a \ as the last character of the line. however, to get new lines, you must also set the white-space property to appropriate value. note: html entities (such as &nbsp; or &#8212;) cannot be used in a css <string>. examples /* simple strings */ "this string is demarcated by double quotes." 'this string is demarcated by single qu...
... candidate recommendation no significant change from css level 2 (revision 1). css leve...

Getting Started - Developer guides
g with data finally, let's send some data to the server and receive a response. our javascript will request a dynamic page this time, test.php, which will take the data we send and return a "computed" string - "hello, [user data]!" - which we'll alert(). ...
...pt will request a dynamic page this time, test.php, which will take the data we send and return a "computed" string - "hello, [user data]!" - which we'll alert(). ...

Content categories - Developer guides
a few other elements belong to this category, but only if a specific condition is fulfilled: <area>, if it is a descendant of a <map> element <link>, if the itemprop attribute is present <meta>, if the itemprop attribute is present <style>, if the scoped attribute is present s...
...runs of phrasing content make up paragraphs. elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters). a few other elements belong to this category, but only if a specific condition is fulfilled: <a>, if it contains only phrasing content <area>, if it is a descendant of a <map> element <del>, if it contains only phrasing content <ins>, if it contains on...

Printing - Developer guides
...
... ...

<td>: The Table Data Cell element - HTML: Hypertext Markup Language
ay be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. permitted parents a <tr> element. implicit aria role cell if a descendant of a <table> element permitted aria roles any dom interface htmltabledatacellelement attributes this element includes the global attributes. ...
...its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. ...

<th> - HTML: Hypertext Markup Language
implicit aria role columnheader or rowheader permitted aria roles any dom interface htmltableheadercellelement attributes this element includes the global attributes. abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. ...
...its default value is 1; if its value is set to 0, it extends until the end of the table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. ...

<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
this is rendered by default as a simple solid underline, but may be altered using css. this element used to be called the "underline" element in older versions of html, and is still sometimes misused in this way. to underline text, you should instead apply a style that includes the css text-decoration property set to underline. 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. ...
... be presented using red dashed underline. result the result should be familiar to anyone who has used any of the more popular word processors available today. avoiding <u> most of the time, you actually don't want to use <u>. here are some examples that show what you should do instead in several cases. non-semantic underlines to underline text without implying any semantic meaning, use a <span> element with the text-decoration property set to "underline", as shown below. html <span class="underline">today's special</span> <br> chicken noodle soup with carrots css .underline { text-decoration: underline; } result presenting a book title book titles should be presented using the <cite> element instead of <u> or even <i>. html <p>the class read <cite>moby dick</cite> in the ...

MathML attribute reference - MathML
ack> specifies the horizontal alignment of digits. close <mfenced> a string for the closing delimiter. columnalign <mtable>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of table cells. columnlines <mtable> specifies table column borders. columnspacing <mtable> specifies the space between table columns. columnspan <mtd> a non-negative integer value that indicates over how many table columns the cell extends. unimplemented columnwidth <mtable> specifies the width of table columns. unimplemented crossout <mscarry> specifies what kind of line is drawn to cross out carries. unimplemented decimalpoint <mstyle> if the decimalpoint value is used to specify the al...
... to fit in the allowed width, this attribute sets the preferred handling. unimplemented position <msgroup>, <msrow>, <mscarries>, <msline> rowalign <mtable>, <mtd>, <mtr> specifies the vertical alignment of table cells. rowlines <mtable> specifies table row borders. rowspacing <mtable> specifies the space between table rows. rowspan <mtd> a non-negative integer value that indicates on how many rows does the cell extend. rspace <mo> the amount of space after the operator. rquote <ms> the closing quote mark (depends on dir) to enclose the content. the default value is "&quot;". scriptlevel <mstyle> controls mostly the font-size. the higher the scriptlevel, the smaller the font...

<mtd> - MathML
the mathml <mtd> element represents a cell in a table or a matrix. it may only appear in a <mtr> element. this element is similar to the <td> element of html. attributes class, id, style provided for use with stylesheets. columnalign specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: left, center and right. columnspan a non-negative integer value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign specifies the vertical alignment of this cell and overrides valu...
...plemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign specifies the vertical alignment of this cell and overrides values specified by <mtable> or <mtr>. possible values are: axis, baseline, bottom, center and top. rowspan a non-negative integer value that indicates on how many rows does the cell extend. specifications specification status comment mathml 3.0the definition of 'mtd' in that specification. recommendation current specification mathml 2.0the definition of 'mtd' in that specification. recommendation initial specification ...

direction - SVG: Scalable Vector Graphics
it defines the start and end points of a line of text as used by the text-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. it applies only to glyphs oriented perpendicular to the inline-base direction, which includes the usual case of horizontally-oriented latin or arabic text and the case of narrow-cell latin or arabic characters rotated 90 degrees clockwise relative to a top-to-bottom inline-base direction. ...
...attribute to the outermost <svg> element, and allow that direction to inherit to all text elements: note: as a presentation attribute, direction can be used as a css property. see css direction for further information. as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <textpath>, <text>, <tref>, and <tspan>. html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications speci...

dominant-baseline - SVG: Scalable Vector Graphics
ne, then the browser may use heuristics to determine the position of the desired baseline. note: as a presentation attribute, dominant-baseline can be used as a css property. see css dominant-baseline for further information. ...
... animatable yes auto if this property occurs on a <text> element, then the computed value depends on the value of the writing-mode attribute. if the writing-mode is horizontal, then the value of the dominant-baseline component is alphabetic. otherwise, if the writing-mode is vertical, then the value of the dominant-baseline component is central. if this property occurs on a <tspan>, <tref>, <altglyph>, or <textpath> element, then the dominant-baseline and the baseline-table components remain the same as those of the parent text content element. if the computed baseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of the font-size attribute on the element on which the dominant-baseline attribute occurs, otherwis...

fill - SVG: Scalable Vector Graphics
tribute that defines the color (or any svg paint servers like gradients or patterns) used to paint the element; for animation it defines the final state of the animation. as a presentation attribute, it can be applied to any element but it only has an effect on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan>. for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>. html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> ...
... yes note: as a presentation attribute fill can be used as a css property. tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, fill is a presentation attribute that defines the color of the text. value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. tspan for <tspan>, fill is a presentation attribute that defines the color of the text. value <paint> default value black animatable yes note: as a presentation attribute fill can be used as a css property. specifications specification status comment svg animations level 2the definition of 'transform' in that specification. e...

requiredFeatures - SVG: Scalable Vector Graphics
there is the (also deprecated) domimplementation.hasfeature() method. ...
...e#style the browser supports the <style> element. http://www.w3.org/tr/svg11/feature#viewportattribute the browser supports the clip and overflow attributes. http://www.w3.org/tr/svg11/feature#shape the browser supports the <rect>, <circle>, <line>, <polyline>, <polygon>, <ellipse> and <path> elements. http://www.w3.org/tr/svg11/feature#text the browser supports the <text>, <tspan>, <tref>, <textpath>, <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> elements. http://www.w3.org/tr/svg11/feature#basictext the browser supports the <text> element http://www.w3.org/tr/svg11/feature#paintattribute the browser supports the color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, col...

text-anchor - SVG: Scalable Vector Graphics
lti-line text, the alignment takes place for each line. the text-anchor attribute is applied to each individual text chunk within a given <text> element. each text chunk has an initial current text position, which represents the point in the user coordinate system resulting from (depending on context) application of the x and y attributes on the <text> element, any x or y attribute values on a <tspan>, <tref> or <altglyph> element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element. note: as a presentation attribute, text-anchor can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <t...
...element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element. note: as a presentation attribute, text-anchor can be used as a css property. ...

writing-mode - SVG: Scalable Vector Graphics
the writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. the writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, <altglyph> and <textpath> sub-elements. ...
...ext> element due to the unicode bidirectional algorithm and properties direction and unicode-bidi.) note: as a presentation attribute, writing-mode can be used as a css property. see the css writing-mode property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr animatable yes horizontal-tb this value defines a top-to-bottom block flow direction. both the writing mode and the typographic mode are horizontal. vertical-rl this value defines a right-to-left block flow direction. both the writing mode and the typographic ...

<a> - SVG: Scalable Vector Graphics
ilter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <for...

<altGlyph> - SVG: Scalable Vector Graphics
cated selection of the glyphs used to render its child character data. usage context categoriestext content element, text content child elementpermitted contentany elements or character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; animatable: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of a...
...y this attribute defines the corresponding absolute y-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; animatable: yes dx this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; animatable: yes dy this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative y-coordinate of ancestor <text> or <tspan>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element. value type: <list-of-numbers> ; default value: none; animatable: yes (non-add...

<circle> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<ellipse> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<foreignObject> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
... candidate recommendation scalable...

<g> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font...

<line> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<marker> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <for...

<path> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment svg pathsthe definition of '<path>' in that specificati...

<polygon> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<polyline> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<rect> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2th...

<svg> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font...

<symbol> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font...

<text> - SVG: Scalable Vector Graphics
fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specifications specification status comment scala...

<textPath> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specification...

<use> - SVG: Scalable Vector Graphics
or, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-...
...errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status ...

SVG element reference - SVG: Scalable Vector Graphics
ter> <foreignobject> g <g> h <hatch> <hatchpath> i <image> l <line> <lineargradient> m <marker> <mask> <mesh> <meshgradient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <d...
...ker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialgradient>, <script>, <style>, <symbol>, <title> paint server elements <hatch>, <lineargradient>, <meshgradient>, <pattern>, <radialgradient>, <solidcolor> renderable elements <a>, <circle>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <unknown>, <use> shape elements <circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect> structural elements <defs>, <g>, <svg>, <symbol>, <use> text content elements <altglyph>, <altglyphdef>, <altglyphitem>, <glyph>, <glyphref>, <textpath>, <text>, <tref>, <tspan> text content child elements <altglyph>, <textpath>, <tref>, <tspan> uncategorized elements <clippath>,...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
e, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implem...
... recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171). textpath implemented. recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug 456286, bug 571808). altglyphdef not implemented. altglyphitem not implemented. glyphref not implemented. marker module marker implemented. color profile module color-profile not im...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
ot implemented (bug 1239218) lang attribute without namespace implemented (bug 721920) svgsvgelement.viewport removed never implemented xml:base attribute removed implementation status unknown reorder descendent elements of <switch> having systemlanguage attribute according to allowreorder smil attribute implementation status unknown made <tspan> and <textpath> graphics elements implementation status unknown allow x, y, width, and height on <symbol> implementation status unknown made <use> element shadow trees consistent with shadow dom spec implementation status unknown role mapping of <a> element depending on whether it is a valid link implementation status unknown aria state and property...
...f> never really implemented (bug 1302693) svgtextcontentelement.selectsubstring() deprecated implementation status unknown getcomputedtextlength() not including dx and dy values implementation status unknown text in non-rendered elements not included in addressable characters implementation status unknown unknown elements in text render as unpositioned spans implementation status unknown offset distances of text positioned along a transformed path measured in text elements coordinate system implementation status unknown embedded content change notes <video> implementation status unknown <audio> implementation status unknown <iframe> implementation status unknown <can...

Positions - SVG: Scalable Vector Graphics
bottom. note that this 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 100px 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 dimensiona...
...ement: <svg width="100" height="100"> the above element defines a simple svg canvas with 100x100px. one user unit equals one screen unit. <svg width="200" height="200" viewbox="0 0 100 100"> the whole svg canvas here is 200px by 200px 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 unit area and enlarges the image to double size. the current mapping (for a single element or the whole image) of user units to screen units is called user coordinate system. apart from scaling the coordinate system can also be rotated, skewed and flipped. the default user coordinate system maps one user...

page-worker - Archive of obsolete content
ipt using either the postmessage() api or (preferably, usually) the port api. ...

Windows - Archive of obsolete content
thunderbird 3.3 / seamonkey 2.1) in gecko, each dom window has a unique 64-bit id number. you can get a dom window's id using the nsidomwindowutils attribute outerwindowid. each time a new window is created, it gets assigned an id one greater than the last created window. this can be used in cases in which you need to uniquely identify a dom window during the duration of the application's lifespan: var util = win.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsidomwindowutils); var windowid = util.outerwindowid; after running that code, windowid contains the outer window's unique id. similarly, you can get the current inner window id using the nsidomwindowutils attribute currentinnerwindowid: var util = win.queryinterface(components.int...

Communication between HTML and your extension - Archive of obsolete content
ed the extension to find. there were only a handful of events that seemed relevant (load, change, dominsertnode, dominsertnodeintodocument, domactivate) and i tried them all in many different ways. some of the events only apply to certain types of elements so i included trying to modify the result of the ajax request to be of the appropriate element type (img, which supports "onload," rather than span, which doesn't, for example). the problem with the events is the timing. i wasn't sure about the difference between the capture or bubbling flag that you pass to addeventlistener but every time i would catch the event in the extension, the element from the ajax request wasn't fully updated into the html page. what that meant is that everytime the extension went looking for the element, it wasn't ...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
. grid in the same way that the table element is used to lay out content in html, you can use the grid element in xul. as shown in listing 20, you first declare the number of columns, and then define the content of each row. the output of this sample is shown in figure 16. you can also code it so that the rows come first, declaring the number of rows and then defining content by column. the rowspan and colspan attributes available in html tables are not available in xul grids. <grid> <columns> <column/> <column flex="1"/> </columns> <rows> <row align="center"> <label value="user id"/> <textbox/> </row> <row align="center"> <label value="name"/> <textbox/> </row> </rows> </grid> listing 20: layout using the grid figure 16: output ...

The Essentials of an Extension - Archive of obsolete content
cessary to translate the extension's description, or even its name. a localized description and name can be added with the following code: <em:localized> <description> <em:locale>es-es</em:locale> <em:name>xul school hola mundo</em:name> <em:description>bienvenido a xul school!</em:description> </description> </em:localized> the es-es locale string indicates that this is the spanish (es) localization for spain (es). you can add as many <em:localized> sections as you need. for firefox 2, localizing this file is a little more complicated. we'll discuss localization further ahead in this section. <em:type>2</em:type> this specifies that the add-on being installed is an extension. you can read about different possible types in the install.rdf specification. <em:targe...

Extensions support in SeaMonkey 2 - Archive of obsolete content
there are exceptions, but these are few and far between. seamonkey also uses different ids for the menu items. some important ...

XML data - Archive of obsolete content
you want the document's info elements to be displayed like html paragraphs. in the document's stylesheet, you specify how info elements are to be displayed: info { display: block; margin: 1em 0; } the most common values for the display property are: block displayed like html's div (for headings, paragraphs) inline displayed like html's span (for emphasis within text) add your own style rules that specify the font, spacing and other details in the same way as for html. more details other values of display display the element like a list item, or like a component of a table. for the full list of display types, see the display property in the css specification. using css alone, the structure of the display mu...

CSS3 - Archive of obsolete content
t consists mainly in allowing nested at-rules inside @media and the adding of a new css at-rule, @supports, and a new dom method css.supports(). css multi-column layout module working draft adds support for easy multi-column layouts using the css columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside. css values and units module level 3 candidate recommendation makes initial and inherit keywords usable on any css property. formally defines the css data types of css 2.1, that were implicitely defined by their grammar token and some textual precisions. adds: definition for new font-r...

Localizing an extension - Archive of obsolete content
[5] + " | " + lowstring + fieldarray[6] + " | " + highstring + fieldarray[7] + " | " + volumestring + fieldarray[8]; localizing the description in install.rdf see localizing extension descriptions. adding more localizations to add another localization for a new language, all you need to do is add another line to the chrome manifest referencing the new locale. for example, to add a spanish localization, you would add: locale stockwatcher2 es-es chrome/locale/es-es/ then just create a subdirectory chrome/locale/es-es and add the needed dtd files; in this case, options.dtd and stockwatcher2.dtd. these files should map the same tags to the spanish translations of the strings used by the extension. likewise, if we have any property files containing localizable strings for our java...

Layout FAQ - Archive of obsolete content
't help with pending style changes, but it'll work to detect cases when the popup or something in it needs to be reflown. ...

jspage - Archive of obsolete content
tml:"innerhtml","class":"classname","for":"htmlfor",defaultvalue:"defaultvalue",text:(browser.engine.trident||(browser.engine.webkit&&browser.engine.version<420))?"innertext":"textcontent"}; var b=["compact","nowrap","ismap","declare","noshade","checked","disabled","readonly","multiple","selected","noresize","defer"];var k=["value","type","defaultvalue","accesskey","cellpadding","cellspacing","colspan","frameborder","maxlength","readonly","rowspan","tabindex","usemap"]; b=b.associate(b);hash.extend(e,b);hash.extend(e,k.associate(k.map(string.tolowercase)));var a={before:function(m,l){if(l.parentnode){l.parentnode.insertbefore(m,l); }},after:function(m,l){if(!l.parentnode){return;}var n=l.nextsibling;(n)?l.parentnode.insertbefore(m,n):l.parentnode.appendchild(m);},bottom:function(m,l){l.appendc...

New Security Model for Web Services - Archive of obsolete content
sy to drop an access file into the root directory of the web server to allow access. delegation with mixed ownership independent owners of subdirectories cannot grant web script access to these subdirectories without getting the owner of the root directory to post a delegating access file. normally a server will be either inside or outside of a firewall, so this is not a problem. where a server spans multiple owners, the alternative would be to scan all directories in the path looking for a web scripts access file, which seems undesirable. on the other hand, perhaps it is not so bad, since it permits independent management in domains where the top level owner may not care about providing access to web services. adjustments as this new model is applied to soap, and potentially document.load...

BlogPosts - Archive of obsolete content
r 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window, tabless browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle custom google reader + talk (french) just browsing: site-specific browsers ...

Table Layout Regression Tests - Archive of obsolete content
block and table layout submit your patch and lists the remaining differences in the bug be prepared to cycle. how the layout regression tests work first the url's to test are red from rtest.lst files in various directories. layout/html/tests/block/rtest.lst points to them. snippet from rtest.lst in the table/marvin directory: body_col.html body_tbody.html body_tfoot.html body_thead.html col_span.html the regression tests compare the frame tree dumps recorded at two different times. the url's to test are red from rtest.lstfor every file in rtest.lst mozilla takes the root frame and dumps the whole tree via nsframe::dumpregression. the frame tree dumps are invoked by the nsilayoutdebugger. the frame trees are dumped to separate files in a baseline or verify directory for all url's in rtes...

The new nsString class implementation (1999) - Archive of obsolete content
portability, thread and process safety of gecko, i suggest the following rules regarding the use of each of our string class derivatives: <center> string class</center> <center> where to use</center> nsstrimpl use to pass strings between modules who have linked the nsstrimpl function library. nsstring use these locally in objects who span of control is known to live within your own process. these should typically not be exposed to objects in other modules. nsautostring use these locally in cases where you don't want to incur heap allocation unless absolutely necessary. nscstring same as nsstring, but should be used with caution because of localization concerns. nsistring use to pass strings betw...

Using XPInstall to Install Plugins - Archive of obsolete content
ript, you can call xpinstall's execute method of the install object to execute the binary. you can also call the execute method of the file object if you wish to actually install the file you are executing, rather than have it deleted. you can pass command line parameters to the executable. an example of calling the execute method from the install object on an executable that has a temporary life span (and is not needed after one execution) is: // initialize the installation .... // initinstall(..... ) has already been called // using the install object's execute method to block on a native installer execute("setup.exe", "-s", true); // in the above sample, assume that running "setup -s" from the // command prompt runs the setup executable, and that "-s" is some // invocation parameter ...

Building accessible custom components in XUL - Archive of obsolete content
is a new technology which enables developers to construct accessible controls within (x)html pages. developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). by implementing dhtml accessibility techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview). firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the under...

Index - Archive of obsolete content
is a new technology which enables developers to construct accessible controls within (x)html pages. developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). 422 deprecated and defunct markup reference, xul {many elements on this page are wrongly marked as deprecated, this page needs review} 423 dynamically modifying xul-based user interface add-ons, dom, extensions, xul this article discusses manipulating xul interfaces...

Cross Package Overlays - Archive of obsolete content
ifier of the toolbox in the browser window (navigator.xul). this means that the overlay will apply to the toolbox in the browser window and the content will be added as an extra toolbar. the id of the toolbox changed from "<code>navigator-toolbox</code>" to "<code>browser-toolbox</code>" in firefox 3 beta 3. you can support both firefox 2 and earlier and firefox 3 by duplicating the <code><span class="plain">' .. <toolbox> .. '</span></code> section with that id. to add this overlay to the manifest file, we need to add two resources. first, we add one for each window that we are applying an overlay to. the code below should be added into contents.rdf just before the closing rdf tag. <rdf:seq about="urn:mozilla:overlays"> <rdf:li resource="chrome://navigator/content/navigator.xul"/...

Grids - Archive of obsolete content
e, although the first row is more so. the cell in the first column and first row (the cherry button) will be flexible by a factor of 5 horizontally and flexible by a factor of 10 vertically. the next cell, (lemon) will only be flexible vertically. the flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction. column spanning there is no means of making a cell span a particular number of multiple columns or rows (see discussion for a way of achieving the same effect). however, it is possible to make a row or column that spans the entire width or height of the grid. to do this, just add an element inside the rows element that isn't inside a row element. you can use a box type for example, and put other elements i...

Localization - Archive of obsolete content
ist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" l...

Tabboxes - Archive of obsolete content
you can see the two tabs, search and options. clicking on each one will bring up the respective tab pages. as shown by the image, the two...

reftest opportunities files - Archive of obsolete content
ts/html/table05d.html parser/htmlparser/tests/html/table05c.html parser/htmlparser/tests/html/table05b.html parser/htmlparser/tests/html/table05a.html parser/htmlparser/tests/html/strike008.html parser/htmlparser/tests/html/strike007.html parser/htmlparser/tests/html/strike006.html parser/htmlparser/tests/html/strike005.html parser/htmlparser/tests/html/strike002.html parser/htmlparser/tests/html/span003.html parser/htmlparser/tests/html/span002.html parser/htmlparser/tests/html/span001.html parser/htmlparser/tests/html/residual.html parser/htmlparser/tests/html/quote003.html parser/htmlparser/tests/html/quote002.html parser/htmlparser/tests/html/quote001.html parser/htmlparser/tests/html/q001.html parser/htmlparser/tests/html/pre016.html parser/htmlparser/tests/html/pre015.html parser/htmlpar...

title - Archive of obsolete content
>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" style="text-align:center">rss version ...

Table Reflow Internals - Archive of obsolete content
frame table reflow outer table reflows table and caption (if present) table reflows row groups in multiple passes pass 1 - unconstrained width, height and requests max elem width. the table figures out the column widths (balances) given the style width constraints on the table, col groups, cols, cells the preferred and max element sizes of the cells (from the pass 1 reflow), and considers colspans pass 2 - cell widths are constrained by the column widths (heights are only constrained in paginated mode). table reflow table reflows row groups (continued) the row group figures out the row heights given its style height constraints, its rows and cells, and the actual heights of its rows and cells from the pass 2 reflow. if the table has a style height, it allocates extra height to its ro...

Summary of Changes - Archive of obsolete content
this section outlines all of the element and practice updates described in this article. for a complete discussion of these items, see the sections in which they are described. ...

Introduction - Archive of obsolete content
var element2 = <foo> <bar/> </foo>; additionally, you can specify all of the normal attributes on elements that you would normally include in an xml document. ...

XForms Output Element - Archive of obsolete content
). text displaying the data as text is the default presentation. xforms output is most often used when a form author needs to render simple text of an instance node (xhtml/xul). characteristics text is presented to the user when there is no type given for the bound node or a type is specified that is not handled by one of the other widgets (as documented below). analogous widgets are <xhtml:span/> and <xul:description/> calendar a form author may notice a xforms output element represented by a calendar widget in the mozilla xforms processor if the control meets the following criteria (xhtml/xul). characteristics the bound instance node is of type xsd:date or a type derived from it in addition, the appearance attribute must also contain the value "full" firefox 2.0 doesn't currentl...

Localization - MDN Web Docs Glossary: Definitions of Web-related terms
localization (l10n) is the process of adapting a software user interface to a specific culture. the following are common factors to consider: language unit of measure (e.g., kilometers in europe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs. 10,000.00 in the u.s.) date format currency cultural references paper size color psychology compliance with local laws local holidays personal names l...

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
ps around the role (or meaning) 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: 32px; margin: 21px 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 presen...

RTL (Right to Left) - MDN Web Docs Glossary: Definitions of Web-related terms
...

Backgrounds and borders - Learn web development
ds 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 accepts any valid <color>. a background-color extends underneath the content and padding box of the element. in the example below, we have used various color values to add a background color to the box, a heading, and a <span> element. play around with these, using any available <color> value. background images the background-image property enables the display of an image in the background of an element. in the example below, we have two boxes — one has a background image which is larger than the box, the other has a small image of a star. this example demonstrates two things about background images. by defaul...

Test your skills: Selectors - Learn web development
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. selectors one without changing the html, use css to do the following things: make h1 headings blue. give h2 headings a blue background and white text. cause text wrapped in a span to have a font-size of 200%. 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 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 ye...

CSS selectors - Learn web development
hich style certain states of an element. the :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself. for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first formatted line and then selected. p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents. the following for example selects paragraphs that are direct children of <article> elements using the child combinator (>): article > p { } next steps you can take a look at the reference table of...

Styling tables - Learn web development
ove (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">the clash</th> <td>1976</td> <td>6</td> <td>london calling</td> </tr> ... some rows removed for brevity <tr> <th scope="row">the stranglers</th> <td>1974</td> <td>17</td> <td>no more heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> the table is nicely marked up, easily styleable, and accessible, thanks to features such as scope, <caption>, <thead>, <tbody>, etc. unfortunately, it doesn't look good when rendered on the screen (see it live at punk-bands-unstyled.html): with only the default browser styling it looks cramped, hard to read, and...

Test your skills: Grid Layout - Learn web development
ly, and a 20-pixel gap between the column and row tracks. 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. grid layout two in this example we already have a grid defined. by editing the css rules for the two child elements, cause them to span over several grid tracks each; the second item should overlay the first as in the image below. try updating the live code below to recreate the finished example: additional questions: can you now cause the first item to display on top without changing the order of items in the source? for assessment or further work purposes, download the starting point for this task to work in your ow...

Grids - Learn web development
</article> <aside><h2>other things</h2> <p>nam vulputate diam nec tempor bibendum. donec luctus augue eget malesuada ultrices. phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> </aside> <footer>contact me@mysite.com</footer> </div> the rules for grid-template-areas are as follows: you need to have every cell of the grid filled. to span across two cells, repeat the name. to leave a cell empty, use a . (period). areas must be rectangular — you can’t have an l-shaped area for example. areas can't be repeated in different locations. you can play around with our layout, changing the footer to only sit underneath the content and the sidebar to span all the way down for example. this is a very nice way to describe a layout as...

Introduction to CSS layout - Learn web development
">five</div> <div class="box6">six</div> </div> once you have a grid, you can explicitly place your items on it, rather than relying on the auto-placement behavior seen above. in the second example below we have defined the same grid, but this time with three child items. we've set the start and end line of each item using the grid-column and grid-row properties. this causes the items to span multiple tracks. grid example 2 * {box-sizing: border-box;} .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } .box1 { grid-column: 2 / 4; grid-row: 1; } .box2 { grid-col...

Using CSS generated content - Learn web development
t. this issue does not arise if the content you specify consists of symbols or images that apply in all languages and cultures. examples text content css can insert text content before or after an element. to specify this, make a rule and add ::before or ::after to the selector. in the declaration, specify the content property with the text content as its value. html a text where i need to <span class="ref">something</span> css .ref::before { font-weight: bold; color: navy; content: "reference "; } output the character set of a stylesheet is utf-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways. for details, see 4.4 css style sheet representation in the css specification. individual characters can also be specified by an esca...

Fundamental text and font styling - Learn web development
properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box. note: bear in mind that the text inside an element is all affected as one single entity. you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts. in this example we'll apply some different css properties to the same htm...

Styling links - Learn web development
<li> elements are normally block by default (see types of css boxes for a refresher), meaning that they will sit on their own lines. in this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like...

Define terms with HTML - Learn web development
eyword defined, and indicates that the current paragraph defines the keyword. in other words, there's an implicit relationship between the <dfn> element and its container. if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation. </span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term. you can use aria-describedby on any tag enclosing a keyword to be defined (not just the <dfn> element).

Structuring a page of content - Learn web development
uch as codepen, jsfiddle, or glitch to work on the tasks. note: if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. project brief for this project, your task is to take the content for the homepage of a bird watching website and add structural elements to it so it can have a page layout applied to it. it needs to have: a header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. the title and logo appear side by side once styling is applied, and the navigation appears below those two items. a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails. a footer containing copyright informatio...

What’s in the head? Metadata in HTML - Learn web development
ic results, for example), and it is useful to people with visual impairments using screen readers (for example, the word "six" exists in both french and english, but is pronounced differently.) you can also set subsections of your document to be recognised as different languages. for example, we could set our japanese language section to be recognised as japanese, like so: <p>japanese example: <span lang="ja">ご飯が熱い。</span>.</p> these codes are defined by the iso 639-1 standard. you can find more about them in language tags in html and xml. summary that marks the end of our quickfire tour of the html head — there's a lot more you can do in here, but an exhaustive tour would be boring and confusing at this stage, and we just wanted to give you an idea of the most common things...

Responsive images - Learn web development
ld already know the basics of html and how to add static images to a web page. objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on websites. why responsive images? let's examine a typical scenario. a typical website may contain a header image and some content images below the header. the header image will likely span the whole of the width of the header, and the content image will 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 pix...

Video and audio content - Learn web development
nology quickly. formats like mp3, mp4 and webm are called container formats. they define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth. a webm file containing a movie which has a main video track and one alternate angle track, plus audio for both english and spanish, in addition to audio for an english commentary track can be conceptualized as shown in the diagram below. also included are text tracks containing closed captions for the feature film, spanish subtitles for the film, and english captions for the commentary. the audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. different...

Assessment: Structuring planet data - Learn web development
ells — in the raw data, each row of planet data is shown next to its associated planet. add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for. add a black border just around the column that contains all the planet name row headers. hints and tips the first cell of the header row needs to be blank, and span two columns. the group row headings (e.g. jovian planets) that sit to the left of the planet name row headings (e.g. saturn) are a little tricky to sort out — you need to make sure each one spans the correct number of rows and columns. one way of associating headers with their rows/columns is a lot easier than the other way. assessment or further help if you would like your work assessed, ...

HTML Tables - Learn web development
re working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles: html table basics this article gets you started with html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. html table advanced features and accessibility this module looks at some more advanced features of html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users. asse...

Manipulating documents - Learn web development
ate three variables that hold references to the list (<ul>), <input>, and <button> elements. create a function that will run in response to the button being clicked. inside the function body, start off by storing the current value of the input element in a variable. next, empty the input element by setting its value to an empty string — ''. create three new elements — a list item (<li>), <span>, and <button>, and store them in variables. append the span and the button as children of the list item. set the text content of the span to the input element value you saved earlier, and the text content of the button to 'delete'. append the list item as a child of the list. attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside. ...

Accessibility in React - Learn web development
y named ref objects. the textbox <input> in your editing template should be updated like this: <input id={props.id} classname="todo-text" type="text" value={newname} onchange={handlechange} ref={editfieldref} /> the "edit" button in your view template should read like this: <button type="button" classname="btn" onclick={() => setediting(true)} ref={editbuttonref} > edit <span classname="visually-hidden">{props.name}</span> </button> focusing on our refs with useeffect to use our refs for their intended purpose, we need to import another react hook: useeffect(). useeffect() is so named because it runs after react renders a given component, and will run any side-effects that we'd like to add to the render process, which we can't run inside the main function body. usee...

React interactivity: Events and state - Learn web development
} deletetask={deletetask} /> )); in todo.js, we want to call props.deletetask() when the "delete" button is pressed. deletetask() needs to know the id of the task that called it, so it can delete the correct task from the state update the "delete" button inside todo.js, like so: <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span> </button> now when you click on any of the "delete" buttons in the app, your browser console should log the id of the related task. deleting tasks from state and ui now that we know deletetask() is invoked correctly, we can call our settasks() hook in deletetask() to actually delete that task from the app’s state as well as visually in the app ...

Handling common accessibility problems - Learn web development
entifies an updating region. its value indicates how urgently the screen reader should read it out: off: the default. updates should not be announced. polite: updates should be announced only if the user is idle. assertive: updates should be announced to the user as soon as possible. rude: updates should be announced straight away, even if this interrupts the user. here's an example: <p><span id="liveregion1" aria-live="polite" aria-atomic="false"></span></p> you can see an example in action at freedom scientific's aria (accessible rich internet applications) live regions example — the highlighted paragraph should update its content every 10 seconds, and a screenreader should read this out to the user. aria live regions - atomic provides another useful example. we don't have space...

Handling common HTML and CSS problems - Learn web development
is a good idea to research what browsers they are supported in, and what related techniques are useful. see finding help below. html fallback behaviour some problems can be solved by just taking advantage of the natural way in which html/css work. unrecognised html elements are treated by the browser as anonymous inline elements (effectively inline elements with no semantic value, similar to <span> elements). you can still refer to them by their names, and style them with css, for example — you just need to make sure they are behaving as you want them to, for example setting display: block; on all of the new semantic elements (such as <article>, <aside>, etc.), but only in old versions of ie that don't recognise them (so, ie 8 and lower). this way new browsers can just use the code as no...

Accessibility Information for Core Gecko Developers
these widgets are often not even keyboard focusable, and assistive technologies do not understand these widgets. this document shows several interactive desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and formats working group (pfwg) to address the issue of dhtml accessibility. ...

Gecko info for Windows accessibility vendors
cessible objects, although we do support event_scrollingend and isimpledomnode::scrollto(), explained below. we do not currently support state_moveable, state_sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different rows. there are currently two techniques for parsing tables: 1) use acclocation() to get the coordinates for each cell and feed that into an algorithm that builds up your own table data structure, or 2) use isimpledomnode and parse the table see below for the complete list of roles and notes about what we support intentional differences w...

Getting from Content to Layout
troyed, based on whatever is optimal for the changes in the content tree. "frame construction items" are queued for each change. these items are then examined in relation to the location in the content tree that is being modified and either the relevant frames are created/destroyed or the logic moves up to the parent frame. to give a trivial example of when this might be necessary, consider: "<span>foo <div></div> bar</span>". separate frames are created for the pre and post-div parts of the <span>. if the <div> is removed, the frame construction code merges those frames by examining the parent frame, destroying the two frames created for the <span>, and creating one unified frame for the text content. examples of this type of code are in wipecontainingblock. this code tries hard to avo...

CustomizableUI.jsm
spring, spacer, and separator. source_builtin string "builtin", a constant indicating the widget is built-in. source_external string "external", a constant indicating the widget is externally provided (e.g., by add-ons or other items not part of the builtin widget set). wide_panel_class string "panel-wide-item", the class used to distinguish items that span the entire menu panel. panel_column_count number 3, the (constant) number of columns in the menu panel. examples createwidget - button type this is likely the code you need for your widget. only rare need a type:custom widget. customizableui.createwidget({ id: 'id_of_my_widget_within_customizableui_and_dom', defaultarea: customizableui.area_navbar, label: 'my ...

PopupNotifications.jsm
imported by firefox chrome windows, so you don't have to do it yourself in most extensions. method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not. methods locationchange() the consumer can call this method to let the popup notification module know that the current browser's location has changed. this lets the notification service update the active notifications as appropriate. note: you shouldn't need to call this when using the po...

Index
e guide is for you to author. the content here should be what you and your localization team have decided, together, to follow when localizing mozilla products and web sites. you are free to add, edit, remove, and localize everything in this section according to how the localization team for your language agrees. all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom. enjoy developing your style guide! 31 patching a localization localization say you have found a problem with an existing localization. more specifically, it's a problem with an already released localization. what do you do now? well, you have come to the right place! this page will walk you through creating a patch for a...

Mozilla Content Localized in Your Language
e guide is for you to author. the content here should be what you and your localization team have decided, together, to follow when localizing mozilla products and web sites. you are free to add, edit, remove, and localize everything in this section according to how the localization team for your language agrees. all we ask is that you name this page according to this example, "mozilla content in spanish (es-mx)" and add your locale code tag at the bottom. enjoy developing your style guide! your language's style guide abbreviations how are abbreviations expressed in your language? numerals and metrics how are numerals and metrics expressed in your language? formal and informal forms, and separators (, or .) date format what are the date formats for weeks and months are expressed in th...

Localization and Plurals
, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, … plural rule #1 (2 forms) families: germanic (danish, dutch, english, faroese, frisian, german, norwegian, swedish), finno-ugric (estonian, finnish, hungarian), language isolate (basque), latin/greek (greek), semitic (hebrew), romanic (italian, portuguese, spanish, catalan), vietnamese is 1: 1 everything else: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, … plural rule #2 (2 forms) families: romanic (french, brazilian portuguese), lingala is 0 or 1: 0, 1 everything else: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ...

Localization content best practices
that is currently in use by "%s". please select another. example: search %1$s for "%2$s" non-directional single, and double, quotation marks should be used in reference to html code, or other languages where ascii character usage is required, such as html. html does not prefer one over the other, and our codebase uses them interchangeably as of march 2016. example: this web page at <span id='malware_sitename'/> has been reported as an attack page and has been blocked based on your security preferences. u+2026 (\u2026) is the horizontal ellipsis character. this character should be used in place of three consecutive periods. create localizable strings don't assume grammar structures you need to consider the need for different grammar structures in different locales, and add sw...

Localizing extension metadata on addons.mozilla.org
operties page you can specify the location of the worker in order to restrict to people living in the country where the language is spoken. the reward is up to you, but $5-10 per translation seems to work well. localization codes amo offers 33 localizations, including english. ...

Localizing with Koala
introduction this tutorial will guide you through making a couple of changes to firefox's user interface using koala, an add-on for komodo edit created to help localizing mozilla. for the purposes of this tutorial, the locale code that we will use will be called "x-testing". in a real-life situation, that would become for example "de" (for german) or "es-es" (for spanish in spain). translating to x-testing will basically consist of converting any strings to uppercase, for example "file" in original version (en-us) will become "file" in x-testing. we will translate a small piece of the ui found in the search bar. the search bar is next to the right of the location bar, and by default points to the google search. if you click on the highlighted arrow pointing down while reading this tut...

MathML Demo: <mtable> - tables and matrices
nal vertical align is center ---... 1 22 333 4444 x 55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below. when align="center" or align="baseline", the middle of the table coincides with the baseline. external vertical align is axis ---... 1 22 333 4444 x 55555 lim n→∞ f-1 ⋃ i=1 n ai rowspan=2 here xn + yn n columnspan=2 here 7777777 11 ...--- , columnlines="solid", rowlines="dashed solid dashed". by default -- when the align attribute is not set, or when align="axis", the middle of the table coincides with the math axis. external vertical align is top ---... 1 22 333 4444 55555 x + 1 666666 a b c 7777777 11 cols arg is"...

Mozilla DOM Hacking Guide
s macro is used if the dom class (for example xmlhttprequest) does not have any interface, yet you want the xmlhttprequest object to be available from javascript. #define dom_classinfo_map_begin_no_class_if(_class, _interface) _dom_classinfo_map_begin(_class, &ns_get_iid(_interface), pr_false) this macro should be used for dom classes that have no "leaf" interface. for example, there is no htmlspanelement in the w3c dom specification. therefore, the first interface in the prototype chain for the span element is htmlelement. however we do want to be able to access htmlspanelement to modify it. this macro allows you to do that. see bug 92071 for more information. let's now see how to specify the interfaces available from javascript for a particular dom class. #define dom_classinfo_map_entry(...

Mozilla Web Developer FAQ
vehttpheaders extension or by using the web sniffer. class names and ids are case-sensitive. the element selectors are case-sensitive with xml. style sheet processing instructions are only allowed in the prolog of xml documents. also, they only work in xml documents—not in documents served as text/html. width and height do not apply to non-replaced inline elements such as (by default) <span>. text-align: center; centers inline content within a block. it does not (and should not) center the block box itself. a block is centered by setting its margin-left and margin-right to auto and its width to a value that makes the block narrower than its containing block. it is also possible, although not very likely, that you are seeing a bug. javascript doesn’t work! why? some proprietar...

Mozilla Quirks Mode Behavior
rk has been removed in firefox 37 and empty-cells also defaults to show in quirks mode (bug 1020400). in quirks mode floated tables never move to the next "line" if they don't fit next to other floats, they just keep widening the page (see bug 43086). to correspond, their width is computed as though only the remaining available space is the containing block width (bug 99461). in quirks mode colspan="0" and rowspan="0" are intentionally not handled as described in html4 (bug 9879). hspace and vspace are supported on table only in quirks mode (bug 41893). proposed to remove: bug 725646. in quirks mode, when tables have a border style of inset or outset, the border color is based on the background color of the table or of the nearest ancestor with non-transparent background. [this may have...

NSS_3.12.3_release_notes.html
ogue md5-collision ca cert bug 472291: crash in libpkix object leak tests due to null pointer dereferencing in pkix_build.c:3218. bug 472319: vfychain validates chain even if revoked certificate. bug 472749: softoken permits aes keys of any length to be created bug 473147: pk11mode tests fails on aix when using shareable dbs. bug 473357: ssltap incorrectly parses handshake messages that span record boundaries bug 473365: incompatible argument in pkix_validate.c. bug 473505: softoken's c_initialize and c_finalize should succeed after a fork in a child process bug 473944: trust anchor is not trusted when requirefreshinfo flag is set. bug 474532: softoken cannot import certs with empty subjects and non-empty nicknames bug 474777: wrong deallocation when modifying crl. bug 47...

Hacking Tips
named dis to dump the bytecode of a function with its source notes. without arguments, it will dump the bytecode of its caller. js> function f () { return 1; } js> dis(f); flags: loc op ----- -- main: 00000: one 00001: return 00002: stop source notes: ofs line pc delta desc args ---- ---- ----- ------ -------- ------ 0: 1 0 [ 0] newline 1: 2 0 [ 0] colspan 2 3: 2 2 [ 2] colspan 9 getting the bytecode of a function (from gdb) in jsopcode.cpp, a function named js::disassembleatpc can print the bytecode of a script. some variants of this function such as js::dumpscript etc are convenient for debugging. printing the js stack (from gdb) in jsobj.cpp, a function named js::dumpbacktrace prints a backtrace à la gdb for the js stack. the...

SpiderMonkey 1.8
present in debug builds. js_setgczeal is especially helpful. when gc zeal is enabled, gc happens extremely frequently. this makes gc-related problems easier to reproduce, reveals gc problems that you may not have noticed before, and causes gc-safety bugs to surface much closer to their cause. js_dumpheap dumps parts of the gc heap and can help detect leaks. a new gc parameter, jsgc_stackpool_lifespan, controls how eagerly spidermonkey returns unused memory back to the system. the new function js_setextragcroots provides another way to protect values from garbage collection. there is a new set of apis for integrating spidermonkey's garbage collector with other memory management systems. these apis are undocumented but fairly stable. the apis include the new jstraceop callback. new javascri...

IAccessibleHypertext
is valid, that is it lies in the interval from 0 to the number of links minus one, a reference to the specified hyperlink object is returned. if the index is invalid then a null pointer is returned. return value e_invalidarg if bad [in] passed, [out] value is null. s_ok. hyperlinkindex() returns the index of the hyperlink that is associated with this character index. this is the case when a link spans the given character index. [propget] hresult hyperlinkindex( [in] long charindex, [out] long hyperlinkindex ); parameters charindex a 0 based index of the character for which to return the link index. if iaccessibletext is used to represent the text containing the link, then the character index is only valid if it is greater than or equal to zero and lower than the number of characters in ...

IAccessibleText
ty or invalid when no appropriate text() portion is found or text() type is invalid. return value e_invalidarg if bad [in] passed, [out] values are 0s and null respectively. s_false if the requested boundary type is not implemented, such as ::ia2_text_boundary_sentence, or if there is nothing to return; [out] values are 0s and null respectively. s_ok. textatoffset() returns a text() portion that spans the given position. returns the substring of the specified text() type at the specified offset. if the index is valid, but no suitable word (or other text() type) is found, a null pointer is returned. [propget] hresult textatoffset( [in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); parameters offset index of...

nsIAccessibleTableCell
e please add a summary to this article. 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview boolean isselected(); attributes attribute type description columnextent long return the number of columns occupied by this cell. the result differs from 1 if the specified cell spans multiple columns. read only. columnheadercells nsiarray return an array of column header cells for this cell. read only. columnindex long return column index of this cell. read only. rowextent long return the number of rows occupied by this accessible cell. the result differs from 1 if the specified cell spans multiple rows. read only. rowheadercells nsiarray return an array of row heade...

nsIFaviconService
, in prtime aexpiration); obsolete since gecko 22.0 void setfaviconurlforpage(in nsiuri apageuri, in nsiuri afaviconuri); obsolete since gecko 22.0 attributes attribute type description defaultfavicon nsiuri the default favicon uri. read only. methods addfailedfavicon() this method adds a given favicon's uri to the failed favicon cache. the lifespan of the favicon cache is up to the caching system. this cache will also be written to if you use setandloadfaviconforpage() method and it encounters an error while fetching an icon. void addfailedfavicon( in nsiuri afaviconuri ); parameters afaviconuri the uri of an icon in the favicon service. can be null. expireallfavicons() expires all known favicons, removing them from the databas...

XPCOM ownership guidelines
if you made it, you own it. ...naturally. if you create a temporary object, obviously it's up to you to destroy it. that's a sure sign of ownership. if you create an object with a longer lifespan, you will own it until you give ownership away. all "factory" and "getter" functions produce owning pointers. such a function is the perfect example of something that creates an object with a longer lifespan that itself, and gives away ownership (by producing a pointer that is already addrefed) --- in this case, to the caller. this is terrific for factory functions, but can be problematic for mere getters. it's unfortunate if you just needed access to it for a moment. in the latter case, caching the pointer you got back makes you a de facto owner. this may not be appropriate; and it may be ...

XPCOM
sions of xpcom.xpcom guidethese articles provide tutorials and usage documentation for xpcom, including how to use it in your own projects and how to build xpcom components for your firefox add-ons and the like.xpcom ownership guidelines...naturally. if you create a temporary object, obviously it's up to you to destroy it. that's a sure sign of ownership. if you create an object with a longer lifespan, you will own it until you give ownership away.xpcom referencethis reference describes the interfaces and functions provided by the xpcom library. in addition, it details the various helper classes and functions, as well as the components, provided by the xpcom glue library. the contents herein are oriented primarily toward extension developers and people embedding xpcom in other projects.xpcom t...

Plug-in Basics - Plugins
is being deleted. when the last instance of a plug-in is deleted, the plug-in code is unloaded from memory. gecko calls the function np_shutdown. plug-ins consume no resources (other than disk space) when not loaded. note: plug-in api calls and callbacks use the main navigator thread. in general, if you want a plug-in to generate additional threads to handle processing at any stage in its lifespan, you should be careful to isolate these from plug-in api calls. see initialization and destruction for more information about using these methods. plug-in detection gecko looks for plug-ins in various places and in a particular order. the next section, how gecko finds plug-ins, describes these rules, and the following section, checking plug-ins by mime type, describes how you can use javascri...

Debugger.Memory - Firefox Developer Tools
r.memory instance, each of these properties is initially undefined. any value assigned to a debugging handler must be either a function or undefined; otherwise a typeerror is thrown. handler functions run in the same thread in which the event occurred. they run in the compartment to which they belong, not in a debuggee compartment. ongarbagecollection(statistics) a garbage collection cycle spanning one or more debuggees has just been completed. the statistics parameter is an object containing information about the gc cycle. it has the following properties: collections the collections property’s value is an array. because spidermonkey’s collector is incremental, a full collection cycle may consist of multiple discrete collection slices with the js mutator running interlea...

Tree map view - Firefox Developer Tools
n. it also includes a separate rectangle for code that can't be correlated with a file, such as jit-optimized code. other is further subdivided by the object's type. here are some example snapshots, as they appear in the tree map view: this treemap is from the dom allocation example, which simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 htmlspanelement objects). you can see how almost all the heap usage is from the htmlspanelement objects that it creates. this treemap is from the monster allocation example, which creates three arrays, each containing 5000 monsters, each monster having a randomly-generated name. you can see that most of the heap is occupied by the strings used for the monsters' names, and the objects used to contain th...

Firefox Developer Tools
ched to a web page or web app. but you can also connect them to the browser as a whole. this is useful for browser and add-on development. browser console see messages logged by the browser itself and by add-ons, and run javascript code in the browser's scope. browser toolbox attach the developer tools to the browser itself. migrating from firebug firebug has come to the end of its lifespan (see firebug lives on in firefox devtools for details of why), and we appreciate that some people will find migrating to another less familiar set of devtools to be challenging. to ease a transition from firebug to the firefox developer tools, we have written a handy guide — migrating from firebug. contribute if you want to help improve the developer tools, these resources will get you starte...

AudioParam - Web APIs
and exponentially moves towards the value given by the target parameter. the exponential decay rate is defined by the timeconstant parameter, which is a time measured in seconds. audioparam.setvaluecurveattime() schedules the values of the audioparam to follow a set of values, defined by an array of floating-point numbers scaled to fit into the given interval, starting at a given start time and spanning a given duration of time. audioparam.cancelscheduledvalues() cancels all scheduled future changes to the audioparam. audioparam.cancelandholdattime() cancels all scheduled future changes to the audioparam but holds its value at a given time until further changes are made using other methods. examples first, a basic example showing a gainnode having its gain value set. gain is an exampl...

CSSStyleDeclaration.cssText - Web APIs
the csstext property of the cssstyledeclaration interface returns or sets the text of the element's inline style declaration only. to be able to set a stylesheet rule dynamically, see using dynamic styling information. not to be confused with stylesheet style-rule cssrule.csstext. example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification. working draft ...

Basic animations - Web APIs
100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" onclick="emit(38)">&#8593;</div> <div class="right" onclick="emit(39)">&#8594;</div> <div class="left" onclick="emit(37)">&#8592;</div> <div class="down" onclick="emit(40)">&#8595;</div> </div> <div class="banner" id="selector"> <div> time :<span id="time">0</span> </div> <div>lousygames ©</div> <div> score :<span id="score">0</span> </div> <div class="touch off" onclick="touch(this)">touch</div> </div> <canvas id="main"></canvas> </body> <style> body { margin: 0; overflow: hidden; background: #000 } .banner { text-align: center; ...

ChildNode.replaceWith() - Web APIs
hrows, unscopable] void childnode.replacewith((node or domstring)... nodes); parameters nodes a set of node or domstring objects to replace. exceptions hierarchyrequesterror: node cannot be inserted at the specified point in the hierarchy. examples using replacewith() var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.replacewith(span); console.log(parent.outerhtml); // "<div><span></span></div>" childnode.replacewith() is unscopable the replacewith() method is not scoped into the with statement. see symbol.unscopables for more information. with(node) { replacewith("foo"); } // referenceerror: replacewith is not defined polyfill you can polyfill the replacewit...

CustomElementRegistry - Web APIs
rent element var wcparent = this.parentnode; function countwords(node){ var text = node.innertext || node.textcontent return text.split(/\s+/g).length; } var count = 'words: ' + countwords(wcparent); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create text node and add word count to it var text = document.createelement('span'); text.textcontent = count; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); note: the customeleme...

DOMTokenList.length - Web APIs
the length read-only property of the domtokenlist interface is an integer representing the number of objects stored in the object. syntax tokenlist.length; value an integer. examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist, then write the length of the list to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let length = classes.length; span.textcontent = `classlist length = ${length}`; the output looks like this: specifications specification status comment domthe definition of 'length' in that specification. living standard initial definition...

DOMTokenList.value - Web APIs
the value property of the domtokenlist interface is a stringifier that returns the value of the list as a domstring, or clears and sets the list to the given value. syntax tokenlist.value; value a domstring examples in the following example we retrieve the list of classes set on a <span> element as a domtokenlist using element.classlist, then write the value of the list to the <span>'s node.textcontent. first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.textcontent = classes.value; the output looks like this: specifications specification status comment domthe definition of 'value' in that specification. living standard initial definition ...

DOMTokenList - Web APIs
let para = document.queryselector("p"); let classes = para.classlist; para.classlist.add("d"); para.textcontent = `paragraph classlist is "${classes}"`; the output looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (such as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate values from the list. for example: <span class=" d d e f"></span> let span = document.queryselector("span"); let classes = span.classlist; span.classlist.add("x"); span.textcontent = `span classlist is "${classes}"`; the output looks like this: specifications specification status comment domthe definition of 'domtokenlist' in that specification. living standard initial definition ...

DisplayMediaStreamConstraints.video - Web APIs
since a video track must always be included, a value of false results in a typeerror exception being thrown. ...

Document.URL - Web APIs
the url read-only property of the document interface returns the document location as a string. syntax const url = document.url example javascript document.getelementbyid("url").textcontent = document.url; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of 'document.url' in that specification. living standard defines that the property is a usvstring instead of a domstring. ...

Document.documentURI - Web APIs
the documenturi read-only property of the document interface returns the document location as a string. syntax const uri = document.documenturi example javascript document.getelementbyid("url").textcontent = document.documenturi; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status comment domthe definition of 'documenturi' in that specification. living standard ...

Document.execCommand() - Web APIs
r for the selection or at the insertion point. requires a color value string as a value argument. usecss must be true for this to function. (not supported by internet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the enter key inserts a <br> element, or splits the current block element into two. (not supported by internet explorer.) inserthorizontalrule inserts a <hr> element at the insertion point, or replaces the selection with it. inserthtml insert...

Document.getElementsByName() - Web APIs
at all. the getelementsbyname method works differently in ie10 and below. there, getelementsbyname() also returns elements that have an id attribute with the specified value. be careful not to use the same string as both a name and an id. the getelementsbyname method works differently in ie. there, getelementsbyname() does not return all elements which may not have a name attribute (such as <span>). both ie and edge return an htmlcollection, not a nodelist specifications specification status comment html living standardthe definition of 'document.getelementsbyname()' in that specification. living standard document object model (dom) level 2 html specificationthe definition of 'document.getelementsbyname()' in that specification. obsole...

Document.readyState - Web APIs
loading. the state indicates that the load event is about to fire. examples different states of readiness switch (document.readystate) { case "loading": // the document is still loading. break; case "interactive": // the document has finished loading. we can now access the dom elements. // but sub-resources such as images, stylesheets and frames are still loading. var span = document.createelement("span"); span.textcontent = "a <span> element."; document.body.appendchild(span); break; case "complete": // the page is fully loaded. console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onre...

DocumentOrShadowRoot.nodeFromPoint() - Web APIs
ting the vertical coordinate of a point. returns a node object. examples html content <div> <p>some text</p> </div> <p>top node at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodefrompoint) { var node = document.nodefrompoint(30, 20); output.textcontent += node.localname; } else { output.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.nodefrompoint()</code>" + "</span>"; } specifications not part of any specification at present. ...

Document Object Model (DOM) - Web APIs
static type svgangle svgcolor svgicccolor svgelementinstance svgelementinstancelist svglength svglengthlist svgmatrix svgnamelist svgnumber svgnumberlist svgpaint svgpathseg ...

Element: dblclick event - Web APIs
dblclick fires after two click events (and by extension, after two pairs of mousedown and mouseup events). bubbles yes cancelable yes interface mouseevent event handler property ondblclick examples this example toggles the size of a card when you double click on it. ...

Element.innerHTML - Web APIs
use node.textcontent to get a raw copy of these text nodes' contents. to insert the html into the document rather than replace the contents of an element, use the method insertadjacenthtml(). syntax const content = element.innerhtml; element.innerhtml = htmlstring; value a domstring containing the html serialization of the element's descendants. ...

Element.scrollHeight - Web APIs
ht - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ? ...

Element.tagName - Web APIs
div> element returns "div". the tag names of elements in an xml dom tree are returned in the same case in which they're written in the original xml file. if an xml document includes a tag "<sometag>", then the tagname property's value is "sometag". for element objects, the value of tagname is the same as the value of the nodename property the element object inherits from node. example html <span id="born">when i was born...</span> javascript var span = document.getelementbyid("born"); console.log(span.tagname); in xhtml (or any other xml format), the original case will be maintained, so "span" would be output in case the original tag name was created lowercase. in html, "span" would be output instead regardless of the case used while creating the original document. specifications ...

Event.timeStamp - Web APIs
d from the beginning of the current document's lifetime till the event was created. in newer implementations, the value is a domhighrestimestamp accurate to 5 microseconds (0.005 ms). in older implementations, the value is a domtimestamp, accurate to a millisecond. example html <p> focus this iframe and press any key to get the current timestamp for the keypress event. </p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings. in firef...

Event - Web APIs
events, some of which use other interfaces based on the main event interface. event itself contains the properties and methods which are common to all events. many dom elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. event-handlers are usually connected (or "attached") to various html elements (such as <button>, <div>, <span>, etc.) using eventtarget.addeventlistener(), and this generally replaces using the old html event handler attributes. further, when properly added, such handlers can also be disconnected if needed using removeeventlistener(). note: one element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own indepen...

Using the Gamepad API - Web APIs
ndex] = gamepad; var d = document.createelement("div"); d.setattribute("id", "controller" + gamepad.index); var t = document.createelement("h1"); t.appendchild(document.createtextnode("gamepad: " + gamepad.id)); d.appendchild(t); var b = document.createelement("div"); b.classname = "buttons"; for (var i = 0; i < gamepad.buttons.length; i++) { var e = document.createelement("span"); e.classname = "button"; //e.id = "b" + i; e.innerhtml = i; b.appendchild(e); } d.appendchild(b); var a = document.createelement("div"); a.classname = "axes"; for (var i = 0; i < gamepad.axes.length; i++) { var p = document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1");...

GeolocationCoordinates.longitude - Web APIs
entposition() to request the device's current position. this is an asynchronous request, so we provide a callback which receives as in put a geolocationposition object describing the determined position. from the geolocationposition object, we obtain the user's latitude and longitude using position.coords.latitude and position.coords.longitude so we can update the displayed coordinates. the two <span> elements are updated to display the corresponding values after being converted to a value with two decimal places. html the html used to present the results looks like this: <p> your location is <span id="latitude">0.00</span>° latitude by <span id="longitude">0.00</span>° longitude. </p> <button id="get-location"> get my location </button> result take this example for a test drive ...

HTMLElement.lang - Web APIs
the default value of this attribute is unknown. ...

HTMLImageElement.height - Web APIs
wo different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px 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 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 300px. <p>image height: <span class="size">?</span>px (resize to update)</p> <img src="/files/17373/clock-demo-200px.png" alt="clock" srcset="/files/17373/clock-demo-200px.png 200w, /files/17374/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 300px"> javascript the javascript code looks at the height to determine the height of the image given the width at which it's currently drawn. ...

HTMLImageElement.width - Web APIs
two different sizes are provided for an image of a clock using the srcset attribute. one is 200px wide and the other is 400px 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 400px wide, the image is drawn at a width of 200px; otherwise, it's drawn at 400px. <p>image width: <span class="size">?</span>px (resize to update)</p> <img src="/files/16864/clock-demo-200px.png" alt="clock" srcset="/files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 200px, 400px"> 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 a...

HTMLImageElement.x - Web APIs
rited from a containing element or by being located within a column described by either <col> or <colgroup>. example the example below demonstrates the use of the htmlimageelement properties x and y. html in this example, we see a table showing information about users of a web site, including their user id, their full name, and their avatar image. ...

HTMLImageElement.y - Web APIs
rited from a containing element or by being located within a column described by either <col> or <colgroup>. example the example below demonstrates the use of the htmlimageelement properties x and y. html in this example, we see a table showing information about users of a web site, including their user id, their full name, and their avatar image. ...

The HTML DOM API - Web APIs
element htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement htmltablecaptionelement htmltablecellelement htmltablecolelement htmltableelement htmltablerowelement htmltablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element int...

Timing element visibility with the Intersection Observer API - Web APIs
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 our use of grid-column here; here we specify that we want the column to start in the first column and ends in the first column past the last grid line—in other words, the header spans across all of the columns 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: c...

KeyboardEvent.code - Web APIs
handle keyboard events in a game this example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical "wasd" keyboard layout for steer...

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: 600px) and displays the value of the resulting mediaquerylist's media property in a <span>. javascript let mql = window.matchmedia('(max-width: 600px)'); 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: 18px arial, sans-serif; font-weigh...

Microdata DOM API - Web APIs
ties.names[name])); inner.appendchild(propli); } itemli.appendchild(inner); outer.appendchild(itemli); } document.body.appendchild(outer); if faced with the following from an earlier example: <section itemscope itemtype="http://example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">hedral</h1> <p itemprop="desc">hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/color">black</span> fur with <span itemprop="http://example.com/color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="hedral, age 18 months"> </section> ...it would result in the following output: name http://example.com/fn desc http://example.com/color img (the duplicate occurrence of "http://example.com/color" is not included ...

Node.textContent - Web APIs
t or into the same element after doing so. differences from innerhtml element.innerhtml returns html, as its name indicates. sometimes people use innerhtml to retrieve or write text inside an element, but textcontent has better performance because its value is not parsed as html. moreover, using textcontent can prevent xss attacks. examples given this html fragment: <div id="diva">this is <span>some</span> text!</div> ... you can use textcontent to get the element's text content: let text = document.getelementbyid('diva').textcontent; // the text variable is now: 'this is some text!' ... or set the element's text content: document.getelementbyid('diva').textcontent = 'this text is different!'; // the html for diva is now: // <div id="diva">this text is different!</div> specificati...

NodeList.keys() - Web APIs
the nodelist.keys() method returns an iterator allowing to go through all keys contained in this object. the keys are unsigned integer. syntax nodelist.keys(); return value returns an iterator. ...

RTCDataChannel.label - Web APIs
specified when rtcpeerconnection.createdatachannel() was called to create the channel. example this sample creates a data channel on an rtcpeerconnection, then, some time later, sets the content of a ui element to display the channel's name. var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); /* ... */ document.getelementbyid("channel-name").innerhtml = "<span class='channelname'>" + dc.label + "</span>"; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.label' in that specification. candidate recommendation initial specification. ...

RTCInboundRtpStreamStats.pliCount - Web APIs
packet indicates that some amount of encoded video data has been lost for one or more frames. syntax var plicount = rtcinboundrtpstreamstats.plicount; value an integer value indicating the number of times a pli packet was sent by the rtcrtpreceiver to the sender. these are sent by the receiver's decoder to notify the encoder (the sender) that an undefined amount of coded video data, which may span frame boundaries, has been lost. this information is only available for video streams. this may trigger the sender to send a full frame in order to allow the receiver to re-synchronize, since lost data may be an irrecoverable situation for decoding media. however, the primary purpose of this message is to allow the sender to consider techniques to mitigate network performance issues. this is oft...

RTCOutboundRtpStreamStats.pliCount - Web APIs
ates that some amount of encoded video data has been lost for one or more frames. syntax var plicount = rtcoutboundrtpstreamstats.plicount; value an integer value indicating the number of times a pli packet was sent to this sender by the remote peer's rtcrtpreceiver. these are sent by the receiver's decoder to notify the sender's encoder that an undefined amount of coded video data, which may span frame boundaries, has been lost. note: this property is only used for video streams. usage notes upon receiving a pli packet, the sender may have responded by sending a full frame to the remote peer to allow it to re-synchronize with the media. however, the primary purpose of a pli packet is to allow the rtcrtpsender for which this rtcoutboundrtpstreamstats object provides statistics to cons...

RTCRemoteOutboundRtpStreamStats.localId - Web APIs
operty. similarly, the number of bytes sent during this interval—bytessent—is calculated by subtracting the starting statistics object's bytessent property from that of the ending statistics. the number of frames decoded during this interval—framesdecoded—is determined by subtracting startrecord's framesdecoded from endrecord.framesdecoded. finally, the frame rate over the elapsed time span is calculated by dividing framesdecoded by elapsedtime. the remainder of the networkteststop() function constructs the html used to display the output of the collected and computed results to the user, then append it to the element statsbox, which we're using to show the status updates to the user. the output log, given the styles used by the example, looks like this: in the screenshot, we ...

RTCRtpStreamStats.pliCount - Web APIs
ded video data has been lost for one or more frames. syntax var plicount = rtcrtpstreamstats.plicount; value an integer value indicating the number of times a pli packet was sent by the stream's receiver to the sender. a pli message is used by video decoders (running on the receiving end of the stream) to notify the encoder (the sender) that an undefined amount of coded video data, which may span frame boundaries, has been lost. this may trigger the sender to send a full frame in order to allow the receiver to re-synchronize, since lost data may be an irrecoverable situation for decoding media. however, the primary purpose of this message is to allow the sender to consider techniques to mitigate network performance issues. this is often achieved by methods such as increasing the compress...

Range.surroundContents() - Web APIs
clude newnode. an exception will be thrown, however, if the range splits a non-text node with only one of its boundary points. that is, unlike the alternative above, if there are partially selected nodes, they will not be cloned and instead the operation will fail. syntax range.surroundcontents(newparent); parameters newparent a node with which to surround the contents. example html <span class="header-text">put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification. li...

SVGTextContentElement - Web APIs
the svgtextcontentelement interface is implemented by elements that support rendering child text content. it is inherited by various text-related interfaces, such as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" ...

SVGTextPositioningElement - Web APIs
the svgtextpositioningelement interface is implemented by elements that support attributes that position individual text glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baselin...

Using the Screen Capture API - Web APIs
ction(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log. console.log = msg => logelem.innerhtml += `${msg}<br>`; console.error = msg => logelem.innerhtml += `<span class="error">${msg}</span><br>`; console.warn = msg => logelem.innerhtml += `<span class="warn">${msg}<span><br>`; console.info = msg => logelem.innerhtml += `<span class="info">${msg}</span><br>`; this allows us to use the familiar console.log(), console.error(), and so on to log information to the log box in the document. starting display capture the startcapture() method, below, starts the...

StaticRange.StaticRange() - Web APIs
it includes properties identifying the standard and end positions of the range as well as a boolean indicating whether or not the range is collapsed (that is, empty). syntax var staticrange = new staticrange(rangespec) parameters rangespec the required rangespec parameter is an object adhering to the staticrangeinit dictionary. the four required rangespec properties are: startcontainer the node in which the starting point of the range is located. startoffset the offset into the starting node at which the first character of the range is found. ...

StaticRange - Web APIs
only returns an integer value indicating the offset into the node specified by startcontainer at which the first character of the range is located. methods staticrange.torange() returns a new range object which describes the same range as the source staticrange, but is "live" with values that change to reflect changes in the contents of the dom tree. usage notes a dom range specifies a span of content in a document, potentially beginning inside one node (or element) and ending inside another one. unlike a range, a staticrange represents a range which is fixed in time; it does not change to try to keep the same content within it as the document changes. if any changes are made to the dom, the actual data contained within the range specified by a staticrange may change. this lets the ...

VTTCue() - Web APIs
the media's playback, starttime will be 50.0. endtime this is a double representing the ending time for this text track cue. this is the time at which the cue should stop being presented to the user, given in seconds and fractions thereof. given the example cue mentioned under starttime, the value of endtime would be 65.5. text a domstring providing the text that will be shown during the time span indicated by starttime and endtime. return value a new vttcue object representing a cue which will be presented during the time span given. example // create a cue that is shown from 2 to 3 seconds and uses the given text. var cue = new vttcue(2, 3, 'cool text to be displayed'); specifications specification status comment webvtt: the web video text tracks formatthe ...

WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
ents indicating which astc profiles are supported by the implementation. currently, this can be: "ldr": low dynamic range. "hdr": high dynamic range. dynamic range refers to ratio between the brightest and darkest parts of the scene. low dynamic ranges are for example jpeg format images which won't exceed 255:1, or crt monitors which won't exceed 100:1. an hdr image stores pixel values that span the whole tonal range of real-world scenes (100,000:1). examples var ext = gl.getextension('webgl_compressed_texture_astc'); ext.getsupportedprofiles(); // ["ldr"] specifications specification status comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification. recommendation initial definition. ...

Web Video Text Tracks Format (WebVTT) - Web APIs
t is also recommended that you use the greater-than escape sequence (&gt;) instead of the greater-than character (>) to avoid confusion with tags. a comment consists of three parts: the string note. a space or a newline. zero or more characters other than those noted above. example 4 - common webvtt example note this is a comment example 5 - multi-line comment note one comment that is spanning more than one line. note you can also make a comment across more than one line this way. example 6 - common comment usage webvtt - translation of that film i like note this translation was done by kyle so that some friends can watch it with their parents. 1 00:02:15.000 --> 00:02:20.000 - ta en kopp varmt te. - det är inte varmt. 2 00:02:20.000 --> 00:02:25.000 - har en kopp te. - det...

Rendering and the WebXR frame animation callback - Web APIs
ame number, you can ensure your rendered frames match what's expected instead of falling behind. when a frame is dropped, the contents of the affected display area simply don't change for that pass through the frame loop. for that reason, the occasional dropped frame isn't usually particularly noticeable, but if it starts to happen a lot—especially if several frames are dropped in a very short span of time—it can become jarring or even leave your display unusable. fortunately, you can easily compute how much time you're allowed to use between frames as 1/refreshrate seconds. that is, by dividing 1 by the display's refresh rate. the resulting value is the amount of time available for each frame to be rendered in order to not drop the frame. for example, a 60 hz display has 1/60th of a sec...

WebXR Device API - Web APIs
essed in relation to a particular xrspace at the time at which a particular xframe takes place. the space's coordinate system has its origin at the a given physical position. xrreferencespace a subclass of xrspace which is used to identify a spatial relationship in relation to the user's physical environment. the xrreferencespace coordinate system is expected to remain unchanged through the lifespan of the xrsession.the world has no boundaries and extends infinitely in every direction. xrboundedreferencespace xrboundedreferencespace extends the xrreferencespace coordinate system to further include support for a finite world with set boundaries. unlike xrreferencespace, the origin must be located on the floor (that is, y = 0 at the floor). the x and z components of the origin are typically ...

Background audio processing using AudioWorklet - Web APIs
rresponding sample in the output buffer, with a simple code fragment in place to prevent the samples from exceeding the legal range of -1.0 to 1.0 by capping the values; there are other ways to avoid clipping that are perhaps less prone to distortion, but this is a simple example that's better than nothing. lifetime of an audio worklet processor the only means by which you can influence the lifespan of your audio worklet processor is through the value returned by process(), which should be a boolean value indicating whether or not to override the user agent's decision-making as to whether or not your node is still in use. in general, the lifetime policy of any audio node is simple: if the node is still considered to be actively processing audio, it will continue to be used. in the case of a...

Using the Web Audio API - Web APIs
our scripts are playing audio in response to a user input event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking. so, let's start by taking a look at our play and pause functionality. we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/input node to the destination. we've already created an input node by passing our audio element into the api. for the most part, you don't need to create an output node, you can just connect your other nodes to baseaudiocontext.destination, which handles the situation for you: tra...

Using the Web Speech API - Web APIs
service will start. this is achieved by calling speechrecognition.start(). the foreach() method is used to output colored indicators showing what colors to try saying. var diagnostic = document.queryselector('.output'); var bg = document.queryselector('html'); var hints = document.queryselector('.hints'); var colorhtml= ''; colors.foreach(function(v, i, a){ console.log(v, i); colorhtml += '<span style="background-color:' + v + ';"> ' + v + ' </span>'; }); hints.innerhtml = 'tap/click then say a color to change the background color of the app. try ' + colorhtml + '.'; document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } receiving and handling results once the speech recognition is started, there are many event handlers that c...

ARIA live regions - Accessibility
cause the whole text to be read again, whether or not you set aria-atomic="true", so the above clock example does not work as expected. a working example of a simple year control for better understanding: <div id="date-input"> <label>year: <input type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-output" aria-live="polite"> the set year is: <span id="year-output">1990</span> </div> function change(event) { var yearout = document.getelementbyid("year-output"); switch (event.target.id) { case "year": yearout.innerhtml = event.target.value; break; default: return; } }; without aria-atomic="true" the screenreader announces only the changed value of year. with aria-atomic="true", the screenreader announces...

Using ARIA: Roles, states, and properties - Accessibility
e aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby aria-details aria-errormessage aria-flowto aria-labelledby aria-owns aria-posinset aria-rowcount aria-rowindex aria-rowspan aria-setsize microsoftedge-specific properties x-ms-aria-flowfrom ...

ARIA: heading role - Accessibility
s it can be referenced from anchor links, making it accessible via the keyboard. required javascript features required event handlers none. changing attribute values usually not required, unless dynamically inserting content. in that case, the newly-added headings need aria-level attributes whose values are consistent with the rest of the document structure. instead of using a <div> or <span> with a heading role and aria-level, consider using a native <h1> through <h6> element instead to indicate that this text is a heading, and what part of the structure it represents. examples the following shows a typical page structure. <div id="container"> <div role="heading" aria-level="1">the main page heading</div> <p>this article is about showing a page structure.</p> <div role="heading"...

Basic form hints - Accessibility
wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. the example below shows a radio button group implemented using an unordered list. note that on line 3, the <ul> element sets the aria-labelledby attribute to rg1_label, the id of the <h3> element on line 1, which is the label fo...

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
also provide a label for construct to also support older browsers that do not have aria support yet. with firefox 3, your blind users will automatically get better accessibility from the new attribute, but the users of older browsers are not left in the dark this way. example: shut down computer after minutes <input aria-labelledby="labelshutdown shutdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document gets. with jaws 8, i have not found a way to mak...

Cognitive accessibility - Accessibility
added content to links for screen readers, and that content is verbose and potentially confusing to sighted readers, consider clipping the added text to visually hide it from those not using assistive technologies. current location is available users should be able to orient themselves within a site or application. this is especially important and helpful for people with short attention spans who may become confused when following a long series of navigation steps. all users benefit from information about where they are in a site's hierarchy, especially for sites or applications with large amounts of content or many subsections. breadcrumbs, site maps, and identifying the current page in the navigation as "current" are all techniques that help communicate the current location. read...

Accessibility documentation index - Accessibility
sible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically. 93 keyboard-navigable javascript widgets accessibility, dom, needsupdate web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the keyboard. 94 mobile accessibility checklist accessibility, firefox os, guidelines, mobile, checklist this document provides a concise checklist of accessibility requirements for mobile app...

Accessibility Information for Web Authors - Accessibility
erences involved in your stylesheets. the future: accessible dhtml dhtml accessibility roadmap: a peek into how dhtml will be made accessible in the future. this document gives a plan which is being developed by ibm, mozilla and wai protocols and formats working group (pfwg) to address the issue of accessible dhtml. dynamic web content is not accessible, because it uses vanilla <div>'s and <span>'s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views. these widgets are usually not even keyboard focusable. furthermore, assistive technologies do not understand what these widgets are supposed to be, or what state they are in or what they are capable of. this document tackles such difficulties and shows several inter...

Understandable - Accessibility
g it a value equal to the language code that best represents the language the page is written in. see setting the primary language of the document. 3.1.2 language of parts (aa) in cases where the content of a page includes words or phrases that are in a different language to the primary language, use the lang attribute on an element wrapped around the term in question (e.g. a <span> if no semantic element is available) to set an appropriate language for it. you don't need to set a different language for words or phrases that are the same regardless of language (for example proper names, technical terms that aren't part of a specific language). 3.1.3 unusual words (aaa) where technical terms, jargon, or idioms/slang are used, definitions should be pr...

Accessibility
tent accessibility guidelines this set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the w3c web content accessibility guidelines 2.0 (wcag 2.0 or just wcag, for the purposes of this writing). keyboard-navigable javascript widgets until now, web developers who want to make their styled <div> and <span> based widgets accessible have lacked the proper techniques. keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of. aria a collection of articles to learn how to use aria to make your html documents more accessible. assistive technology (at) development a collection of articles intended for at developers mobile accessibility checklist ...

-webkit-mask-box-image - CSS: Cascading Style Sheets
gradient function to be used as a mask image. none used to specify that a border box is to have no mask image. <length> the size of the mask image's offset. see <length> for possible units. <percentage> the mask image's offset has a percentage value relative to the border box's corresponding dimension (width or height). repeat the mask image is repeated as many times as is necessary to span the border box. may include a partial image if the mask image does not divide evenly into the border box. stretch the mask image is stretched to contain the border box exactly. round the mask image is stretched somewhat and repeated such that there is no partial mask image at the end of the border box. space the mask image is repeated as many times as possible without stretching. there is n...

:-moz-first-node - CSS: Cascading Style Sheets
e :-moz-first-node css pseudo-class is a mozilla extension that represents any element that is the first child node of some other element. it differs from :first-child because it does not match a first-child element with (non-whitespace) text before it. note: any whitespace at the start of an element is ignored for the determination of :-moz-first-node. syntax :-moz-first-node examples css span:-moz-first-node { background-color: lime; } html <p> <span>this matches!</span> <span>this doesn't match.</span> </p> <p> blahblah. <span>this doesn't match because it's preceded by text.</span> </p> result specifications not part of any standard. ...

:-moz-last-node - CSS: Cascading Style Sheets
the :-moz-last-node css pseudo-class is a mozilla extension that represents any element that is the last child node of some other element. it differs from :last-child because it does not match a last-child element with (non-whitespace) text after it. note: any whitespace at the end of an element is ignored for the determination of :-moz-last-node. syntax :-moz-last-node examples css span:-moz-last-node { background-color: lime; } html <p> <span>this does not match.</span> <span>this matches!</span> </p> <p> <span>this doesn't match because it's followed by text.</span> blahblah. </p> result specifications not part of any standard. ...

::before (:before) - CSS: Cascading Style Sheets
efore pseudo-elements is to provide quotation marks. here we use both ::before and ::after to insert quotation characters. html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; } result decorative example we can style text or images in the content property almost any way we want. html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements. this method can often be used to add small touches to the ui and ...

::placeholder - CSS: Cascading Style Sheets
able even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary. <label for="user-email">your email address</label> <span id="user-email-hint" class="input-hint">example: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> placeholders in form fields are harmful — nielsen norman group windows high contrast mode placeholder text will appear with the same styling as user-entered text content when rendered in windows high contrast mode. this will make it ...

:dir() - CSS: Cascading Style Sheets
herited. note: in html, the direction is determined by the dir attribute. other document types may have different methods. syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to target. parameters ltr target left-to-right elements. rtl target right-to-left elements. formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification. living standard no changes. selector...

:not() - CSS: Cascading Style Sheets
he 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: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* elements that are not <p> elements */ body :not(p) { text-decoration: underline; } /* elements that are not <div> and not <span> elements */ body :not(div):not(span) { font-weight: bold; } /* elements that are not `.crazy` or `.fancy` */ /* note that this syntax is not well supported yet. */ body :not(.crazy, .fancy) { font-family: sans-serif; } result specifications specification status comment selectors level 4the definition of ':not()' in that specification. working draft ext...

unicode-range - CSS: Cascading Style Sheets
style with a different font. to make it obvious, we will use a sans-serif font, helvetica, for the text, and a serif font, times new roman, for the ampersand. in the css we are in effect defining a completely separate @font-face that only includes a single character in it, meaning that only this character will be styled with this font. we could also have done this by wrapping the ampersand in a <span> and applying a different font just to that, but that is an extra element and rule set. html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status comment css fonts modu...

Basic Concepts of Multicol - CSS: Cascading Style Sheets
css in that it fragments the content, including all descendent elements, into columns. this happens in the same way that content is fragmented into pages when we work with css paged media, for example by creating a print stylesheet. the properties defined by the specification are: column-width column-count columns column-rule-color column-rule-style column-rule-width column-rule column-span column-fill column-gap by adding column-count or column-width to an element, that element becomes a multi-column container, or multicol container for short. the columns are anonymous boxes and described as column boxes in the specification. defining columns to create a multicol container you must use at least one of the column-* properties, these being column-count and column-width. the co...

Styling Columns - CSS: Cascading Style Sheets
the gap. in this next example we have a very wide rule of 40px and a 10px 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 40px. 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. ...

CSS Flow Layout - CSS: Cascading Style Sheets
in the writing mode of that document. in english therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. basic example the following example demonstrates block and inline level boxes. the two paragraph elements with a green border are block level, displaying one under the other. the first sentence also includes a span element with a blue background. this is inline level and therefore displays in place in the sentence. guides block and inline layout in normal flow in flow and out of flow formatting contexts explained flow layout and writing modes flow layout and overflow reference glossary entries block (css) ...

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
placement and writing modes the key thing to remember when placing items by line number, is that line 1 is the start line, no matter which writing mode you are in. line -1 is the end line, no matter which writing mode you are in. in this next example, i have a grid which is in the default ltr direction. i have positioned three items using line-based placement. item 1 starts at column line 1, spanning one track. item 2 starts at column line -1, spanning to -3. item 3 starts at column line 1, spanning to column line 3. * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; ...

Overview of CSS Shapes - CSS: Cascading Style Sheets
ve we have used images or a visible element to define the shape, meaning that you can see the shape on the page. instead, you might simply want to cause some text to flow along a non-rectangular invisible line. you can do this 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 150px. 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 ...

Comments - CSS: Cascading Style Sheets
the style sheet. by design, comments have no effect on the layout of a document. syntax comments can be placed wherever white space is allowed within a style sheet. they can be used on a single line, or traverse multiple lines. /* comment */ examples /* a one-line comment */ /* a comment which stretches over several lines */ /* the comment below is used to disable specific styling */ /* span { color: blue; font-size: 1.5em; } */ notes the /* */ comment syntax is used for both single and multiline comments. there is no other way to specify comments in external style sheets. however, when using the <style> element, you may use <!-- --> to hide css from older browsers, although this is not recommended. as with most programming languages that use the /* */ comment syntax, comments...

General sibling combinator - CSS: Cascading Style Sheets
the general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element. /* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification. working dra...

Inline formatting context - CSS: Cascading Style Sheets
led a line box. this box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. therefore a paragraph is a set of inline line boxes, stacked in the block direction. when an inline box is split, margins, borders, and padding have no visual effect where the split occurs. in the next example there is a (<span>) element wrapping a set of words wrapping onto two lines. the border on the <span> breaks at the wrapping point. margins, borders, and padding in the inline direction are respected. in the example below you can see how the margin, border, and padding on the inline <span> element are added. note: i am using the logical, flow-relative properties — padding-inline-start rather than padding-...

Privacy and the :visited selector - CSS: Cascading Style Sheets
obtained from visited links. little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page. if you use a sibling selector such as :visited + span, the adjacent element (span in this example) will be styled as if the link were unvisited. in rare scenarios, if you're using nested link elements and the element being matched is different from the link whose presence in history is being tested, the element will be rendered as if the link were unvisited, as well. limits to visited link styles you can style visited links, but there are limits...

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. ...

Type selectors - CSS: Cascading Style Sheets
the css type selector matches elements by node name. in other words, it selects all elements of the given type within a document. /* all <a> elements. */ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification. working draft no changes selectors level 3the definition of 'type selectors' in that specification. recommendation no changes css level 2 (revision 1)the definition of 'type selectors' in that specification.

Universal selectors - CSS: Cascading Style Sheets
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: 1px 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 status comment selectors level 4the definition of 'universal selector' in that specification. working draft no changes selectors level 3the definition of ...

WebKit CSS extensions - CSS: Cascading Style Sheets
-right-radius -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows ...

Actual value - CSS: Cascading Style Sheets
el width may round the thickness of the border to the nearest integer. calculating a property's actual value the user agent performs four steps to calculate a property's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value. next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block). then, layout is calculated, resulting in the used value. finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. specifications specification status comment css level 2 (revision 1)the definition of 'actual value' in that s...

border-bottom-color - CSS: Cascading Style Sheets
ues <color> the color of the bottom border. formal definition initial valuecurrentcolorapplies toall elements. it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it. note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification. candidate recommendation no significant c...

border-left-color - CSS: Cascading Style Sheets
>, <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 a simple div with a border html <div class="mybox"> <p>this is a box with a border around it. note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-color' in that specification. candidate recommendation no significant chang...

border-right-color - CSS: Cascading Style Sheets
>, <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 a simple div with a border html <div class="mybox"> <p>this is a box with a border around it. note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-color' in that specification. candidate recommendation no significant cha...

border-top-color - CSS: Cascading Style Sheets
>, <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 a simple div with a border html <div class="mybox"> <p>this is a box with a border around it. note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-color' in that specification. candidate recommendation no significant changes, thou...

box-decoration-break - CSS: Cascading Style Sheets
ples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: solid; margin-left: 10px; font: 24px 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-decoration-break: clone; ... results in: you can try the two inline examples above in your browser. here's an example of an inline element using a large border-radius value. the second "im" has a line-break between the "i" an...

<custom-ident> - CSS: Cascading Style Sheets
iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open, and disclosure-close. grid-row-start grid-row-end grid-column-start grid-column-end forbids the span value. will-change forbids the global css values (unset, initial, and inherit), as well as the values will-change, auto, scroll-position, and contents. examples valid identifiers nono79 a mix of alphanumeric characters and numbers ground-level a mix of alphanumeric characters and a dash -test a dash followed by alphanumeric characters _internal an undersc...

font-weight - CSS: Cascading Style Sheets
ent">[1,1000]> examples setting font weights html <p> alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought alice "without pictures or conversations?" </p> <div>i'm heavy<br/> <span>i'm lighter</span> </div> css /* set paragraph text to be bold. */ p { font-weight: bold; } /* set div text to two steps heavier than normal but less than a standard bold. */ div { font-weight: 600; } /* set span text to be one step lighter than its parent. */ span { font-weight: lighter; } result specifications specification status comment css fon...

grid-template-areas - CSS: Cascading Style Sheets
"a c d"; /* global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset; values none the grid container doesn’t define any named grid areas. <string>+ a row is created for every separate string listed, and a column is created for each cell in the string. multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. unless those cells form a rectangle, the declaration is invalid. formal definition initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <foo...

grid-template-columns - CSS: Cascading Style Sheets
ax-content)), except that the track size is clamped at argument if it is greater than the auto minimum. repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form. subgrid the subgrid value indicates that the grid will adopt the spanned portion of its parent grid in that axis. rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition. the subgrid value is from level 2 of the grid specification and currently only has implementation in firefox 71 and onwards. formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to correspo...

grid-template-rows - CSS: Cascading Style Sheets
, max-content)), except that the track size is clamped at argument if it is greater than the auto minimum. repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form. subgrid the subgrid value indicates that the grid will adopt the spanned portion of its parent grid in that axis. rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid’s definition. the subgrid value is from level 2 of the grid specification and currently only has implementation in firefox 71 and onwards. formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresp...

initial - CSS: Cascading Style Sheets
e of a property to an element. it can be applied to any css property. this includes the css shorthand all, with which initial can be used to restore all css properties to their initial state. on inherited properties, the initial value may be unexpected. you should consider using the inherit, unset, or revert keywords instead. examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification. candidate recommendation no changes from ...

margin-bottom - CSS: Cascading Style Sheets
nt. a positive value places it farther from its neighbors, while 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: 10px; /* 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 ...

margin-top - CSS: Cascading Style Sheets
ment. a positive value places it farther from its neighbors, while 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: 10px; /* 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 <...

margin - CSS: Cascading Style Sheets
lement. it is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. 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 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: -3px; /* vertical | horizontal */ margin: 5% auto; /* top | horizontal | bottom */ margin: 1em auto 2em; /* top | right | bottom | left */ margin: 2px 1em 0 auto; /* global values */ margin: inherit; margin: ...

page-break-inside - CSS: Cascading Style Sheets
inition initial valueautoapplies toblock-level elements in the normal flow of the root element. user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph. it has a little bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height:...

repeat() - CSS: Cascading Style Sheets
a definite minimal size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement. otherwise, the specified track list repeats only once. auto-fit behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed. an empty track is one with no in-flow grid items placed into or spanning across it. (this can result in all tracks being collapsed, if they’re all empty.) a collapsed track is treated as having a single fixed track sizing function of 0px, and the gutters on either side of it collapse. for the purpose of finding the number of auto-repeated tracks, the user agent floors the track size to a user agent specified value (e.g., 1px), to avoid division by zero. ...

text-combine-upright - CSS: Cascading Style Sheets
ed by browsers. html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value. html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status comment css writing modes level 4the definition of 'text-combine-upright' in that specification. candidate reco...

Cross-browser audio basics - Developer guides
feedback consider this snippet of html: <audio id="my-audio"> <source src="https://udn.realityripple.com/samples/6c/d385042de2.mp3" type="audio/mpeg"> <source src="https://udn.realityripple.com/samples/28/191a7bd2a5.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width: 80px; float: left; } #progress { margin-left: 80px; border: 1px solid black; } #bar { height: 20px; background-color: green; width: 0; } now...

Web Audio playbackRate explained - Developer guides
ideo> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firi...

Block formatting context - Developer guides
children of the element with display: flex or inline-flex) if they are neither flex nor grid nor table containers themselves. grid items (direct children of the element with display: grid or inline-grid) if they are neither flex nor grid nor table containers themselves. multicol containers (elements where column-count or column-width isn't auto, including elements with column-count: 1). column-span: all should always create a new formatting context, even when the column-span: all element isn't contained by a multicol container (spec change, chrome bug). formatting contexts affect layout, but typically, we create a new block formatting context for the positioning and clearing floats rather than changing the layout, because an element that establishes a new block formatting context will: ...

<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
lly important in languages with more than two numbers, such as arabic, but is also relevant in english. default styling the purpose of this element is purely for the convenience of the author and all browsers display it inline (display: inline) by default, though its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox, and some others add a dotted underline to the content of the element. a few browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the css takes care of this case. examples marking up an abbreviation semantically to mark up an abbreviation without providing an expansion or descript...

<acronym> - HTML: Hypertext Markup Language
or abbreviation for a word. usage note: this element has been removed in html5 and shouldn't be used anymore. instead web developers should use the <abbr> element. attributes this element only has global attributes, which are common to all elements. dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example <p>the <acronym title="world wide web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element. opera, firefox,...

<address>: The Contact Address element - HTML: Hypertext Markup Language
(according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent). implicit aria role no corresponding role permitted aria roles any dom interface htmlelement prior to gecko 2.0 (firefox 4), gecko implemented this element using the htmlspanelement interface attributes this element only includes the global attributes. usage notes it used to be the case that an <address> element was only supposed to be used to represent the contact information of the document's author. in the latest spec versions however, its definition has been updated so it can now be used to mark up arbitrary addresses. this element should not contain ...

<b>: The Bring Attention To element - HTML: Hypertext Markup Language
d ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes use the <b> for cases like keywords in a summary, product names in a review, or other spans of text whose typical presentation would be boldfaced (but not including any special importance). do not confuse the <b> element with the <strong>, <em>, or <mark> elements. the <strong> element represents text of certain importance, <em> puts some emphasis on the text and the <mark> element represents text of certain relevance. the <b> element doesn't convey such special semantic information; ...

<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
nt. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element's attributes include the global attributes. dir the direction in which text should be rendered in this element's contents. possible values are: ltr: indicates that the text should go in a left-to-right direction. rtl: indicates that the text should go in a right-to-left direction. examples <!-- switch text directi...

<big>: The Bigger Text element - HTML: Hypertext Markup Language
ead. using <big> this example uses the obsolete <big> element to increase the size of some text. html <p> this is the first sentence. <big>this whole sentence is in bigger letters.</big> </p> result using css font-size this example uses the css font-size property to increase the font size by one level. css .bigger { font-size: larger; } html <p> this is the first sentence. <span class="bigger">this whole sentence is in bigger letters.</span> </p> result dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. ...

<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
4 (and xhtml 1) in favor of the css text-align property, which can be applied to the <div> element or to an individual <p>. for centering blocks, use other css properties like margin-left and margin-right and set them to auto (or set margin to 0 auto). dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. example 1 <center>this text will be centered. <p>so will this paragraph.</p></center> example 2 (css alternative) <div style="text-align:center">this text will be centered. <p>so will this paragraph.</p></div> example 3 (css alternative) <p style="text-align:center">this line will be centered.<br> and so will this line.</p> note applying text-align:c...

<cite>: The Citation element - HTML: Hypertext Markup Language
nt. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. usage notes in the context of the <cite> element, a creative work that might be cited could be, for example, one of the following: a book a research paper an essay a poem a musical score a song a play or film script a film a television show a game a sculpture a painting a thea...

<code>: The Inline Code element - HTML: Hypertext Markup Language
nt. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. example a paragraph of text that includes <code>: <p>the function <code>selectall()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p> the output generated by this html looks like this: notes to represent multiple lines of code,...

<command>: The HTML Command element - HTML: Hypertext Markup Language
ategories flow content, phrasing content, metadata content. permitted content none, it is an empty element. tag omission the start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden. permitted parent elements <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a <span> as child. dom interface htmlcommandelement attributes this element includes the global attributes. checked indicates whether the command is selected. must be omitted unless the type attribute is checkbox or radio. disabled indicates that the command is not available. icon gives a picture which represents the command. label the name of the command as shown to the use...

<dt>: The Description Term element - HTML: Hypertext Markup Language
y another <dt> or a <dd> element, or if there is no more content in the parent element. permitted parents before a <dt> or a <dd> element, inside a <dl> or (in whatwg html) a <div> that is inside a <dl>. implicit aria role term permitted aria roles listitem dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. example for an example, see the example provided for the <dl> element. specifications specification status comment html living standardthe definition of '<dt>' in that specification. living standard html5the definition of '<dt>' in that specificat...

<em>: The Emphasis element - HTML: Hypertext Markup Language
nt. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement up to gecko 1.9.2 (firefox 4) inclusive, firefox implements the htmlspanelement interface for this element. attributes this element only includes the global attributes. usage notes the <em> element is for words that have a stressed emphasis compared to surrounding text, which is often limited to a word or words of a sentence and affects the meaning of the sentence itself. typically this element is displayed in italic type. however, it should not be used sim...

<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
esponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. usage notes use the <i> element for text that is set off from the normal prose for readability reasons. this would be a range of text with different semantic meaning than the surrounding text. ...

<input type="password"> - HTML: Hypertext Markup Language
n purposes in the us, are in the form "123-45-6789". assorted rules for what values are permitted in each group exist as well. html <label for="ssn">ssn:</label> <input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" required autocomplete="off"> <br> <label for="ssn">value:</label> <span id="current"></span> this uses a pattern which limits the entered value to strings representing legal socal security numbers. obviously, this regexp doesn't guarantee a valid ssn (since we don't have access to the social security administration's database), but it does ensure the number could be one; it generally avoids values that cannot be valid. in addition, it allows the three groups of digi...

<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
by convention, the user agent defaults to rendering the contents of a <kbd> element using its default monospace font, although this is not mandated by the html standard. 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. <kbd> may be nested in various combinations with the <samp> (sample output) element to represent various forms of input or output based on visual cues. ...

<label> - HTML: Hypertext Markup Language
d value, later in the document, they are not considered. note: a <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element. styling with css there are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. you can apply styling to them in any way you want, as long as you don't cause the text to become difficult to read. examples simple label example <label>click me <input type="text"></label> using the "for" attribute <label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such ...

<mark>: The Mark Text element - HTML: Hypertext Markup Language
ular importance. think of this like using a highlighter pen in a book to mark passages that you find of interest. otherwise, <mark> indicates a portion of the document's content which is likely to be relevant to the user's current activity. this might be used, for example, to indicate the words that matched a search operation. don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate css applied to it. don't confuse <mark> with the <strong> element; <mark> is used to denote content which has a degree of relevance, while <strong> indicates spans of text of importance. examples marking text of interest in this first example, a <mark> element is used to mark some text within a quote which is of particular interest to the user. <blockquote> it ...

<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
" - from the beginning through january 10, 1991 this tag had not been invented as yet, so no examples are found from this period. html "0.c" - from january 23, 1991 though november 23, 1992 this early version of html introduced <nextid> in a non-sgml compliant form that simply used the numeric value alone as an "attribute." html "0.d" - from november 26, 1992 through may 24, 1993 during this span, next and the oldest surviving dtd's show <nextid> to take only a number for a value of its newly-introduced attribute n. html "1.k" - version 1 (first release) in this first published draft of html, <nextid> is the same as it would take in html 2, finally allowing the use of a name instead of only a number for its attribute value. html "1.m" - version 1 (second release) in the next published...

<nobr>: The Non-Breaking Text element (obsolete) - HTML: Hypertext Markup Language
the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text. this element was never standard html and was not widely implemented, so you shouldn't use it. instead, use the css property white-space like this: <span style="white-space: nowrap;">long line with no breaks</span> ...

<plaintext>: The Plain Text element (Deprecated) - HTML: Hypertext Markup Language
e element content as html. a monospaced font can be applied to any html element via a css font-family style with the monospace generic value. attributes this element has no other attributes than the global attributes common to all elements. dom interface this element implements the htmlelement interface. implementation note: in gecko 1.9.2 and before, firefox implements the interface htmlspanelement for this element. ...

<s> - HTML: Hypertext Markup Language
ne, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. examples <s>today's special: salmon</s> sold out<br> <span 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 ::be...

<samp>: The Sample Output element - HTML: Hypertext Markup Language
>scan complete. found <em>n</em> results.</samp> you can then proceed to the next step.</p> the resulting output looks like this: sample output including user input you can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user. for example, consider this text presenting a transcript of a linux (or macos) console session: html <pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "hello world"</kbd> md5 ("hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> note the use of <span> to allow customization of the appearance of specific portions of the sample text such as the shell prompts and the cursor. note also the use of <kbd> to rep...

<small>: the side comment element - HTML: Hypertext Markup Language
ent that accepts flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlelement attributes this element only includes the global attributes. examples basic usage <p>this is the first sentence. <small>this whole sentence is in small letters.</small> </p> css alternative <p>this is the first sentence. <span style="font-size:0.8em">this whole sentence is in small letters.</span> </p> specifications specification status comments html living standardthe definition of '<small>' in that specification. living standard html5the definition of '<small>' in that specification. recommendation html 4.01 specificationthe definition of '<small>' i...

<spacer> - HTML: Hypertext Markup Language
s attribute can be used for defining size of spacer in pixels when type is horizontal or vertical. width this attribute can be used for defining width of spacer in pixels when type is block. height this attribute can be used for defining height of spacer in pixels when type is block. align this attribute determines alignment of spacer. possible values are left, right and center. example <span>just a text node</span> <spacer type="horizontal" size="10"></spacer> <span>just another text node</span> <spacer type="block" width="10" height="10"></spacer> specification not part of any specification. ...

<sup>: The Superscript element - HTML: Hypertext Markup Language
is not technically the same thing as superscript. however, it is common to use <sup> to present superior lettering in html. ...

<template>: The Content Template element - HTML: Hypertext Markup Language
ries metadata content, flow content, phrasing content, script-supporting element permitted content no restrictions tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts metadata content, phrasing content, or script-supporting elements. also allowed as a child of a <colgroup> element that does not have a span attribute. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmltemplateelement attributes this element only includes the global attributes. however, the htmltemplateelement has a content property, which is a read-only documentfragment containing the dom subtree which the template represents. note that direc...

<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
hould use the more semantically helpful <code>, <kbd>, <samp>, or <var> elements for inline text that needs to be presented in monospace type, or the <pre> tag for content that should be presented as a separate block. if none of the semantic elements are appropriate for your use case (for example, if you simply need to show some content in a non-proportional font), you should consider using the <span> element, styling it as desired using css. the font-family property is a good place to start. content categories flow content, phrasing content, palpable content. permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. permitted aria...

<var>: The Variable element - HTML: Hypertext Markup Language
ement only includes the global attributes. usage notes related elements other elements that are used in contexts in which <var> is commonly used include: <code>: the html code element <kbd>: the html keyboard input element <samp>: the html 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 15px "courier", "courier new", monospace; } examples basic example here's a simple example, using <var> to denote variable names in a mathematical equation...

<xmp> - HTML: Hypertext Markup Language
...

lang - HTML: Hypertext Markup Language
anese written with the katakana alphabet. if the language is written in a highly typical way, like english in the latin alphabet, there is no need to use this subtag. region subtag optional. this subtag defines a dialect of the base language from a particular location, and is either 2 letters in allcaps matching a country code, or 3 numbers matching a non-country area. for example, es-es is for spanish as spoken in spain, and es-013 is spanish as spoken in central america. “international spanish” would just be es. the script subtag precedes the region subtag if both are present — ru-cyrl-by is russian, written in the cyrillic alphabet, as spoken in belarus. to find the correct subtag codes for a language, try the language subtag lookup. even if the lang attribute is set, it may no...

translate - HTML: Hypertext Markup Language
ed by automatic translation systems such as google translate, and may also be respected by tools used by human translators. as such it's important that web authors use this attribute to mark content that should not be translated. examples in this example, the translate attribute is used to ask translation tools not to translate the company's brand name in the footer. <footer> <small>© 2020 <span translate="no">brandname</span></small> </footer> specifications specification status comment html living standardthe definition of 'translate' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'translate' in that specification. recommendation snapshot of html living standard, initial definition...

HTML: Hypertext Markup Language
re a fundamental aspect of the web. by uploading content to the internet and linking it to pages created by other people, you become an active participant in the world wide web. html uses "markup" to annotate text, images, and other content for display in a web browser. html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others. an html element is set off from other text in a document by "tags", which consist of the element name surrounded by "<" and ">". the name of an element inside a tag is case insensitive. that is, it can be written in uppercase, lowercase, or a mixture. for ...

Browser detection using the user agent - HTTP
gent sniffing. there is always the alternative of doing feature detection instead. do you want to provide different html depending on which browser is being used? this is usually a bad practice, but there are some cases in which this is necessary. in these cases, you should first analyze your situation to be sure it's really necessary. can you prevent it by adding some non-semantic <div> or <span> elements? the difficulty of successfully using user agent detection is worth a few disruptions to the purity of your html. also, rethink your design: can you use progressive enhancement or fluid layouts to help remove the need to do this? avoiding user agent detection if you want to avoid using user agent detection, you have options! feature detection feature detection is where you don't ...

HTTP Messages - HTTP
in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection. ...

Unicode property escapes - JavaScript
o use the property name for general categories story.match(/\p{letter}/gu); // this is equivalent (short alias): story.match(/\p{l}/gu); // this is also equivalent (conjunction of all the subcategories using short aliases) story.match(/\p{lu}|\p{ll}|\p{lt}|\p{lm}|\p{lo}/gu); scripts and script extensions some languages use different scripts for their writing system. for instance, english and spanish are written using the latin script while arabic and russian are written with other scripts (respectively arabic and cyrillic). the script and script_extensions unicode properties allow regular expression to match characters according to the script they are mainly used with (script) or according to the set of scripts they belong to (script_extensions). for example, a belongs to the latin scrip...

About the JavaScript reference - JavaScript
idual objects and language constructs. structure of the reference in the javascript reference you can find the following chapters: standard built-in objects this chapter documents all the javascript standard built-in objects, along with their methods and properties. statements and declarations javascript applications consist of statements with an appropriate syntax. a single statement may span multiple lines. multiple statements may occur on a single line if each statement is separated by a semicolon. this isn't a keyword, but a group of keywords. expressions and operators this chapter documents all the javascript language operators, expressions and keywords. functions chapter about javascript functions. classes chapter about javascript classes introduced in ecmascript 2015. err...

Date.prototype.getTime() - JavaScript
ever is larger. examples using gettime() for copying dates constructing a date object with the identical time value. // since month is zero based, birthday will be january 10, 1995 var birthday = new date(1994, 12, 10); var copy = new date(); copy.settime(birthday.gettime()); measuring execution time subtracting two subsequent gettime() calls on newly generated date objects, give the time span between these two calls. this can be used to calculate the executing time of some operations. see also date.now() to prevent instantiating unnecessary date objects. var end, start; start = new date(); for (var i = 0; i < 1000; i++) { math.sqrt(i); } end = new date(); console.log('operation took ' + (end.gettime() - start.gettime()) + ' msec'); specifications specification ...

Intl.Locale.prototype.collation - JavaScript
reformed reformed ordering (such as in swedish) search special collation type for string search searchjl special collation type for korean initial consonant search standard default ordering for each language stroke pinyin ordering for latin, stroke order for cjk characters (used in chinese) trad traditional style ordering (such as in spanish) unihan pinyin ordering for latin, unihan radical-stroke ordering for cjk characters (used in chinese) zhuyin pinyin ordering for latin, zhuyin order for bopomofo and cjk characters (used in chinese) examples like other locale subtags, the collation type can be added to the intl.locale object via the locale string, or a configuration object argument to ...

Lexical grammar - JavaScript
his is a one line javascript comment console.log('hello world!'); } comment(); the second way is the /* */ style, which is much more flexible. for example, you can use it on a single line: function comment() { /* this is a one line javascript comment */ console.log('hello world!'); } comment(); you can also make multiple-line comments, like this: function comment() { /* this comment spans multiple lines. notice that we don't need to end the comment until we're done. */ console.log('hello world!'); } comment(); you can also use it in the middle of a line, if you wish, although this can make your code harder to read so it should be used with caution: function comment(x) { console.log('hello ' + x /* insert the value of x */ + ' !'); } comment('world'); in addition, you ...

Statements and declarations - JavaScript
multiple statements may occur on a single line if each statement is separated by a semicolon. this isn't a keyword, but a group of keywords. statements and declarations by category for an alphabetical listing see the sidebar on the left. control flow block a block statement is used to group zero or more statements. the block is delimited by a pair of curly brackets. break terminates the current loop, switch, or label statement and transfers program control to the statement following the terminated statement. ...

<math> - MathML
to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. display this enumerated attribute specifies how the enclosed mathml markup should be rendered. it can have one of the following values: block, which means that this element will be displayed outside the current span of text, as a block that can be positioned anywhere without changing the meaning of the text; inline, which means that this element will be displayed inside the current span of text, and cannot be moved out of it without changing the meaning of that text. if not present, its default value is inline. mode deprecated in favor of the display attribute. possible values are: display (whic...

Web video codec guide - Web media technologies
ke text in the image difficult to read, as text—especially small text—is very detail-oriented content, where minor alterations can significantly impact legibility. ringing lossy compression algorithms can introduce ringing, an effect where areas outside an object are contaminated with colored pixels generated by the compression algorithm. this happens when an algorithm that uses blocks that span across a sharp boundary between an object and its background. this is particularly common at higher compression levels. note the blue and pink fringes around the edges of the star above (as well as the stepping and other significant compression artifacts). those fringes are the ringing effect. ringing is similar in some respects to mosquito noise, except that while the ringing effect is more o...

alignment-baseline - SVG: Scalable Vector Graphics
this allows alphabetic baselines in roman text to stay aligned across font size changes. it defaults to the baseline with the same name as the computed value of the alignment-baseline property. note: as a presentation attribute alignment-baseline can be used as a css property. ...

baseline-shift - SVG: Scalable Vector Graphics
element. the shifted object might be a sub- or superscript. note: as a presentation attribute baseline-shift can be used as a css property. note: this property is going to be deprecated and authors are advised to use vertical-align instead. as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 animatable yes sub the dominant-baseline is shifted to the default position for subscripts. super the dominant-baseline is shifted to the default position for superscripts. <length-percentage> a length value raises (positive value) or lowers (negative value) the dominant-baseli...

class - SVG: Scalable Vector Graphics
<feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> <font> <foreignobject> <g> <glyph> <glyphref> <image> <line> <lineargradient> <marker> <mask> <missing-glyph> <path> <pattern> <polygon> <polyline> <radialgradient> <rect> <stop> <svg> <switch> <symbol> <text> <textpath> <title> <tref> <tspan> <use> ...

color-interpolation - SVG: Scalable Vector Graphics
this option indicates that the author doesn't require that color interpolation occur in a particular color space. srgb indicates that color interpolation ...

color-rendering - SVG: Scalable Vector Graphics
entation attribute, it can be applied to any element but it only has an effect on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradie...

display - SVG: Scalable Vector Graphics
o none causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. this means that any child of an element with display="none" will never be rendered even if the child has a value for display other than none. when the display attribute is set to none, then the given element does not become part of the rendering tree. it has implications for the <tspan>, <tref>, and <altglyph> elements, event processing, for bounding box calculations and for calculation of clipping paths: if display is set to none on a <tspan>, <tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout. regarding events, if display is set to none, the element receives no events. the geometry of a graphics element with display set to none...

fill-opacity - SVG: Scalable Vector Graphics
e defining the opacity of the paint server (color, gradient, pattern, etc) applied to a shape. note: as a presentation attribute fill-opacity can be used as a css property. ...

fill-rule - SVG: Scalable Vector Graphics
the fill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape. note: as a presentation attribute, fill-rule can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity. it is therefore considered outside the shape, and not filled.

font-family - SVG: Scalable Vector Graphics
o render the text, specified as a prioritized list of font family names and/or generic family names. note: as a presentation attribute, font-family can be used as a css property. see the css font-family property for more information. ...

font-size-adjust - SVG: Scalable Vector Graphics
an element that will preserve the x-height of the first choice font in a substitute font. note: as a presentation attribute, font-size-adjust can be used as a css property. see the css font-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="10px"> this text uses the times font (10px), which is hard to read in small sizes. </text> <text y="40" font-family="verdana, sans-serif" font-size="10px"> this text uses the verdana font (10px), which ...

font-size - SVG: Scalable Vector Graphics
t from baseline to baseline when multiple lines of text are set solid in a multiline layout environment. note: as a presentation attribute, font-size can be used as a css property. see the css font-size property for more information. ...

font-stretch - SVG: Scalable Vector Graphics
ute indicates the desired amount of condensing or expansion in the glyphs used to render the text. note: as a presentation attribute, font-stretch can be used as a css property. see the css font-stretch property for more information. ...

font-style - SVG: Scalable Vector Graphics
t-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face. note: as a presentation attribute, font-style can be used as a css property. see the css font-style property for more information. ...

font-variant - SVG: Scalable Vector Graphics
ant attribute indicates whether the text is to be rendered using variations of the fontʼs glyphs. note: as a presentation attribute, font-variant can be used as a css property. see the css font-variant property for more information. ...

font-weight - SVG: Scalable Vector Graphics
or lightness of the glyphs used to render the text, relative to other fonts in the same font family. note: as a presentation attribute, font-weight can be used as a css property. see the css font-weight property for more information. ...

glyph-orientation-horizontal - SVG: Scalable Vector Graphics
s incremented according to the vertical metrics of the glyph. this attribute is applied only to text written in a horizontal writing-mode. note: as a presentation attribute, glyph-orientation-horizontal can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees. if another angle is specified, it is rounded to the closest of the permitted values. a value of 0deg indicates that all glyphs are set with the top of the glyphs oriented towards the reference orientation. a ...

glyph-orientation-vertical - SVG: Scalable Vector Graphics
is incremented according to the horizontal metrics of the glyph. this attribute is applied only to text written in a vertical writing-mode. note: as a presentation attribute, glyph-orientation-vertical can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value auto | <angle> default value auto animatable no auto fullwidth ideographic and fullwidth latin text will be set with a glyph orientation of 0 degrees. ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. text which is not fullwidth will...

kerning - SVG: Scalable Vector Graphics
ing) or instead disable auto-kerning and set the spacing 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. ...

lengthAdjust - SVG: Scalable Vector Graphics
</text> <text x="0" y="50" textlength="300" lengthadjust="spacingandglyphs"> stretched using spacing and glyphs. ...

letter-spacing - SVG: Scalable Vector Graphics
wser converts the <length> into its corresponding value in the current user coordinate system. note: as a presentation attribute, letter-spacing can be used as a css property. see the css letter-spacing property for more information. ...

onclick - SVG: Scalable Vector Graphics
n elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetransform>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment ...

opacity - SVG: Scalable Vector Graphics
ute, opacity can be used as a css property. see the css opacity property for more information. ...

paint-order - SVG: Scalable Vector Graphics
ttribute specifies the order that the fill, stroke, and markers of a given shape or text element are painted. note: as a presentation attribute, paint-order can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, and <tspan> usage notes value normal | [ fill || stroke || markers ] default value normal animatable yes normal this value indicates that the fill will be painted first, then the stroke, and finally the markers. [ fill || stroke || markers ] the order of these three keywords indicates the order in which the painting happens, from left to right. if any of the...

pointer-events - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is genera...

stroke-dasharray - SVG: Scalable Vector Graphics
defining the pattern of dashes and gaps used to paint the outline of the shape; note: as a presentation attribute, stroke-dasharray can be used as a css property. ...

stroke-dashoffset - SVG: Scalable Vector Graphics
ation attribute defining an offset on the rendering of the associated dash array. note: as a presentation attribute stroke-dashoffset can be used as a css property. ...

stroke-linecap - SVG: Scalable Vector Graphics
inecap attribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked. note: as a presentation attribute stroke-linecap can be used as a css property. ...

stroke-linejoin - SVG: Scalable Vector Graphics
attribute is a presentation attribute defining the shape to be used at the corners of paths when they are stroked. note: as a presentation attribute stroke-linejoin can be used as a css property. ...

stroke-miterlimit - SVG: Scalable Vector Graphics
roke-width used to draw a miter join. when the limit is exceeded, the join is converted from a miter to a bevel. note: as a presentation attribute stroke-miterlimit can be used as a css property. ...

stroke-opacity - SVG: Scalable Vector Graphics
f the paint server (color, gradient, pattern, etc) applied to the stroke of a shape. note: as a presentation attribute stroke-opacity can be used as a css property. ...

stroke-width - SVG: Scalable Vector Graphics
the stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. ...

stroke - SVG: Scalable Vector Graphics
or any svg paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property. ...

systemLanguage - SVG: Scalable Vector Graphics
uage defined in the user preferences. 35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47. systemlanguage is often used in conjunction with the <switch> element. if the attribute is used in other situations, then ...

text-decoration - SVG: Scalable Vector Graphics
by the value of the paint-order attribute at the point where the text decoration is declared. note: as a presentation attribute, text-decoration can be used as a css property. see the css text-decoration property for more information. ...

unicode-bidi - SVG: Scalable Vector Graphics
the unicode-bidi attribute specifies how the accumulation of the background image is managed. note: as a presentation attribute, unicode-bidi can be used as a css property. see the css unicode-bidi property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value normal | embed | isolate | bidi-override | isolate-override | plaintext default value normal animatable no for a description of the values, please refer to the css unicode-bidi property. specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that sp...

vector-effect - SVG: Scalable Vector Graphics
applied before any of the other compositing operations, i.e. filters, masks and clips. note: as a presentation attribute, vector-effect can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following ten elements: <circle>, <ellipse>, <foreignobject>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath> <tspan>, and <use> usage notes value none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position default value none animatable yes none this value specifies that no vector effect shall be applied, i.e. the default rendering behaviour is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with...

word-spacing - SVG: Scalable Vector Graphics
the browser converts the <length> into a corresponding value in the current user coordinate system. note: as a presentation attribute, word-spacing can be used as a css property. see the css word-spacing property for more information. ...

SVG In HTML Introduction - SVG: Scalable Vector Graphics
rr { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end" offset="100%"/> </li...

For Further Reading - XSLT: Extensible Stylesheet Language Transformations
ion 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto standard. articles hands-on xsl author: don r. day location: http://www-106.ibm.com/developerwork...-hands-on-xsl/ understanding xslt author: jay greenspan location: http://hotwired.lycos.com/webmonkey/...l?tw=authoring what is xslt? author: g. ken holman location: http://www.xml.com/pub/a/2000/08/holman/index.html tutorials/examples zvon xsl programmers: http://www.zvon.org/o_html/group_xsl.html jeni's xslt pages index: http://www.jenitennison.com/xslt/ xmlpitstop.com stylesheet center: http:...

Basic Example - XSLT: Extensible Stylesheet Language Transformations
/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:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </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="mybox"> <xsl:apply-templates select="//myns:body"/> </p> </body> </html> </xsl:template> <xsl:template match="myns:a...

Using the WebAssembly JavaScript API - WebAssembly
bly, memory is represented as a contiguous range of untyped bytes called linear memory that are read and written by load and store instructions inside the module. in this memory model, any load or store can access any byte in the entire linear memory, which is necessary to faithfully represent c/c++ concepts like pointers. unlike a native c/c++ program, however, where the available memory range spans the entire process, the memory accessible by a particular webassembly instance is confined to one specific — potentially very small — range contained by a webassembly memory object. this allows a single web app to use multiple independent libraries — each of which are using webassembly internally — to have separate memories that are fully isolated from each other. in addition, newer imp...