Search completed in 1.05 seconds.
Spanning and Balancing Columns - CSS: Cascading Style Sheets
in this guide we look at how to make elements
span across columns inside the multicol container and how to control how the columns are filled.
... note the
spanning and balancing functionality covered in this guide is not as well supported across browsers as the functionality covered in the previous two sections in this guide.
...
spanning the columns to cause an item to
span across columns use the property column-
span with a value of all.
...And 15 more matches
column-span - CSS: Cascading Style Sheets
the column-
span css property makes it possible for an element to
span across all columns when its value is set to all.
... /* keyword values */ column-
span: none; column-
span: all; /* global values */ column-
span: inherit; column-
span: initial; column-
span: unset; an element that
spans more than one column is called a
spanning element.
... syntax the column-
span property is specified as one of the keyword values listed below.
...And 5 more matches
HTMLSpanElement - Web APIs
the html
spanelement interface represents a <
span> element and derives from the htmlelement interface, but without implementing any additional properties or methods.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
spanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
spanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interf...
... specifications specification status comment html living standardthe definition of 'html
spanelement' in that specification.
...And 4 more matches
<span> - HTML: Hypertext Markup Language
the html <
span> element is a generic inline container for phrasing content, which does not inherently represent anything.
...<
span> is very much like a <div> element, but <div> is a block-level element whereas a <
span> is an inline element.
... implicit aria role no corresponding role permitted aria roles any dom interface html
spanelement (before html5, the interface was htmlelement) attributes this element only includes the global attributes.
...And 4 more matches
<tspan> - SVG: Scalable Vector Graphics
the svg <t
span> element defines a subtext within a <text> element or another <t
span> element.
... html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } t
span { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <t
span>not</t
span> a banana!
...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-col
span, 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-...
...And 2 more matches
SVGTSpanElement - Web APIs
the svgt
spanelement interface represents a <t
span> element.
..."#d4dde4" stroke-width="2px" /><text x="-114" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpositioningelement</text></a><polyline points="-239,89 -249,84 -249,94 -239,89" stroke="#d4dde4" fill="none"/><line x1="-249" y1="89" x2="-279" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgt
spanelement" target="_top"><rect x="-429" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-354" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgt
spanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgt
spanelement' in that specification.
... candidate recommendation no changes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgt
spanelement' in that specification.
Table Cellmap - Archive of obsolete content
further it contains info whether this entry is a row- or col
span.
...if m
span is 0 then morigcell is in effect 81 // and the data does not represent a
span.
... if m
span is 1, then mbits is in 82 // effect and the data represents a
span.
...And 20 more matches
Legacy layout methods - Learn web development
by default, its children (the <h1> and the two <div>s) will
span 100% of the width of the body.
... <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> <div class="col">6</div> <div class="col">7</div> <div class="col">8</div> <div class="col">9</div> <div class="col">10</div> <div class="col">11</div> <div class="col">12</div> </div> <div class="row"> <div class="col
span1">13</div> <div class="col
span6">14</div> <div class="col
span3">15</div> <div class="col
span2">16</div> </div> </div> the aim is to turn this into a demonstration grid of two rows on a twelve column grid — the top row demonstrating the size of the individual columns, the second row some different sized areas on the grid.
... layout containers that we want to
span more than one column need to be given special classes to adjust their width values to the required number of columns (plus gutters in between).
...And 18 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
to provide additional control over how cells fit into (or
span across) columns, both <th> and <td> support the col
span attribute, which lets you specify how many columns wide the cell should be, with the default being 1.
... similarly, you can use the row
span attribute on cells to indicate they should
span more than one table row.
...there are no groups, no cells that
span multiple rows or columns, no captions, and only the most basic styling to create lines around the components of the table for something resembling clarity.
...And 14 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
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.
... addressing each item individually we can place all four items
spanning row and column tracks.
...And 11 more matches
HTML table basics - Learn web development
overview: tables next 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.
...first the source code: <table> <tr> <td> </td> <td>knocky</td> <td>flor</td> <td>ella</td> <td>juan</td> </tr> <tr> <td>breed</td> <td>jack russell</td> <td>poodle</td> <td>streetdog</td> <td>cocker
spaniel</td> </tr> <tr> <td>age</td> <td>16</td> <td>9</td> <td>10</td> <td>5</td> </tr> <tr> <td>owner</td> <td>mother-in-law</td> <td>me</td> <td>me</td> <td>sister-in-law</td> </tr> <tr> <td>eating habits</td> <td>eats everyone's leftovers</td> <td>nibbles at food</td> <td>hearty eater</td> <td>will eat till he explodes</td> ...
...</tr> </table> now the actual rendered table: knocky flor ella juan breed jack russell poodle streetdog cocker
spaniel age 16 9 10 5 owner mother-in-law me me sister-in-law eating habits eats everyone's leftovers nibbles at food hearty eater will eat till he explodes the problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be.
...And 10 more matches
text-transform - CSS: Cascading Style Sheets
it also applies to ::first-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-transform: capitalize; } strong { float: right; } this demonstrates text capitalization.
...?¡transform!</strong> </p> <p>text-transform: capitalize <strong><
span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize?
...And 10 more matches
Positioning - Learn web development
my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we
span 100% of the width of our parent element, and we are as tall as our child content.
...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.
... overflowing inline elements <
span>wrap onto a new line if possible — like this one containing text</
span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; }
span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...And 9 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> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /> </clippath> </svg></pre> </div> <div class="row"> <div class="cell"> <
span>html</
span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <
span>svg</
span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i ...
...love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('m15,45 a30,30,0,0,1,75,45 a30,30,0,0,1,135,45 q135,90,75,130 q15,90,15,45 z') </div> <div class="row"> <div class="cell"> <
span>html</
span> <div class="container"> <p class="svg2"> i love<br><em>clipping</em> </p> </div> </div> <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">i love</text> <text x="96" y="109" class="em">clipping</text> ...
...And 9 more matches
<input type="time"> - HTML: Hypertext Markup Language
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>.
...when this happens, the contents of the <
span> are replaced with the new value of the input element.
... var starttime = document.getelementbyid("starttime"); var value
span = document.getelementbyid("value"); starttime.addeventlistener("input", function() { value
span.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.
...And 9 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 ncolumns
spanned ); [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 nrows
spanned ); [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...
...the result is greater than 1 if the specified cell
spans multiple columns.
...And 8 more matches
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 per
spandata in nslinelayout, a "
span" is a container inline frame, and a "frame" is one of its children.
...nslinelayout::beginlinereflow creates the initial per
spandata which is called the "root
span".
... nsinlineframe::reflowframes creates a new per
spandata when it calls nslinelayout::begin
span: at this time, the nslinelayout object's mcurrent
span is switched to the new
span.
...And 7 more matches
UI pseudo-classes - Learn web development
since form inputs don't directly support having generated content put on them (this is because generated content is placed relative to an element's formatting box, but form inputs work more like replaced elements and therefore don't have one), we will add an empty <
span> to hang the generated content on: <div> <label for="fname">first name: </label> <input id="fname" name="fname" type="text" required> <
span></
span> </div> the immediate problem with this was that the
span was dropping onto a new line below the input because the input and label are both set with width: 100%.
... to fix this we style the parent <div> to become a flex container, but also tell it to wrap its contents onto new lines if the content becomes too long: fieldset > div { margin-bottom: 20px; display: flex; flex-flow: row wrap; } the effect this has is that the label and input sit on separate lines because they are both width: 100%, but the <
span> has a width of 0 so can sit on the same line as the input.
...we create it using this css: input +
span { position: relative; } input:required +
span::after { font-size: 0.7rem; position: absolute; content: "required"; color: white; background-color: black; padding: 5px 10px; top: -26px; left: -70px; } we set the <
span> to position: relative simply so that we can set the generated content to position: absolute and position it relative to the <
span> rather than the <body> (the generated content acts as though it is a child node of the element it is generated on, for the purposes of positioning).
...And 6 more matches
IAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] hresult columnextent([out] long ncolumns
spanned ); [propget] hresult columnheadercells([out, size_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 nrows
spanned ); [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.
...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=...
...":after"> :after <
span class="delete" data-type="disable"></
span> </div> <div class="ui-checkbox" data-topic='before' data-label=":before"></div> <div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="c...
... data-prop="content=[""] 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
<input type="datetime-local"> - HTML: Hypertext Markup Language
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 & canada)</option> ...
... 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.
...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.
...And 6 more matches
Componentizing our Svelte app - Learn web development
add the following content into the file: <script> export let filter = 'all' </script> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <
span class="visually-hidden">show</
span> <
span>all</
span> <
span class="visually-hidden">tasks</
span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> 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 === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <
span class="visually-hidden">show</
span> <
span>completed</
span> <
span class="visually-hidden">tasks</
span> </button> </div> back in our todos.svelte component, we want to make use of our filterbutton component.
...de this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} 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" on:click={() => alert('not implemented')}> delete <
span class="visually-hidden">{todo.name}</
span> </button> </div> </div> now we need to import our todo component into todos.svelte.
...And 5 more matches
Using IndexedDB - Web APIs
transactions come from the database object, and you have to specify which object stores you want the transaction to
span.
...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.
...And 5 more matches
ARIA: cell role - Accessibility
<div role="row"> <
span role="cell">france</
span> <
span role="cell">67 million</
span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
... a cell can contain a number of property attributes clarifying the cell's position within the tabular data structure, including aria-colindex, aria-col
span, aria-rowindex, and aria-row
span.
... states and properties aria-col
span similar to the html <th> and <td> col
span attribute, it defines the number of columns
spanned by the cell.
...And 5 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
</div> <div>eight</div> <div>nine</div> <div>ten</div> <div>eleven</div> <div>twelve</div> </div> .wrapper { display: grid; grid-template-columns: 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.
...And 5 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.
... 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> 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.
...And 5 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.
... 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> 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.
...And 5 more matches
<input type="date"> - HTML: Hypertext Markup Language
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.
...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.
...And 5 more matches
<input type="month"> - HTML: Hypertext Markup Language
let's look at an example; here we've set minimum and maximum dates, and also made the field required: <form> <div> <label for="month">what month would you like to visit us (summer months only, please)?</label> <input id="month" type="month" name="month" min="2017-06" max="2017-09" required> <
span class="validity"></
span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error.
...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.
...And 5 more matches
Using templates and slots - Web Components
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.
...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"><<slot name="element-name">need name</slot>></code> <i class=...
..."desc"><slot name="description">need description</slot></i> </
span> </summary> <div class="attributes"> <h4><
span>attributes</
span></h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> that <template> element has several features: the <template> has a <style> element with a set of css styles that are scoped just to the document fragment the <template> creates.
...And 5 more matches
The box model - Learn web development
the <a> element, used for links, <
span>, <em> and <strong> are all examples of elements that will display inline by default.
... below this, we have a block-level paragraph, inside which are two <
span> elements.
...the <
span> elements in the first paragraph are inline by default and so do not force line breaks.
...And 4 more matches
Getting started with CSS - Learn web development
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.
...for example, you might want the <
span> in the paragraph to also be orange and bold.
...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.
...And 4 more matches
Video and Audio APIs - Learn web development
eo controls> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <!-- fallback content here --> </video> <div class="controls"> <button class="play" data-icon="p" aria-label="play pause toggle"></button> <button class="stop" data-icon="s" aria-label="stop"></button> <div class="timer"> <div></div> <
span aria-label="timer">00:00</
span> </div> <button class="rwd" data-icon="b" aria-label="rewind"></button> <button class="fwd" data-icon="f" aria-label="fast forward"></button> </div> </div> the whole player is wrapped in a <div> element, so it can all be styled as one unit if needed.
...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.
... last but not least, let's look at the css for the timer: .timer { line-height: 38px; font-size: 10px; font-family: monospace; text-shadow: 1px 1px 0px black; color: white; flex: 5; position: relative; } .timer div { position: absolute; background-color: rgba(255,255,255,0.2); left: 0; top: 0; width: 0; height: 38px; z-index: 2; } .timer
span { position: absolute; z-index: 3; left: 19px; } we set the outer .timer <div> to have flex: 5, so it takes up most of the width of the controls bar.
...And 4 more matches
HTMLTableCellElement - Web APIs
htmltablecellelement.col
span 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 col
span attribute.
... htmltablecellelement.row
span an unsigned long integer indicating the number of rows this cell must
span; this lets a cell occupy space across multiple rows of the table.
...And 4 more matches
ARIA: button role - Accessibility
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.
...And 4 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
when choosing the name you need to avoid words that might appear in the specification and be confusing - such as
span.
...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 4 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.
... 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 d...
...efault
span of 1.
...And 4 more matches
grid-column - CSS: Cascading Style Sheets
the grid-column css shorthand property specifies a grid item's size and location within a grid column by contributing a line, a
span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... each <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.
...And 4 more matches
grid-row - CSS: Cascading Style Sheets
the grid-row css shorthand property specifies a grid item’s size and location within the grid row by contributing a line, a
span, or nothing (automatic) to its grid placement, thereby specifying the inline-start and inline-end edge of its grid area.
... constituent properties this property is 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 gri...
...d item’s placement, indicating auto-placement, an automatic
span, or a default
span of 1.
...And 4 more matches
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
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.
...the result will be garbled: 1 - embedded-textst place if you know the directionality of embedded-text in advance, you can fix this problem by wrapping embedded-text in a <
span> with the dir attribute set to the known directionality.
... though the same visual effect can be achieved using the css rule unicode-bidi: isolate on a <
span> or another text-formatting element, html authors should not use this approach because it is not semantic and browsers are allowed to ignore css styling.
...And 4 more matches
<colgroup> - HTML: Hypertext Markup Language
permitted content if the
span attribute is present: none, it is an empty element.
...
span this attribute contains a positive integer indicating the number of consecutive columns the <colgroup> element
spans.
... the
span attribute is not permitted if there are one or more <col> elements within the <colgroup>.
...And 4 more matches
<input type="number"> - HTML: Hypertext Markup Language
<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.
... 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: 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.
...And 4 more matches
<input type="week"> - HTML: Hypertext Markup Language
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.
...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.
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <
span>director: <
span itemprop="director">james cameron</
span> (born august 16, 1954)</
span> <
span itemprop="genre">science fiction</
span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itemprop name avatar itemprop director james cameron ...
... three properties with values that are strings <div itemscope> <p>my name is <
span itemprop="name">neil</
span>.</p> <p>my band is called <
span itemprop="band">four parts water</
span>.</p> <p>i am <
span itemprop="nationality">british</
span>.</p> </div> one property, "image", whose value is a url <div itemscope> <img itemprop="image" src="google-logo.png" alt="google"> </div> when a string value can't be easily read and understood by a person (e.g., a long string o...
... a meter element <div itemscope itemtype="http://schema.org/product"> <
span itemprop="name">panasonic white 60l refrigerator</
span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <
span itemprop="reviewcount">11</
span> customer reviews) </div> </div> similarl...
...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 o
span, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { o
span = document.createelement("
span"); o
span.textcontent = stext[nletter]; oletter = { "elem": o
span, "parent": this }; aletters.push(oletter); oletter.pos = math.random() * 50; oletter.elem.style.position = "relative"; this.appendchild(o
span); } } 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 o
span, oletter, nletter = 0, nlen = stext.length; nletter < nlen; nletter++) { o
span = document.createelement("
span"); o
span.textcontent = stext[nletter]; oletter = { "elem": o
span, "parent": this.target }; this.letters.push(oletter); oletter.index = this.numletters; oletter.elem.style.position = "relative"; oletter.val = oletter.elem.textcontent; this.nu...
...mletters++; this.target.appendchild(o
span); } }, "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 / this.numletters >= 0 ?
...And 3 more matches
Multiple-column layout - Learn web development
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.
...And 3 more matches
How CSS works - Learn web development
take the following html code: <p> let's use: <
span>cascading</
span> <
span>style</
span> <
span>sheets</
span> </p> in the dom, the node corresponding to our <p> element is a parent.
... its children are a text node and the three nodes corresponding to our <
span> elements.
... the
span nodes are also parents, with text nodes as their children: p ├─ "let's use:" ├─
span | └─ "cascading" ├─
span | └─ "style" └─
span └─ "sheets" this is how a browser interprets the previous html snippet —it renders the above dom tree and then outputs it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it.
...And 3 more matches
Client-side form validation - Learn web development
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.
... 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.
...And 3 more matches
Starting our Svelte Todo list app - Learn web development
</label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <
span class="visually-hidden">show</
span> <
span>all</
span> <
span class="visually-hidden">tasks</
span> </button> <button class="btn toggle-btn" aria-pressed="false"> <
span class="visually-hidden">show</
span> <
span>active</
span> <
span class="visually-hidden">tasks</
span> </button> <button class="btn toggle-btn" aria-pressed="false"> <
span class="visuall...
...y-hidden">show</
span> <
span>completed</
span> <
span class="visually-hidden">tasks</
span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <form class="stack-small"> <div class="form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel...
... <
span class="visually-hidden">renaming create a svelte starter app</
span> </button> <button class="btn btn__primary todo-edit" type="submit"> save <
span class="visually-hidden">new name for create a svelte starter app</
span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <
span class="visually-hidden">create your first...
...And 3 more matches
Element.getClientRects() - Web APIs
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.
...And 3 more matches
Index - Web APIs
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.
... 1901 html
spanelement api, html dom, interface, reference the html
spanelement interface represents a <
span> element and derives from the htmlelement interface, but without implementing any additional properties or methods.
... 3832 svgt
spanelement api, needsexample, reference, svg, svg dom the svgt
spanelement interface represents a <t
span> element.
...And 3 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
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.
...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.
... 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.
... the <custom-ident> cannot take the
span value.
...And 3 more matches
<col> - HTML: Hypertext Markup Language
the <colgroup> must not have a
span attribute.
...
span this attribute contains a positive integer indicating the number of consecutive columns the <col> element
spans.
... if the table doesn't use a col
span attribute, use the td:nth-child(an+b) css selector.
...And 3 more matches
<input type="tel"> - HTML: Hypertext Markup Language
for example, let's use this html: <form> <div> <label for="telno">enter a telephone number (required): </label> <input id="telno" name="telno" type="tel" required> <
span class="validity"></
span> </div> <div> <button>submit</button> </div> </form> and let's include the following css to highlight valid entries with a checkmark and invalid entries with a cross: div { margin-bottom: 10px; position: relative; } input[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 can use the pattern attribute, which takes as its value a regular expression that entered values have to match.
... in this example we'll use the same css as before, but our html is changed to look like this: <form> <div> <label for="telno">enter a telephone number (in the form xxx-xxx-xxxx): </label> <input id="telno" name="telno" type="tel" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> <
span class="validity"></
span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input +
span { 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; } notice how the entered value is reported as invalid...
...And 3 more matches
How can we design for all types of users? - Learn web development
suppose we wanted a 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).
... here is the html we're using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>font size experiment</title> </head> <body> <h1>this is our main heading <
span class="subheading">this is our subheading</
span> </h1> </body> </html> a percent-based css will look like this: body { font-size:100%; } /* 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:200%; } /* twice the size of the body, thus 32 pixels */
span.subheading { font-size:50%; } /* half the size of the h1, thus 16 pixels to come back to the original size */ the same problem expressed with ems: body { font-size:1em; } /* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels */ h1 { font-size:2em...
...; } /* twice the size of the body, thus 32 pixels */
span.subheading { font-size:0.5em; } /* half the size of the h1, thus 16 pixels to come back to the original size */ as you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on.
...And 2 more matches
How to structure a web form - Learn web development
let's consider this example: <p>required fields are followed by <abbr title="required">*</abbr>.</p> <!-- so this: --> <div> <label for="username">name:</label> <input id="username" type="text" name="username"> <label for="username"><abbr title="required" aria-label="required">*</abbr></label> </div> <!-- would be better done like this: --> <div> <label for="username"> <
span>name:</
span> <input id="username" type="text" name="username"> <abbr title="required" aria-label="required">*</abbr> </label> </div> <!-- but this is probably best: --> <div> <label for="username">name: <abbr title="required" aria-label="required">*</abbr></label> <input id="username" type="text" name="username"> </div> the paragraph at the top states a rule for required element...
... <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:...
... </
span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> the second <section> of our form is the payment information.
...And 2 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} ...
... type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <
span classname="visually-hidden">{props.name}</
span> </button> <button type="button" classname="btn btn__danger" onclick={() => props.deletetask(props.id)} > delete <
span classname="visually-hidden">{props.name}</
span> </button> </div> </div> ); we've now got the two different template structures — "edit" and "view" — defined inside two separate constants.
... 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.
...And 2 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...
...on 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-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="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <
span classname="visually-hidden">sleep</
span> </button> <button type="button" classname="btn btn__danger"> delete <
span classname="visually-hidden">sle...
...And 2 more matches
Creating localizable web applications
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.
... <?php if($showwearthis) { ?> $(".try-button").personasbutton({ 'haspersonas':'<
span><?= _("wear this");?></
span><
span> </
span>', 'hasfirefox':'<
span><?= _("get personas now!");?></
span><
span> </
span>', 'nofirefox':'<
span><?= _("get personas with firefox");?></
span><
span> </
span>' }); <?php } ?> images don't put text or numbers in the images just don't do that.
...And 2 more matches
Garbage collection
every arena maintains a list of free
spans, starting at arenaheader::firstfree
spanoffets.
... the last cell in each free
span (except the last one) holds a free
span for the next free
span.
... free
span struct free
span represents a contiguous sequence of free cells [first,last] within an arena.
...And 2 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
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.
... an inline element (the <
span>, which contains a space, and the word "world!").
... inside this context, whitespace character processing can be summarized as follows: first, all spaces and tabs immediately before and after a line break are ignored so, if we take our example markup from before and apply this first rule, we get: <h1>◦◦◦hello⏎ <
span>◦world!</
span>⇥◦◦</h1> next, all tab characters are handled as space characters, so the example becomes: <h1>◦◦◦hello⏎ <
span>◦world!</
span>◦◦◦</h1> next, line breaks are converted to spaces: <h1>◦◦◦hello◦<
span>◦world!</
span>◦◦◦</h1> after that, any space immediately following another space (even across two separate inline elements) i...
...And 2 more matches
HTMLElement.offsetLeft - Web APIs
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 offsetheight will not be a bounding box for a
span with wrapped text.
... 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 2 more matches
ARIA: row role - Accessibility
<div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <
span role="columnheader" aria-sort="descending">country</
span> <
span role="columnheader"aria-sort="none">population</
span> </div> </div> <div role="rowgroup"> <div role="row"> <
span role="cell">finland</
span> <
span role="cell">5.5 million</
span> </div> <div role="row"> <
span role="cell">france</
span> <
span role="cell">67 million</...
...
span> </div> </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
... if the set of columns which is present in the dom is not contiguous, or if there are cells
spanning more than one row or column, put the aria-colindex on all of the children of each row instead of on the row itself.
...And 2 more matches
ARIA: table role - Accessibility
<div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <
span role="columnheader" aria-sort="none">aria role</
span> <
span role="columnheader" aria-sort="none">semantic element</
span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <
span role="cell">header</
span> <
span role="cell">h1</
span> </div> <div role="row" aria-rowindex="16"> <
span role="cell">header</
span> <
span role="cell">h6<...
.../
span> </div> <div role="row" aria-rowindex="18"> <
span role="cell">rowgroup</
span> <
span role="cell">thead</
span> </div> <div role="row" aria-rowindex="24"> <
span role="cell">term</
span> <
span role="cell">dt</
span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells.
...if the table includes cells that
span multiple rows or multiple columns, then aria-row
span or aria-col
span should be included as well.
...And 2 more matches
::after (:after) - CSS: Cascading Style Sheets
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.
... we can also support keyboard users with this technique, by adding a tabindex of 0 to make each
span keyboard focusable, and using a css :focus selector.
...And 2 more matches
grid-area - CSS: Cascading Style Sheets
the grid-area css shorthand property specifies a grid item’s size and location within a grid by contributing a line, a
span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
...values */ grid-area: 4 some-grid-area; grid-area: 4 some-grid-area / 2 another-grid-area; /*
span && [ <integer> || <custom-ident> ] values */ grid-area:
span 3; grid-area:
span 3 /
span some-grid-area; grid-area: 2
span / another-grid-area
span; /* global values */ grid-area: inherit; grid-area: initial; grid-area: unset; values auto is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default
span of 1.
...
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.
...And 2 more matches
Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following
span is an <
span class="highlight">inline element</
span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
... within that text is a <
span> element, which is an inline element.
... because the <
span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <
span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } rendered using the same css as before, we get: ...
...And 2 more matches
Microformats - HTML: Hypertext Markup Language
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.
...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/...
...h-event is often used with both event listings and individual event pages <div class="h-event"> <h1 class="p-name">microformats meetup</h1> <p>from <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> june 2013, 12:00</time> to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> at <
span class="p-location">some bar in sf</
span></p> <p class="p-summary">get together and discuss all things microformats-related.</p> </div> properties property description p-name event name (or title) p-summary short summary of the event dt-start datetime the event starts dt-end datetime the event ends p-location where the ev...
...And 2 more matches
x - SVG: Scalable Vector Graphics
te>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <t
span>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes t
span for <t
span>, if it contain a single value, x defines the x coordinate on where the content text position must be placed.
...!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <text> <!-- x with a single value --> <t
span y="40%" x="50%">svg</t
span> <!-- x with multiple values --> <t
span y="90%" x="25%, 50%, 75%">svg</t
span> </text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } use for <use>, x defines the x coordinate of the uper left corner of the referenced element.
...And 2 more matches
y - SVG: Scalable Vector Graphics
te>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <t
span>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes t
span for <t
span>, if it contain a single value, y defines the y coordinate on where the content text position must be placed.
...!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <!-- y with a single value --> <t
span y="40%" x="5%">svg</t
span> <!-- y with multiple values --> <t
span y="40%,60%,80%" x="55%">svg</t
span> </text </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red; stroke-width: .5px; stroke-dasharray: 2px; } use for <use>, y defines the y coordinate of the uper left corner of the referenced element.
...And 2 more matches
Forms related code snippets - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.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 = n...
... solid #666666; border-collapse: collapse; background-color: #cccccc; cursor: default; font-family: verdana; font-size: 12px; } table.zdp-calendar th { border: 1px solid #666666; font-weight: bold; background-color: #ff6666; } table.zdp-calendar td { border: 1px solid #666666; text-align: center; } table.zdp-calendar caption { background-color: #333333; padding: 2px; }
span.zdp-current-month { display: inline-block; width: auto; height: 16px; padding: 0 2px; line-height: 16px; margin: 0 auto; background-color: #999999; border-radius: 5px; }
span.zdp-increase-month,
span.zdp-increase-year,
span.zdp-decrease-month,
span.zdp-decrease-year { display: block; padding: 0 2px; height: 16px; font-weight: bold; background-color: #999999; border-ra...
...dius: 5px; cursor: pointer; }
span.zdp-decrease-month,
span.zdp-decrease-year { float: left; margin-right: 2px; }
span.zdp-increase-month,
span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly class="date-picker" name="date-to" /> </p> </form> </body> </html> note: the current implementation of const (constant statement) is not part of ecmascript 5.
... this date-picker code snippet will automatically create an html code like the following: <table id="zdp-cal-1" class="zdp-calendar" style="z-index: 1026; position: absolute; left: 294px; top: 47px;"> <caption><
span id="zdp-decr-year-1" class="zdp-decrease-year">«</
span><
span id="zdp-decr-month-1" class="zdp-decrease-month"><</
span><
span id="zdp-incr-year-1" class="zdp-increase-year">»</
span><
span id="zdp-incr-month-1" class="zdp-increase-month">></
span> <
span class="zdp-current-month">aug 1998</
span> </caption> <thead> <tr> <th>m</th> <th>t</th> <th>w</th> ...
Table Layout Strategy - Archive of obsolete content
cells can be members of col
spans.
... these col
spans have to distribute their space to the columns they include.
...+ 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 col
span #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // ...
...so we specify it (this breaks in some other browsers) <col width="0*"><col><tbody></tbody>foobar <table border width="200px"> <col width="0*"><col> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> this shrink wrapping width has usually the suffix 0proportional effective columns <tbody></tbody>foobarbazzap <table width="200px" border> <tbody> <tr><td>foo</td><td col
span="2" width="120px">bar</td></tr> <tr><td>baz</td><td>zap</td></tr> </tbody> </table> the col
span here is bogus, so the third column should not get any width.
CSS FAQ - Learn web development
.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...
... #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 ...
... #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 ...
... 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 ...
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...
...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.
...update it like this: <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" class:btn__primary={filter === 'all'} aria-pressed={filter === 'all'} on:click={()=> filter = 'all'} > <
span class="visually-hidden">show</
span> <
span>all</
span> <
span class="visually-hidden">tasks</
span> </button> <button class="btn toggle-btn" class:btn__primary={filter === 'active'} aria-pressed={filter === 'active'} on:click={()=> 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 === 'completed'} aria-pressed={filter === 'completed'} on:click={()=> filter = 'completed'} > <
span class="visually-hidden">show</
span> <
span>completed</
span> <
span class="visually-hidden">tasks</
span> </button> </div> there are a couple of things going on in this markup.
Accessibility API cross-reference
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.
...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.
... 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-col
span identifies the element (or elements) whose contents or presence are controlled by the current element.
IAccessibleTable2
if any of the cells in the selected column
span additional columns, the cells in those columns are also selected.
...if any of the cells in the selected row
span additional rows, the cells in those rows are also selected.
...if any of the cells in the selected column
span additional columns, the cells in those columns are also unselected.
...if any of the cells in the selected row
span additional rows, the cells in those rows are also unselected.
nsIAccessibleTable
the result differs from 1 if the specified cell
spans multiple columns.
... return value the number of columns the cell
spans.
...the result differs from 1 if the specified cell
spans multiple rows.
... return value the number of rows the cell
spans.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
<div onclick="dodivsand
spans()"> click here to make the page do some allocations.
... </div> <script> function makefactory(type) { return function factory(content) { var elt = document.createelement(type); elt.textcontent = content; return elt; }; } var divfactory = makefactory('div'); var
spanfactory = makefactory('
span'); function divsand
spans() { for (i = 0; i < 10; i++) { var div = divfactory('div #' + i); div.appendchild(
spanfactory('
span #' + i)); document.body.appendchild(div); } } function dodivsand
spans() { divsand
spans(); } </script> open the browser console (menu button > developer > browser console), and then evaluate the expression demotrackallocations() in the browser console.
...we will probably change this to be the line number within page.html, not the line number within the handler code.) the onclick handler calls dodivsand
spans, which calls divsand
spans, which invokes closures of factory to do all the actual allocation.
... (it is unclear why
spanfactory allocated thirteen objects, despite being called only ten times.) source metadata generated from file: js/src/doc/debugger/tutorial-alloc-log-tree.md watermark: sha256:b56f6df61c39dbe19ca1f49752aea42207c804355513f4fea8249bdeb4cb056d changeset: 251fccc1f62b ...
DOMTokenList.remove() - Web APIs
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 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.
Node.firstChild - Web APIs
<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.
... 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'.
Using the link role - Accessibility
examples this example shows how to implement a fake link using a <
span> element.
... html <h1>role="link" example</h1> <
span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a
span </
span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css
span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; }
span[role="link"]:focus { outline: 1px dotted black; } javascript const
spanelem = document.
...queryselector('
span'); //handles clicks and keydowns on the link function navigatelink(e) { if (e.type === 'click' || e.key === 'enter') { let ref = e.target != null ?
... e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } }
spanelem.addeventlistener('click', navigatelink);
spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA annotations - Accessibility
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 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>.
... of the guitar solo</mark>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> note: if for some reason you can’t use the <mark> element in your application, you could also use <
span role="mark"></
span>.
ARIA: rowgroup role - Accessibility
<div role="table" aria-label="populations" aria-describedby="country_population_desc"> <div id="country_population_desc">world populations by country</div> <div role="rowgroup"> <div role="row"> <
span role="columnheader" aria-sort="descending">country</
span> <
span role="columnheader"aria-sort="none">population</
span> </div> </div> <div role="rowgroup"> <div role="row"> <
span role="cell">finland</
span> <
span role="cell">5.5 million</
span> </div> <div role="row"> <
span role="cell">france</
span> <
span role="cell">67 million</...
...
span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html.
... examples <div role="table" aria-label="semantic elements" aria-describedby="semantic_elements_table_desc" aria-rowcount="81"> <div id="semantic_elements_table_desc">semantic elements to use instead of aria's roles</div> <div role="rowgroup"> <div role="row"> <
span role="columnheader" aria-sort="none">aria role</
span> <
span role="columnheader" aria-sort="none">semantic element</
span> </div> </div> <div role="rowgroup"> <div role="row" aria-rowindex="11"> <
span role="cell">header</
span> <
span role="cell">h1</
span> </div> <div role="row" aria-rowindex="16"> <
span role="cell">header</
span> <
span role="ce...
...ll">h6</
span> </div> <div role="row" aria-rowindex="18"> <
span role="cell">rowgroup</
span> <
span role="cell">thead</
span> </div> <div role="row" aria-rowindex="24"> <
span role="cell">term</
span> <
span role="cell">dt</
span> </div> </div> </div> the above is a non-semantic aria table with a table header and table body, with five of 81 rows present in the dom: one within a table header and four rows within the table body.
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"> ...
... <
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"> <
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 { width: 74.54%; } .
span_8 { width: 66.08%; } .
span_7 { width: 57.62%; } .
span_6 { width: 49.16%; } .
span_5 { width: 40.7%; } .
span_4 { width: 32.24%; } .
span_3 { width: 23.78%; } .
span_2 { width: 15.32%; } .
span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: blo...
...this.min : value; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info = document.createelement('
span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); this.input = input; sliders[topic] = this; setvalue(topic, value); }; inputslider.prototype.setinputvalue = function setinputvalue() { this.input.value = this.value.tofixed(this.precisio...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; }
span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 { opacity: 0.9; width: 200px; height: 60px; position: relative; border: 2px outset #990000; background-co...
...lor: #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 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> </div> <div class="lev2"> <br /><
span class="bold">level #2</
span> <br />z-index: 1; </div> </div> </div> <div class="lev1"> <
span class="bold">level #1</
span> </div> <div class="lev1"> <
span class="bold">level #1</
span> </div> <div class="lev1"> <spa...
...n class="bold">level #1</
span> </div> </body></html> ...
writing-mode - CSS: Cascading Style Sheets
<table> <tr> <th>value</th> <th>vertical script</th> <th>horizontal (ltr) script</th> <th>horizontal (rtl) script</th> <th>mixed script</th> </tr> <tr> <td>horizontal-tb</td> <td class="example text1"><
span>我家没有电脑。</
span></td> <td class="example text1"><
span>example text</
span></td> <td class="example text1"><
span>מלל ארוך לדוגמא</
span></td> <td class="example text1"><
span>1994年に至っては</
span></td> </tr> <tr> <td>vertical-lr</td> <td class="example text2"><
span>我家没有电脑。</
span></td> <td class="example text2"><
span>example te...
...xt</
span></td> <td class="example text2"><
span>מלל ארוך לדוגמא</
span></td> <td class="example text2"><
span>1994年に至っては</
span></td> </tr> <tr> <td>vertical-rl</td> <td class="example text3"><
span>我家没有电脑。</
span></td> <td class="example text3"><
span>example text</
span></td> <td class="example text3"><
span>מלל ארוך לדוגמא</
span></td> <td class="example text3"><
span>1994年に至っては</
span></td> </tr> <tr> <td>sideways-lr</td> <td class="example text4"><
span>我家没有电脑。</
span></td> <td class="example text4"><
span>example text</
span></td> <td class="example text4"><
span>מלל ארוך לדוגמא</
span></td> <td class="example text4"><
span>1994年に至っては</
span></td> <...
.../tr> <tr> <td>sideways-rl</td> <td class="example text5"><
span>我家没有电脑。</
span></td> <td class="example text5"><
span>example text</
span></td> <td class="example text5"><
span>מלל ארוך לדוגמא</
span></td> <td class="example text5"><
span>1994年に至っては</
span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1
span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example...
....text2
span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.text3
span, .example.text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4
span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5
span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing...
Creating a cross-browser video player - Developer guides
<ul id="video-controls" class="controls"> <li><button id="playpause" type="button">play/pause</button></li> <li><button id="stop" type="button">stop</button></li> <li class="progress"> <progress id="progress" value="0" min="0"> <
span id="progress-bar"></
span> </progress> </li> <li><button id="mute" type="button">mute/unmute</button></li> <li><button id="volinc" type="button">vol+</button></li> <li><button id="voldec" type="button">vol-</button></li> <li><button id="fs" type="button">fullscreen</button></li> </ul> each button is given an id so it can be easily accessed with javascript.
... the
span within the <progress> element is for browsers that do not support the progress element and will be updated at the same time as progress (this
span element won't be visible on browsers that support progress).
...the <
span> element mentioned earlier, for browsers that do not support the <progress> element (e.g.
...this
span has a solid css background colour, which helps it provide the same visual feedback as a <progress> element.
<input type="search"> - HTML: Hypertext Markup Language
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.
... 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 sho...
... <form> <div> <label for="mysearch">search for user</label> <input type="search" id="mysearch" name="q" placeholder="user ids are 4–8 characters in length" required size="30" minlength="4" maxlength="8"> <button>search</button> <
span class="validity"></
span> </div> </form> input { margin-right: 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: if you try to submit the form with less than 4 characters, you'll be given an appropriate error mess...
...the following example covers it: <form> <div> <label for="mysearch">search for product by id:</label> <input type="search" id="mysearch" name="q" placeholder="two letters followed by four numbers" required size="30" pattern="[a-z]{2}[0-9]{4}"> <button>search</button> <
span class="validity"></
span> </div> </form> input { margin-right: 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: examples you can see a good example of a search form used in context at our website-aria-roles exam...
<input type="text"> - HTML: Hypertext Markup Language
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.
... making input required you can use the required attribute as an easy way of making entering a value required before form submission is allowed: <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required> <
span class="validity"></
span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 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; } this renders like so: if you try to submit the form with no...
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="10" placeholder="username" minlength="4" maxlength="8"> <
span class="validity"></
span> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 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; } this renders like so: if you try to submit the form ...
... <form> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}"> <
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+spa...
<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> ...
... <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; border: 1px solid black; } accessibility concerns captions by supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
...this is typically indicated by the presence of the col
span and row
span 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 col
span and row
span attributes.
itemscope - HTML: Hypertext Markup Language
<div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <
span>director: <
span itemprop="director">james cameron</
span> (born august 16, 1954)</
span> <
span itemprop="genre">science fiction</
span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
... <div itemscope itemtype="http://schema.org/recipe"> <h2 itemprop="name">grandma's holiday apple pie</h2> <img itemprop="image" src="https://udn.realityripple.com/samples/60/d063c361c1.jpg" width="50" height="50" /> <p> by <
span itemprop="author" itemscope itemtype="http://schema.org/person"> <
span itemprop="name">carol smith</
span> </
span> </p> <p> published: <time datetime="2009-11-05" itemprop="datepublished">november 5, 2009</time> </p> <
span itemprop="description">this is my grandmother's apple pie recipe.
... i like to add a dash of nutmeg.</
span> <br> <
span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <
span itemprop="ratingvalue">4.0</
span> stars based on <
span itemprop="reviewcount">35</
span> reviews </
span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <
span itemprop="recipeyield">1 9" pie (8 servings)</
span><br> <
span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritioninformation"> serving size: <
span itemprop="servingsize">1 medium slice</
span><br> calories per serving: <
span itemprop="calories">250 cal</
span><br> fa...
...t per serving: <
span itemprop="fatcontent">12 g</
span><br> </
span> <p> ingredients:<br> <
span itemprop="recipeingredient">thinly-sliced apples: 6 cups<br></
span> <
span itemprop="recipeingredient">white sugar: 3/4 cup<br></
span> ...
itemtype - HTML: Hypertext Markup Language
simple example html <div itemscope itemtype="http://schema.org/product"> <
span itemprop="brand">acme</
span> <
span itemprop="name">executive anvil</
span> </div> structured data itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <
span itemprop="brand">acme<br></
span> <
span itempro...
...p="name">executive anvil<br></
span> <img itemprop="image" src="https://udn.realityripple.com/samples/61/fa8ee62aba.png" width="50" height="50" alt="executive anvil logo" /><br> <
span itemprop="description">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
... <br> </
span> product #: <
span itemprop="mpn">925872<br></
span> <
span itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <
span itemprop="ratingvalue">4.4</
span> stars, based on <
span itemprop="reviewcount">89 </
span> reviews </
span><p> <
span itemprop="offers" itemscope itemtype="http://schema.org/offer"> regular price: $179.99<br> <meta itemprop="pricecurrency" content="usd" /> <
span itemprop="price">sale price: $119.99<br></
span> (sale ends <time itemprop="pricevaliduntil" datetime="2020-11-05"> 5 november!</time>)<br> available from: <
span itemprop="seller" itemscope itemtype="http://schema.org/organization"> <
span itemprop="name">executive objects<br></
span> </
span...
...</
span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
dx - SVG: Scalable Vector Graphics
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as o...
... value list of <length> default value none animatable yes t
span for <t
span>, if it contains a single value, dx defines a shift along the x-axis for all alternate glyph.
... candidate recommendation definition for <text> and <t
span> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification.
... recommendation initial definition for <tref> and <t
span> ...
dy - SVG: Scalable Vector Graphics
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as...
... value list of <length> default value none animatable yes t
span for <t
span>, if it contains a single value, dy defines a shift along the y-axis for all alternate glyph.
... candidate recommendation definition for <text> and <t
span> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification.
... recommendation initial definition for <tref> and <t
span> ...
textLength - SVG: Scalable Vector Graphics
the textlength attribute, available on svg <text> and <t
span> elements, lets you specify the width of the space into which the text will draw.
... four elements are using this attribute: <text>, <textpath>, <tref>, and <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies ...
... 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.
<altGlyph> - SVG: Scalable Vector Graphics
value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <t
span>; 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 <t
span>; 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 <t
span>; 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 <t
span>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element.
SVG documentation index - SVG: Scalable Vector Graphics
58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <t
span> element.
... 221 textlength attribute, css, html, javascrip, svg attribute, text, height, length, size, width the textlength attribute, available on svg <text> and <t
span> elements, lets you specify the width of the space into which the text will draw.
...the writing-mode attribute applies only to <text> elements; the attribute is ignored for <t
span>, <tref>, <altglyph> and <textpath> sub-elements.
... 375 <t
span> element, reference, svg, svg text content the svg <t
span> element defines a subtext within a <text> element or another <t
span> element.
Texts - SVG: Scalable Vector Graphics
other text-related elements t
span this element is used to mark up sub-portions of a larger text.
... it must be a child of a text element or another t
span element.
... <text> this is <t
span font-weight="bold" fill="red">bold and red</t
span> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <t
span font-weight="bold" fill="red">bold and red</t
span> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the t
span element has the following custom attributes: x set a new absolute x coordinate for the containing text.
...the attribute may also contain a list of numbers, that are one by one applied to the single characters of the t
span element.
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></...
...
span> </td> </tr> <tr> <th style="text-align: right;">quantity:</th> <td> <input type="text" name="myinput" onkeypress="return numbersonly(this, event);" onpaste="return false;" /> </td> </tr> </table> <p> <input type="submit" value="purchase!" /> </p> </form> </div> other examples example #1: how to use jxon to create an html document instead of an xml document: /* the structure of my document */ var omyhtmlstruct = { "html": { "head": { "meta": { "@http-equiv": "content-type", "@content": "text/html; charset=utf-8" }, "title": "my html document", "script": { "@type": "text/javascript", "keyvalue": "alert(\"welcome!\");" }, "style": "p:fi...
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td col
span="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> <...
... <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" col
span="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" col
span="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...
...or="#ffffff"> <td col
span="6"> <p>©copyright 2050 by nobody.
HTML: A good basis for accessibility - Learn web development
try our example table-layout.html example, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td col
span="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> <...
... <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" col
span="4" bgcolor="#ffffff"> <!-- main content goes here --> </td> <td id="aside" col
span="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...
...or="#ffffff"> <td col
span="6"> <p>©copyright 2050 by nobody.
Type, class, and ID selectors - Learn web development
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.
...in this next example we will highlight a <
span> with a class of highlight differently to an <h1> heading with a class of highlight.
Normal Flow - Learn web development
my 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.
...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.
... overflowing inline elements will <
span>wrap onto a new line if possible (like this one containing text)</
span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; }
span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to change this default display to create the layout needed by your design.
Example 1 - Learn web development
basic state html <div class="select"> <
span class="value">cherry</
span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .select.active, .select:focus { box-shadow: 0 0 3px 1px #227755; outline: none; } .select .optlist { position: absolute; top : 100%; left : 0; } .select .optlist.hidden { max-height: 0; visibility: hidden; } /* ------------ */ /* fancy styles */ /* -------...
...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...
How to build custom form controls - Learn web development
--> <div class="select" tabindex="0"> <!-- this container will be used to display the current value of the control --> <
span class="value">cherry</
span> <!-- this container will contain all the options available for our control.
... <body class="no-widget"> <form> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <
span class="value">cherry</
span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </form> </body> second, we need two new classes to let us hide the unneeded element: we visually hide the "real" ...
... to support the listbox role, we just have to update our html like this: <!-- we add the role="listbox" attribute to our top element --> <div class="select" role="listbox"> <
span class="value">cherry</
span> <!-- we also add the role="presentation" to the ul element --> <ul class="optlist" role="presentation"> <!-- and we add the role="option" attribute to all the li elements --> <li role="option" class="option">cherry</li> <li role="option" class="option">lemon</li> <li role="option" class="option">banana</li> <li role="option" class="option">straw...
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:...
... </
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</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="requi...
... 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...
Document and website structure - Learn web development
for cases like these, html provides the <div> and <
span> elements.
... <
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.
HTML text fundamentals - Learn web development
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.
...to do that, you'd use a <
span> element and some css, or perhaps an <i> element (see below).
...to do that, you'd use a <
span> element and some css, or perhaps a <b> element (see below).
Manipulating documents - Learn web development
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'.
Componentizing our React app - Learn web development
at it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <
span classname="visually-hidden">eat</
span> </button> <button type="button" classname="btn btn__danger"> delete <
span classname="visually-hidden">eat</
span> </button> </div> </li> ); } note: components must always return something.
...ke this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <
span classname="visually-hidden">{props.name}</
span> </button> <button type="button" classname="btn btn__danger"> delete <
span classname="visually-hidden">{props.name}</
span> </button> </div> </li> ); } now your browser should show three unique tasks.
... the file should read like this: import react from "react"; function filterbutton(props) { return ( <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> ); } export default filterbutton; note: you might notice that we are making the same mistake here as we first made for the <todo /> component, in that each button will be the same.
Getting from Content to Layout
to give a trivial example of when this might be necessary, consider: "<
span>foo <div></div> bar</
span>".
... separate frames are created for the pre and post-div parts of the <
span>.
... if the <div> is removed, the frame construction code merges those frames by examining the parent frame, destroying the two frames created for the <
span>, and creating one unified frame for the text content.
Mozilla DOM Hacking Guide
for example, there is no html
spanelement 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 html
spanelement to modify it.
Bytecode Descriptions
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.
...this instruction must appear immediately before each jstry_destructuring
span in a script's try notes.
...┬──┬◡ノ(° -°ノ) 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.
Aggregate view - Firefox Developer Tools
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 html
spanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape".
...this page simply runs a script that creates a large number of dom nodes (200 htmldivelement objects and 4000 html
spanelement objects).
... 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.
AbstractRange - Web APIs
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 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.
DOMTokenList.add() - Web APIs
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.contains() - Web APIs
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.
... first, the html: <
span class="a b c"></
span> now the javascript: let
span = document.queryselector("
span"); let classes =
span.classlist; let result = classes.contains("c"); if (result) {
span.textcontent = "the classlist contains 'c'"; } else {
span.textcontent = "the classlist does not contain 'c'"; } the output looks like this: specifications specification status comment domthe definition of 'contains()' in that specification.
DOMTokenList.entries() - Web APIs
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.
DOMTokenList.forEach() - Web APIs
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.
... html <
span class="a b c"></
span> javascript let
span = document.queryselector("
span"); let classes =
span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) {
span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in that specification.
DOMTokenList.item() - Web APIs
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.
DOMTokenList.keys() - Web APIs
examples in the following example we retrieve the list of classes set on a <
span> element as a domtokenlist using element.classlist.
...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.
DOMTokenList.replace() - Web APIs
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.
DOMTokenList.toggle() - Web APIs
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">classlist is 'a b'</
span> now the javascript: let
span = document.queryselector("
span"); let classes =
span.classlist;
span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) {
span.textcontent = `'c' added; classlist is now "${classes}".`; } else {
span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks like this: specifications specification status comment domthe definition of 'toggle()' in that specification.
DOMTokenList.values() - Web APIs
examples in the following example we retrieve the list of classes set on a <
span> element as a domtokenlist using element.classlist.
...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.
MediaQueryList.media - Web APIs
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.
MouseEvent.pageX - Web APIs
updatedisplay() simply replaces the contents of the <
span> elements meant to contain the x and y coordinates with the values of pagex and pagey.
... </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".
Selection.setBaseAndExtent() - Web APIs
examples in this example, we have two paragraphs containing
spans, each one containing a single word.
... <h1>setbaseandextent example</h1> <div> <p class="one"><
span>fish</
span><
span>dog</
span><
span>cat</
span><
span>bird</
span></p> <p>middle</p> <p class="two"><
span>car</
span><
span>bike</
span><
span>boat</
span><
span>plane</
span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <input id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <input id="foffset" name="foffset"...
... type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>output</strong>: <
span class="output"></
span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.getelementbyid('foffset'); var button = document.queryselector('button'); var output = document.queryselector('.output'); var selection; button.onclick = function() { try { selection = document.getselection(); selection.setbaseandextent(one, aoffset.value, two, foffset.value); var text = selection.tostring(); output.textcontent = text; } catch(e) { output.textcontent = e.message; } } play with the live example below, setting differen...
UIEvent.layerX - Web APIs
} #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <
span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</
span> </div> <div id="d2"> <
span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> <
span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
} #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <
span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</
span> </div> <div id="d2"> <
span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> <
span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
} #d2 { position: absolute; top: 180px; left: 80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <
span>this is an un-positioned div so clicking it will return layerx/layery values almost the same as pagex/pagey values.</
span> </div> <div id="d2"> <
span>this is a positioned div so clicking it will return layerx/layery values that are relative to the top-left corner of this positioned element.
... note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> <
span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</
span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
Example and tutorial: Simple synth keyboard - Web APIs
<div class="settingsbar"> <div class="left"> <
span>volume: </
span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist> element which is connected to the range using the name attribute to find an opt...
... <div class="right"> <
span>current waveform: </
span> <select name="waveform"> <option value="sine">sine</option> <option value="square" selected>square</option> <option value="sawtooth">sawtooth</option> <option value="triangle">triangle</option> <option value="custom">custom</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660...
...{ background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { padding-top: 8px; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: relative; vertical-align: middle; width: 100%; height: 30px; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left
span, .left input { vertical-align: middle; } .right { width: 50%; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right
span { vertical-align: middle; } .right input { vertical-align: baseline; } javascript the javascript code begins by initializing a number of variables.
window.location - Web APIs
le> <script> function shownode (onode) { document.documentelement.scrolltop = onode.offsettop; document.documentelement.scrollleft = onode.offsetleft; } function showbookmark (sbookmark, busehash) { if (arguments.length === 1 || busehash) { location.hash = sbookmark; return; } var obookmark = document.queryselector(sbookmark); if (obookmark) { shownode(obookmark); } } </script> <style>
span.intlink { cursor: pointer; color: #0000ff; text-decoration: underline; } </style> </head> <body> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...praesent bibendum condimentum feugiat.</p> <p id="mybookmark1">[ <
span class="intlink" onclick="showbookmark('#mybookmark2');">go to bookmark #2</
span> ]</p> <p>vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
...pellentesque porttitor facilisis ultricies.</p> <p id="mybookmark2">[ <
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> ]</p> <p>phasellus tempus fringilla nunc, eget sagittis orci molestie vel.
Window.matchMedia() - Web APIs
examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <
span>; as a result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
... javascript let mql = window.matchmedia('(max-width: 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.
ARIA: switch role - Accessibility
<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.
... <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.
... button.switch { margin: 0; padding: 0; width: 70px; height: 26px; border: 2px solid black; display: inline-block; margin-right: 0.25em; line-height: 20px; vertical-align: middle; text-align: center; font: 12px "open sans", "arial", serif; } button.switch
span { padding: 0 4px; pointer-events: none; } [role="switch"][aria-checked="false"] :first-child, [role="switch"][aria-checked="true"] :last-child { background: #262; color: #eef; } [role="switch"][aria-checked="false"] :last-child, [role="switch"][aria-checked="true"] :first-child { color: #bbd; } label.switch { font: 16px "open sans", "arial", sans-serif; line-height: 20px; user-...
Keyboard-navigable JavaScript widgets - Accessibility
these widgets are typically composed of <div> and <
span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do.
... authors can also make a <div> or <
span> keyboard accessible by adding a tabindex of 0.
... 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.
:nth-child() - CSS: Cascading Style Sheets
detailed example html <h3><code>
span:nth-child(2n+1)</code>, without an <code><em></code> among the child elements.</h3> <p>children 1, 3, 5, and 7 are selected.</p> <div class="first"> <
span>
span 1!</
span> <
span>
span 2</
span> <
span>
span 3!</
span> <
span>
span 4</
span> <
span>
span 5!</
span> <
span>
span 6</
span> <
span>
span 7!</
span> </div> <br> <h3><code>
span:nth-child(2n+1)</code>, with an <code><em></c...
...ode> among the child elements.</h3> <p>children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't selected because it isn't a <code><
span></code>.</p> <div class="second"> <
span>
span!</
span> <
span>
span</
span> <em>this is an `em`.</em> <
span>
span</
span> <
span>
span!</
span> <
span>
span</
span> <
span>
span!</
span> <
span>
span</
span> </div> <br> <h3><code>
span:nth-of-type(2n+1)</code>, with an <code><em></code> among the child elements.</h3> <p>children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code><em></code>, not a <code><
span></code>, and <code>nth-of-type</code> only selects children of that type.
... the <code><em></code> is completely skipped over and ignored.</p> <div class="third"> <
span>
span!</
span> <
span>
span</
span> <em>this is an `em`.</em> <
span>
span!</
span> <
span>
span</
span> <
span>
span!</
span> <
span>
span</
span> <
span>
span!</
span> </div> css html { font-family: sans-serif; }
span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first
span:nth-child(2n+1), .second
span:nth-child(2n+1), .third
span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
Border-radius generator - CSS: Cascading Style Sheets
border-radius html content <div id="container"> <div class="group section"> <div id="preview" class="col
span_12"> <div id="subject"> <div id="top-left" class="radius-container" data-x="left" data-y="top"> </div> <div id="top-right" class="radius-container" data-x="right" data-y="top"> </div> <div id="bottom-right" class="radius-container" data-x="right" data-y="bottom"> </div> <div id="bottom-left" class="radius-container" data-x="left" data-y="bottom"> </div> <div id="radius...
...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 * ==========================================...
...sensivity : 5; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info = document.createelement('
span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); node.classname = 'ui-input-slider ui-input-slider-container'; this.input = input; sliders[topic] = this; setvalue(topic, value); } var setvalue = function setvalue(topic, value, send_not...
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
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.
...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.
...this once again causes tracks which
span more than one column track to gain extra space: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); height: 500px; width: 500px; grid-gap: 10px; grid-template-areas: "a a b" "a a b" "c d d"; align-content: space-between; justify-content: space-around; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: ...
Grid template areas - CSS: Cascading Style Sheets
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 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 .
Subgrid - CSS: Cascading Style Sheets
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.
...as the item
spans five column tracks, this means that the subgrid has five 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.
CSS selectors - CSS: Cascading Style Sheets
syntax: a, b example: div,
span will match both <
span> and <div> elements.
... syntax: a b example: div
span will match all <
span> elements that are inside a <div> element.
... syntax: a ~ b example: p ~
span will match all <
span> elements that follow a <p>, immediately or not.
Inline formatting context - CSS: Cascading Style Sheets
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.
...in the example below you can see how the margin, border, and padding on the inline <
span> element are added.
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...
...this.min : value; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info = document.createelement('
span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); this.input = input; sliders[topic] = this; setvalue(topic, value); }; inputslider.prototype.setinputvalue = function setinputvalue() { this.input.value = this.value.tofixed(this.precisio...
font-size - CSS: Cascading Style Sheets
take the following html and css: html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ }
span { font-size: 1.6em; } <div> <
span>outer <
span>inner</
span> outer</
span> </div> the result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px.
... 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.
... 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).
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.
...*/ 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 fonts module level 4the definition of 'font-weight' in that specification.
position - CSS: Cascading Style Sheets
my adjacent block level elements sit on new lines below me.</p> <p class="positioned">by default we
span 100% of the width of our parent element, and we are as tall as our child content.
...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.
... overflowing inline elements <
span>wrap onto a new line if possible — like this one containing text</
span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; }
span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to som...
Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and
spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track ...
...as a consequence, the video controls now look as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <
span id="progress-bar"></
span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> <button id="subtitles" type="button" data-stat...
...there are only a handful of css properties that can be applied to a text cue: color opacity visibility text-decoration text-shadow background shorthand properties outline shorthand properties font shorthand properties, including line-height white-space for example, to change the text colour of the text track cues you can write: ::cue { color:#ccc; } if the webvtt file uses voice
spans, which allow cues to be defined as having a particular "voice": 0 00:00:00.000 --> 00:00:12.000 <v test>[test]</v> then this specific 'voice' will be stylable like so: ::cue(v[voice='test']) { color:#fff; background:#0095dd; } note: some of the styling of cues with ::cue currently works on chrome, opera, and safari, but not yet on firefox.
Video player styling basics - Developer guides
the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <
span id="progress-bar"></
span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the previous arti...
... as mentioned in the previous article, there is a fallback provided for browsers that do not support the <progress> element; 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.
HTML attribute reference - HTML: Hypertext Markup Language
col
span <td>, <th> the col
span attribute defines the number of columns a cell should
span.
... row
span <td>, <th> defines the number of rows a table cell should
span over.
...
span <col>, <colgroup> spellcheck global attribute indicates whether spell checking is allowed for the element.
<listing> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the html
spanelement interface for this element.
...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 html
spanelement 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...
...ofirefox android no support nonotes no support nonotes notes before firefox 4, this element implemented the html
spanelement interface instead of the standard htmlelement interface.opera android no support nosafari ios no support nosamsung internet android no support nolegend no support no supportdeprecated.
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
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.
... 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 elements reference - HTML: Hypertext Markup Language
<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.
... <
span> the html <
span> element is a generic inline container for phrasing content, which does not inherently represent anything.
... <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.
HTML documentation index - HTML: Hypertext Markup Language
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.
... 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.
... 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.
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 t
span 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 svgt
spanelement recently implemented bindings: selectsubstring 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).
... recently implemented bindings: selectsubstring altglyph implemented as t
spans, no font features as of gecko 2.0 (bug 456286, bug 571808).
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...
... 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.
Index - 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 610 build building prism is similar to building mccoy, but there are some differences which is why a separate build documentation article.
...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).
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...
...l',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 may 2003 copyright information: copyright © 2001-2003 netscape.
Localizing an extension - Archive of obsolete content
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.
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...
... ↙ ↓ ↓ ↘ b: 1 c: 2 d: 3 e: 4 ↓ f: 4 style context tree: doc: b ↙ ↓ ↘ title: c para: f class="emph" para: d ↓ ↓ quote: a quote: a ↓
span: e class="emph" the rule tree and style data all of the style structs that can be obtained through a style context add up to around 900 bytes.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
the best way to only process element nodes is to iterate over all child nodes and only process those with a nodetype of 1: html: <div id="foo"> <
span>test</
span> </div> javascript: var mydiv = document.getelementbyid("foo"); var mychildren = mydiv.childnodes; for (var i = 0; i < mychildren.length; i++) { if (mychildren[i].nodetype == 1){ // element node }; }; generate and manipulate content mozilla supports the legacy methods for adding content into the dom dynamically, such as document.write, document.open and doc...
... 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.
Grids - Archive of obsolete content
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.
Using the W3C DOM - Archive of obsolete content
the following examples show how to modify the text of a
span element that already exists in the html file.
... <body> <p>papa's got <
span id="dynatext">a lot of nerve</
span>!</p> <script type="text/javascript"> // get a reference to the
span element var
spanel = document.getelementbyid("dynatext"); // detect whether the browser supports textcontent or innertext if (typeof
spanel.textcontent == 'string') {
spanel.textcontent = 'some gall'; } else if (typeof
spanel.innertext == 'string') {
spanel.innertext = 'some gall'; // if neither are supported, use other dom methods } else { while (
spanel.firstchild) {
spanel.removechild(
spanel.firstchild); }
spanel.appendchild(document.createtextnode('some gall')); } </script> </body> the first part of the code gets a reference to the element.
Audio for Web games - Game development
to see this in action, let's lay out some separate tracks: <section id="tracks"> <ul> <li data-loading="true"> <a href="leadguitar.mp3" class="track">lead guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-decribedby="guitar-play-label"> <
span id="guitar-play-label">play</
span> </button> </li> <li data-loading="true"> <a href="bassguitar.mp3" class="track">bass guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="bass-play-label"> <
span id="bass-play-label">play</
span> </button> </li> <li data-loading="true"> <a href="drums.mp3" clas...
...s="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <
span id="drums-play-label">play</
span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">horns</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="horns-play-label"> <
span id="horns-play-label">play</
span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <
span id="clavi-play-label">play</
span> </button> </li> </ul> <p class="sourced">all tracks sourced from <...
Pseudo-classes and pseudo-elements - Learn web development
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.
... it acts as if a <
span> was magically wrapped around that first formatted line, and updated each time the line length changed.
Grids - Learn web development
to
span across two cells, repeat the name.
... 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.
Test your skills: Multicol - Learn web development
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.
... multicol three cause the element containing the heading and subheading to
span across all columns so it looks like the image.
Example 2 - Learn web development
js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <
span class="value">cherry</
span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --...
...{ 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...
Define terms with HTML - Learn web development
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.
Video and audio content - Learn web development
a webm file containing a movie which has a main video track and one alternate angle track, plus audio for both english and
spanish, in addition to audio for an english commentary track can be conceptualized as shown in the diagram below.
... also included are text tracks containing closed captions for the feature film,
spanish subtitles for the film, and english captions for the commentary.
HTML table advanced features and accessibility - Learn web development
next, add a col
span attribute to make the "sum" cell
span across the first four columns, so the actual number appears at the bottom of the "cost" column.
... 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 col
span="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
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.
... 229 html table basics article, beginner, codingscripting, html, learn, tables, basics, cell, col, colgroup, col
span, header, row, row
span that just about wraps up the basics of html tables.
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...
...} ) to loop through all the keywords associated with each article, and insert each one inside its own <
span>, inside a <p>.
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
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.
... 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.
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...
...tton> <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.
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 "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <
span class="visually-hidden">editing {{label}}</
span> </button> <button type="submit" class="btn btn__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 }...
... <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.
Focus management with Vue refs - Learn web development
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.
...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).
Mozilla Style System Documentation
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] ,------' / \ `------.
... [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.
Mozilla internal string guide
mozilla::bulkwritehandle<t> autoconverts to a writable mozilla::
span<t> and also provides explicit access to itself as
span (as
span()) 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.
...calling restartbulkwrite() invalidates previously-obtained
span, raw pointer or length.
Index
if you create an object with a longer life
span, you will own it until you give ownership away.
...the result is greater than 1 if the specified cell
spans multiple columns.
nsIAccessibleTableCell
the result differs from 1 if the specified cell
spans multiple columns.
...the result differs from 1 if the specified cell
spans multiple rows.
XPCOM ownership guidelines
if you create an object with a longer life
span, you will own it until you give ownership away.
... such a function is the perfect example of something that creates an object with a longer life
span that itself, and gives away ownership (by producing a pointer that is already addrefed) --- in this case, to the caller.
DOM allocation example - Firefox Developer Tools
it just contains a script that creates a large number of dom nodes: var toolbarbuttoncount = 20; var toolbarcount = 200; function getrandomint(min, max) { return math.floor(math.random() * (max - min + 1)) + min; } function createtoolbarbutton() { var toolbarbutton = document.createelement("
span"); toolbarbutton.classlist.add("toolbarbutton"); // stop spidermonkey from sharing instances toolbarbutton[getrandomint(0,5000)] = "foo"; return toolbarbutton; } function createtoolbar() { var toolbar = document.createelement("div"); // stop spidermonkey from sharing instances toolbar[getrandomint(0,5000)] = "foo"; for (var i = 0; i < toolbarbuttoncount; i++) { var toolbarbut...
..."container"); for (var i = 0; i < toolbarcount; i++) { var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1
span element each time in total, then, it creates 200 htmldivelement objects, and 4000 html
spanelement objects.
Tree map view - Firefox Developer Tools
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 html
spanelement objects).
... you can see how almost all the heap usage is from the html
spanelement objects that it creates.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <
span class="note">firefox developer edition</
span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selec...
...ted { 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.getelementbyid("selected"); if (selected) { selected.removeattribute("id"); } } document.addeventlistener("click", toggleselection); ...
Work with animations - Firefox Developer Tools
'scale(1)', filter: 'grayscale(100%)' }, { filter: 'grayscale(100%)', offset: 0.333 }, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)' } ]; application to the example applying all this to our example, we can see that: the animation involved two elements,
span#note and img#icon.
... 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.
Background Tasks API - Web APIs
</p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <
span id="currenttasknumber">0</
span> of <
span id="totaltaskcount">0</
span> </div> </div> <div class="logbox"> <div class="logheader"> log </div> <div id="log"> </div> </div> the progress box uses a <progress> element to show the progress, along with a label with sections that are changed to present numeric information about the progress.
...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.
ChildNode.after() - Web APIs
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var
span = document.createelement("
span"); child.after(
span); console.log(parent.outerhtml); // "<div><p></p><
span></
span></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outerhtml); // "<div><p></p>text</div>" inserting an element and text var parent = document.createelem...
...ent("div"); var child = document.createelement("p"); parent.appendchild(child); var
span = document.createelement("
span"); child.after(
span, "text"); console.log(parent.outerhtml); // "<div><p></p><
span></
span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with statement.
ChildNode.before() - Web APIs
examples inserting an element var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var
span = document.createelement("
span"); child.before(
span); console.log(parent.outerhtml); // "<div><
span></
span><p></p></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.outerhtml); // "<div>text<p></p></div>" inserting an element and text var parent = document.createel...
...ement("div"); var child = document.createelement("p"); parent.appendchild(child); var
span = document.createelement("
span"); child.before(
span, "text"); console.log(parent.outerhtml); // "<div><
span></
span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the with statement.
CustomElementRegistry.define() - Web APIs
// create a class for the element class popupinfo extends htmlelement { constructor() { // always call super first in constructor super(); // create a shadow root var shadow = this.attachshadow({mode: 'open'}); // create
spans var wrapper = document.createelement('
span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('
span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('
span'); info.setattribute('class','info'); // take attribute content and put it inside the info
span var text = this.getattribu...
...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' }); <p is="word-count"></p...
DOMTokenList.length - Web APIs
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.
DOMTokenList.value - Web APIs
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.
DataTransfer.clearData() - Web APIs
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.
... </
span> <
span class="tweaked" id="target">drop zone</
span> <div>status: <
span id="status">drag to start</
span></div> <div>data is: <
span id="data">uninitialized</
span></div> css
span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('drage...
Element.attachShadow() - Web APIs
the following is a list of elements you can attach a shadow root to: any autonomous custom element with a valid name <article> <aside> <blockquote> <body> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <main> <nav> <p> <section> <
span> syntax var shadowroot = element.attachshadow(shadowrootinit); parameters shadowrootinit a shadowrootinit dictionary, which can contain the following fields: mode a string specifying the encapsulation mode for the shadow dom tree.
...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
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 slotted
span = document.queryselector('my-paragraph
span') console.log(slotted
span.slot); // logs 'my-text' specifications specification status comment domthe definition of 'slot' in that specification.
Element.tagName - Web APIs
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.
Using files from web applications - Web APIs
example: showing file(s) size the following example shows a possible use of the size property: <!doctype html> <html> <head> <meta charset="utf-8"> <title>file(s) size</title> </head> <body> <form name="uploadform"> <div> <input id="uploadinput" type="file" name="myfiles" multiple> selected files: <
span id="filenum">0</
span>; total size: <
span id="filesize">0</
span> </div> <div><input type="submit" value="send file"></div> </form> <script> function updatesize() { let nbytes = 0, ofiles = this.files, nfiles = ofiles.length; for (let nfileid = 0; nfileid < nfiles; nfileid++) { nbytes += ofiles[nfileid].size; } let soutput = nbytes + " byte...
... for (let i = 0; i < this.files.length; i++) { const li = document.createelement("li"); list.appendchild(li); const img = document.createelement("img"); img.src = url.createobjecturl(this.files[i]); img.height = 60; img.onload = function() { url.revokeobjecturl(this.src); } li.appendchild(img); const info = document.createelement("
span"); info.innerhtml = this.files[i].name + ": " + this.files[i].size + " bytes"; li.appendchild(info); } } } this starts by fetching the url of the <div> with the id filelist.
GeolocationCoordinates.longitude - Web APIs
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.
HTMLTableColElement - Web APIs
htmltablecolelement.
span is an unsigned long that reflects the
span html attribute, indicating the number of columns to apply this object's attributes to.
... recommendation the
span property is now an unsigned long.
HTMLTextAreaElement - Web APIs
nselend : nselstart) + sstarttag.length); omsginput.focus(); } css css to decorate the internal
span to behave like a link: .intlink { cursor: pointer; text-decoration: underline; color: #0000ff; } html: <form name="myform"> <p>[ <
span class="intlink" onclick="insertmetachars('<strong>','<\/strong>');"><strong>bold</strong></
span> | <
span class="intlink" onclick="insertmetachars('<em>','<\/em>');"><em>italic</em></
span> | <
span class="intlink" onclick="var n...
...ewurl=prompt('enter the full url for the link');if(newurl){insertmetachars('<a href=\u0022'+newurl+'\u0022>','<\/a>');}else{document.myform.mytxtarea.focus();}">url</
span> | <
span class="intlink" onclick="insertmetachars('\n<code>\n','\n<\/code>\n');">code</
span> | <
span class="intlink" onclick="insertmetachars(' :-)');">smile</
span> | etc.
Node.insertBefore() - Web APIs
example example 1 <div id="parentelement"> <
span id="childelement">foo bar</
span> </div> <script> // create the new node to insert let newnode = document.createelement("
span") // get a reference to the parent node let parentdiv = document.getelementbyid("childelement").parentnode // begin test case [ 1 ] : existing childelement (all works correctly) let sp2 = document.getelementbyid("childelement") parentdiv.insertbefore(newnode, sp2) // end...
...lement" parentdiv.insertbefore(newnode, sp2) // implicit dynamic cast to type node // end test case [ 2 ] // begin test case [ 3 ] : childelement is of type "undefined" ( string ) let sp2 = "undefined" // non-existent node of id "childelement" parentdiv.insertbefore(newnode, sp2) // generates "type error: invalid argument" // end test case [ 3 ] </script> example 2 <div id="parentelement"> <
span id="childelement">foo bar</
span> </div> <script> // create a new, plain <
span> element let sp1 = document.createelement("
span") // get the reference element let sp2 = document.getelementbyid("childelement") // get the parent element let parentdiv = sp2.parentnode // insert the new element into before sp2 parentdiv.insertbefore(sp1, sp2) </script> note: there is no insertafter() method.
Node.replaceChild() - Web APIs
example // given: // <div> // <
span id="child
span">foo bar</
span> // </div> // create an empty element node // without an id, any attributes, or any content var sp1 = document.createelement("
span"); // give it an id attribute called 'new
span' sp1.id = "new
span"; // create some content for the new element.
... var sp1_content = document.createtextnode("new replacement
span element."); // apply that content to the new element sp1.appendchild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getelementbyid("child
span"); var parentdiv = sp2.parentnode; // replace existing node sp2 with the new
span element sp1 parentdiv.replacechild(sp1, sp2); // result: // <div> // <
span id="new
span">new replacement
span element.</
span> // </div> specifications specification status comment domthe definition of 'node: replacechild' in that specification.
Using the Payment Request API - Web APIs
for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; succes
spanel.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.
...for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; succes
spanel.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.
Slottable: assignedSlot - Web APIs
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 slotted
span = document.queryselector('my-paragraph
span') console.log(slotted
span.assignedslot); // logs '<slot name="my-text">' specifications specification status comment domthe definition of 'assignedslot' in that specification.
VTTCue() - Web APIs
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.
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...
Controlling multiple parameters with ConstantSourceNode - Web APIs
<div class="controls"> <div class="left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <
span>volume: </
span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-s...
...ize: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 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.
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: ...
...center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[ <
span class="intlink" onclick="otwexample1.play();">play</
span> | <
span class="intlink" onclick="otwexample1.pause();">pause</
span> | <
span class="intlink" onclick="otwexample1.terminate();">terminate</
span> ]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.
Generating HTML - Web APIs
<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> ...
...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 html
spanelement 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 svgt
spanelement 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 group role - Accessibility
<div id="tree1" role="tree" tabindex="-1"> <div id="animals" class="groupheader" role="presentation" aria-owns="animalgroup" aria-expanded="true"> <img role="presentation" tabindex="-1" src="images/treeexpanded.gif" /> <
span role="treeitem" tabindex="0">animals</
span> </div> <div id="animalgroup" role="group"> <div id="birds" role="treeitem"> <
span tabindex="-1">birds</
span> </div> <div id="cats" class="groupheader" role="presentation" aria-owns="catgroup" aria-expanded="false"> <img role="presentation" tabindex="-1" src="images/treecontracted.gif" /> <
span role="treeitem" tabindex="...
...0">cats</
span> </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <
span tabindex="-1">siamese</
span> </div> <div id="tabby" role="treeitem"> <
span tabindex="-1">tabby</
span> </div> </div> </div> </div> example 2: using the group role with a html drop-down menu the snippet below shows how the group role is added directly into the html source code.
ARIA: Comment role - Accessibility
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> to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment.
ARIA: Mark role - Accessibility
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".
ARIA: Suggestion role - Accessibility
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>.
... </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>.
ARIA: checkbox role - Accessibility
<
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.
... html <
span role="checkbox" id="chkpref" aria-checked="false" onclick="changecheckbox()" onkeypress="changecheckbox()" tabindex="0" aria-labelledby="chk1-label"></
span> <label id="chk1-label" onclick="changecheckbox()" onkeypress="changecheckbox()">remember my preferences</label> css [role="checkbox"] { padding:5px; } [aria-checked="true"]::before { content: "[x]"; } [aria-checked="false"]::be...
An overview of accessible web applications and widgets - Accessibility
since the html4 specification doesn't provide built-in tags that semantically describe these kinds of widgets, developers typically resort to using generic elements such as <div> and <
span>.
...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.
:-moz-first-node - CSS: Cascading Style Sheets
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.
::slotted() - CSS: Cascading Style Sheets
/* selects any element placed inside a slot */ ::slotted(*) { font-weight: bold; } /* selects any <
span> placed inside a slot */ ::slotted(
span) { font-weight: bold; } syntax ::slotted( <compound-selector-list> )where <compound-selector-list> = <compound-selector>#where <compound-selector> = [ <type-selector>?
...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.
:host() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-
span> — that you can wrap around text: <h1>host selectors <a href="#"><context-
span>example</context-
span></a></h1> inside the element's constructor, we create style and
span elements, fill the
span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let
span = document.createelement('
span');
span.textcontent = this.
...textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(
span); style.textcontent = '
span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host(.footer) { color : red; } rule styles all instances of the <context-
span> element (the shadow host in this instance) in the document that have the footer class set on them — we've used it to give instances of the element inside the <f...
:host-context() - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-
span> — that you can wrap around text: <h1>host selectors <a href="#"><context-
span>example</context-
span></a></h1> inside the element's constructor, we create style and
span elements, fill the
span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let
span = document.createelement('
span');
span.textcontent = this.
...textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(
span); style.textcontent = '
span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host-context(h1) { font-style: italic; } and :host-context(h1):after { content: " - no links in headers!" } rules style the instance of the <context-
span> element (the shadow host in this instance) inside the <h1>.
:host - CSS: Cascading Style Sheets
in this example we have a simple custom element — <context-
span> — that you can wrap around text: <h1>host selectors <a href="#"><context-
span>example</context-
span></a></h1> inside the element's constructor, we create style and
span elements, fill the
span with the content of the custom element, and fill the style element with some css rules: let style = document.createelement('style'); let
span = document.createelement('
span');
span.textcontent = this.
...textcontent; const shadowroot = this.attachshadow({mode: 'open'}); shadowroot.appendchild(style); shadowroot.appendchild(
span); style.textcontent = '
span:hover { text-decoration: underline; }' + ':host-context(h1) { font-style: italic; }' + ':host-context(h1):after { content: " - no links in headers!" }' + ':host-context(article, aside) { color: gray; }' + ':host(.footer) { color : red; }' + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; the :host { background: rgba(0,0,0,0.1); padding: 2px 5px; } rule styles all instances of the <context-
span> element (the shadow host in this instance) in the document.
:valid - CSS: Cascading Style Sheets
syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <
span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <
span></
span> </div> to provide these indicators, we use the following css: input +
span { position: relative; } input +
span::before { position: absolute; right: -20px; top: 5px; } input:inva...
...lid { border: 2px solid red; } input:invalid +
span::before { content: '✖'; color: red; } input:valid +
span::before { content: '✓'; color: green; } we set the <
span>s to position: relative so that we can position the generated content relative to them.
Coordinate systems - CSS: Cascading Style Sheets
note that within the <div> with the id "log", we have a paragraph for each coordinate system, with
span used for each of the elements to receive and display the coordinates in each model.
... <div class="outer"> <div class="inner"> <div class="log"> <p> offset-relative: <
span id="offsetx">0</
span>, <
span id="offsety">0</
span> </p> <p> client-relative: <
span id="clientx">0</
span>, <
span id="clienty">0</
span> </p> <p> page-relative: <
span id="pagex">0</
span>, <
span id="pagey">0</
span> </p> <p> screen-relative: <
span id="screenx">0</
span>, <
span id="screeny">0</
span> </p> </div> </div> </div> css the css is pretty much just for appearances here.
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...
...this.min : value; var input = new inputcomponent(this); var slider_left = new slidercomponent(this, -1); var slider_right = new slidercomponent(this, 1); slider_left.classname = 'ui-input-slider-left'; slider_right.classname = 'ui-input-slider-right'; if (name) { var info = document.createelement('
span'); info.classname = 'ui-input-slider-info'; info.textcontent = name; node.appendchild(info); } node.appendchild(slider_left); node.appendchild(input); node.appendchild(slider_right); this.input = input; sliders[topic] = this; setvalue(topic, value); }; inputslider.prototype.setinputvalue = function setinputvalue() { this.input.value = this.value.tofixed(this.precisio...
CSS Multi-column Layout - CSS: Cascading Style Sheets
reference multiple-column layout properties column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-
span column-width columns related css fragmentation properties break-after break-before break-inside orphans widows guides basic concepts of multicol an overview of the multiple-column layout specification styling columns how to use column rules and manage the spacing between columns.
...
spanning and balancing how to make elements
span across all columns and controlling the way columns are filled.
Introduction to formatting contexts - CSS: Cascading Style Sheets
: table-cell, including anonymous table cells created when using the display: table-* properties table captions or elements with display: table-caption block elements where overflow has a value other than visible elements with display: flow-root or display: flow-root list-item elements with contain: layout, content, or strict flex items grid items multicol containers elements with column-
span set to all this is useful because a new bfc will behave much like the outermost document in that it becomes a mini-layout inside the main layout.
...the paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <
span> elements are used on text.
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; }
span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-colo...
...r: #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 /> <
span class="bold">div #4</
span><br /> positi...
Child combinator - CSS: Cascading Style Sheets
syntax selector1 > selector2 { style properties } examples css
span { background-color: white; } div >
span { background-color: dodgerblue; } html <div> <
span>
span #1, in the div.
... <
span>
span #2, in the
span that's in the div.</
span> </
span> </div> <
span>
span #3, not in the div at all.</
span> result specifications specification status comment selectors level 4the definition of 'child combinator' in that specification.
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...
...elements which
span multiple columns are considered to be a member of all of those columns.
Specificity - CSS: Cascading Style Sheets
by indicating one or more elements before the element you're selecting, the rule becomes more specific and gets higher priority: <div id="test"> <
span>text</
span> </div> div#test
span { color: green; } div
span { color: blue; }
span { color: red; } no matter the order, text will be green because that rule is most specific.
... #myid#myid
span { color: yellow; } .myclass.myclass
span { color: orange; } how !important can be used: a) overriding inline styles your global css file that sets visual aspects of your site globally may be overwritten by inline styles defined directly on individual elements.
Universal selectors - CSS: Cascading Style Sheets
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.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
ckground-color: black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <
span class="five">5 - more text</
span></div> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
... black; margin: 10px; width: 150px; height: 70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <
span class="five">- more text</
span></div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
break-after - CSS: Cascading Style Sheets
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.
...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.
break-before - CSS: Cascading Style Sheets
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.
...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.
break-inside - CSS: Cascading Style Sheets
ge-break-inside break-inside auto auto avoid avoid formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | avoid | avoid-page | avoid-column | avoid-region examples avoiding breaking inside a figure in the following example we have a container that contains an <h1>
spanning all columns (achieved using column-
span: all) and a series of paragraphs laid out in multiple columns using column-width: 200px.
...duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-
span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status comment css frag...
<display-outside> - CSS: Cascading Style Sheets
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.
display - CSS: Cascading Style Sheets
html <article class="container"> <
span>first</
span> <
span>second</
span> <
span>third</
span> </article> <article class="container"> <
span>first</
span> <
span>second</
span> <
span>third</
span> </article> <div> <label for="display">choose a display value:</label> <select id="display"> <option selected>block</option> <option>inline</option> <option>inline-block</option> <option>none</option> <option>flex</...
...option> <option>inline-flex</option> <option>grid</option> <option>inline-grid</option> <option>table</option> <option>list-item</option> </select> </div> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; padding-top: 10px; } article { background-color: red; } article
span { background-color: black; color: white; margin: 1px; } article,
span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay(); result note...
justify-items - CSS: Cascading Style Sheets
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.
... html <article class="container" tabindex="0"> <
span>first child</
span> <
span>second child</
span> <
span>third child</
span> <
span>fourth child</
span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article
span { background-color: black; color: white; margin: 1px; text-align: center; } article,
span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module level 3the definition of ...
justify-self - CSS: Cascading Style Sheets
these values cause the grid items to
span only as wide as their content width, and align in different positions across their cells.
... html <article class="container"> <
span>first child</
span> <
span>second child</
span> <
span>third child</
span> <
span>fourth child</
span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; }
span:nth-child(2) { justify-self: start; }
span:nth-child(3) { justify-self: center; }
span:nth-child(4) { justify-self: end; } article
span { background-color: black; color: white; margin: 1px; text-align: center; } article,
span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment ...
place-self - CSS: Cascading Style Sheets
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.
... html <article class="container"> <
span>first</
span> <
span>second</
span> <
span>third</
span> <
span>fourth</
span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; }
span:nth-child(2) { place-self: start center; }
span:nth-child(3) { place-self: center start; }
span:nth-child(4) { place-self: end; } article
span { background-color: black; color: white; margin: 1px; text-align: center; } article,
span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status comment css box alignment module lev...
<string> - CSS: Cascading Style Sheets
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.
...ring is demarcated by single quotes.' /* character escaping */ "this is a string with \" an escaped double quote." "this string also has \22 an escaped double quote." 'this is a string with \' an escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string
spanning two lines of code (these two strings will have identical output) */ "a really long \ awesome string" "a really long awesome string" specifications specification status comment css values and units module level 3the definition of '<string>' in that specification.
Media buffering, seeking, and time ranges - Developer guides
this represents two buffered time ranges — one
spanning 0 to 5 seconds and the second
spanning 15 to 19 seconds.
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <
span id="buffered-amount"></
span> </div> <div class="progress"> <
span id="progress-amount"></
span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; background-color: #777; width: 0; } .progress { margin-top: -20px; height: 20px; ...
Content categories - Developer guides
>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <
span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... 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).
Rich-Text Editing in Mozilla - Developer guides
internet explorer differences 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.
... 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.
<acronym> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the html
spanelement 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.
<big>: The Bigger Text element - HTML: Hypertext Markup Language
<
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 html
spanelement interface for this element.
<input type="button"> - HTML: Hypertext Markup Language
<div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><
span class="output">30</
span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>add suitable fallback here.</p> </canvas> body { background: #ccc; margin: 0; overflow: hidden; } .toolbar { background: #ccc; width: 150px; height: 75px; padding: 5px; } input[type="color"], input[type="button"] { width: 90%; margin: 0 auto; display: block; } inpu...
...t[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('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 180; }; // update sizepicker output value sizepicker.oninput = function() { output.textcontent = sizepicker.value; } // store mouse pointer c...
<input type="url"> - HTML: Hypertext Markup Language
let's see how: div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input +
span { padding-right: 30px; } input:invalid+
span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+
span:after { position: absolute; content: '✓'; padding-left: 5px; } <form> <div> <label for="myurl">enter the problem website address:</label> <input id="myurl" name="myurl" type="url" required pattern=".*\.myco\..*" ...
... title="the url must be in a myco domain"> <
span class="validity"></
span> </div> <div> <label for="mycomment">what is the problem?</label> <input id="mycomment" name="mycomment" type="text" required> <
span class="validity"></
span> </div> <div> <button>submit</button> </div> </form> first of all, the required attribute is specified, making it mandatory that a valid email address be provided.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
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.
<s> - HTML: Hypertext Markup Language
implementation note: up to gecko 1.9.2 inclusive, firefox implements the html
spanelement 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.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th col
span="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 col
span="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> ...
...</tr> </tbody> <tbody> <tr> <th col
span="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 separate <tbody> block, the first row of which contains a single <th> element with a col
span attribute that
spans the entire width of the table.
<th> - HTML: Hypertext Markup Language
col
span this attribute contains a non-negative integer value that indicates for how many columns the cell extends.
... row
span this attribute contains a non-negative integer value that indicates for how many rows the cell extends.
lang - HTML: Hypertext Markup Language
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.
Microdata - HTML: Hypertext Markup Language
example html <div itemscope itemtype="http://schema.org/softwareapplication"> <
span itemprop="name">angry birds</
span> - requires <
span itemprop="operatingsystem">android</
span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <
span itemprop="ratingvalue">4.6</
span> ( <
span itemprop="ratingcount">8864</
span> ratings ) </div> ...
...<div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<
span itemprop="price">1.00</
span> <meta itemprop="pricecurrency" content="usd" /> </div> </div> structured data itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop name angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itemprop pricecurrency usd result ...
MathML attribute reference - MathML
column
span <mtd> a non-negative integer value that indicates over how many table columns the cell extends.
... row
span <mtd> a non-negative integer value that indicates on how many rows does the cell extend.
<mtd> - MathML
column
span a non-negative integer value that indicates on how many columns does the cell extend.
... row
span a non-negative integer value that indicates on how many rows does the cell extend.
direction - SVG: Scalable Vector Graphics
the direction attribute specifies the inline-base direction of a <text> or <t
span> element.
... 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 <t
span>.
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <t
span> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text domina...
... if this property occurs on a <t
span>, <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.
fill - SVG: Scalable Vector Graphics
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 <t
span>.
... t
span for <t
span>, fill is a presentation attribute that defines the color of the text.
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <t
span>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requi...
... http://www.w3.org/tr/svg11/feature#text the browser supports the <text>, <t
span>, <tref>, <textpath>, <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> elements.
text-anchor - SVG: Scalable Vector Graphics
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 <t
span>, <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.
... 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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r="3" fill="red" /> <circle cx="60" cy="75" r="3" fill="red" /> <circle ...
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <t
span>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" vis...
... html <button id="nav-toggle-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)")...
writing-mode - SVG: Scalable Vector Graphics
the writing-mode attribute applies only to <text> elements; the attribute is ignored for <t
span>, <tref>, <altglyph> and <textpath> sub-elements.
... 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 <t
span> 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.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<circle>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<ellipse>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<g> - SVG: Scalable Vector Graphics
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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<line>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment svg markersthe definition of '<marker>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment svg pathsthe definition of '<path>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<polygon>' in that specification.
<polyline> - SVG: Scalable Vector Graphics
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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<polyline>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status comment scalable vector graphics (svg) 2the definition of '<rect>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> note: a <symbol> element itself is not meant to be rendered.
<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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specifications specification status comment scalable vector graphics (svg) 2the definition of '<text>' in that specification.
<textPath> - SVG: Scalable Vector Graphics
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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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>, <t
span> specifications specification status comment scalable vector graphics (svg) 2the definition of '<textpath>' in that 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-col
span, 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-...
...readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-row
span, 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 comment scalable vector graphics (svg) 2the definition of '<use>' in that specification.
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> <t
span> 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>, <t
span>, <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>, <t
span> text content child elements <altglyph>, <textpath>, <tref>, <t
span> uncategorized elements <clippath>,...
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 <t
span> 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
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.
...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.
Using custom elements - Web Components
// create a shadow root this.attachshadow({mode: 'open'}); // sets and returns 'this.shadowroot' // create (nested)
span elements const wrapper = document.createelement('
span'); wrapper.setattribute('class','wrapper'); const icon = wrapper.appendchild(document.createelement('
span')); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); // insert icon from defined attribute or default icon const img = icon.appendchild(document.createelement('img')); img.src = this.hasattribute('img') ?
... this.getattribute('img') : 'img/default.png'; const info = wrapper.appendchild(document.createelement('
span')); info.setattribute('class','info'); // take attribute content and put it inside the info
span info.textcontent = this.getattribute('data-text'); // create some css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + // css truncated for brevity // attach the created elements to the shadow dom this.shadowroot.append(style,wrapper); finally, we register our custom element on the customelementregistry using the define() method we mentioned earlier — in the parameters we specify the element name, and then the class name that defines its functionality: customelements.define('popup-info', popupinfo); it is now available to ...
page-worker - Archive of obsolete content
for example, this add-on loads a page from wikipedia, and runs a content script in it to send all the headers back to the main add-on code: var pageworkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var elements = document.queryselectorall('h2 >
span'); " + "for (var i = 0; i < elements.length; i++) { " + " postmessage(elements[i].textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { console.log(message); } }); for concise...
ui/frame - Archive of obsolete content
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/javascrip...
Windows - Archive of obsolete content
this can be used in cases in which you need to uniquely identify a dom window during the duration of the application's life
span: 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.
Extension Versioning, Update and Compatibility - Archive of obsolete content
other tags aren't included in the result but do have their contents displayed, so the following snippet: <
span><q>text</q></
span> would be rendered exactly the same as: <q>text</q> sample file <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <h2>my extension</h2> <ul> <li>this update fixes some stability related issues.</li> </ul> </html> what end-user sees the content...
The Essentials of an Extension - Archive of obsolete content
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).
Extensions support in SeaMonkey 2 - Archive of obsolete content
o/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog urls added in 2.1 url in firefox url in seamonkey chrome://browser/content/bookmarks/bookmark
spanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey.
Handling common accessibility problems - Learn web development
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.
Accessibility Information for Core Gecko Developers
html accessibility 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.
Debugging Table Reflow
+ 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 col
span #define min_pro 8 // desired width due to proportional <col>s or cols attribute #define final 9 // ...
overflow-clip-box-block
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><
span>abcdefghijklmnopqrstuvwxyzÅÄÖ</
span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; ...
overflow-clip-box-inline
examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><
span>abcdefghijklmnopqrstuvwxyzÅÄÖ</
span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80;...
overflow-clip-box
formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><
span>abcdefghijklmnopqrstuvwxyzÅÄÖ</
span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt ...
CustomizableUI.jsm
wide_panel_class string "panel-wide-item", the class used to distinguish items that
span the entire menu panel.
PopupNotifications.jsm
method overview void locationchange(); notification getnotification(id, browser); void remove(notification); notification show(browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description i
spanelopen boolean returns true if the notification panel is currently visible, false if it is not.
Index
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.
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
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.
Localizing extension metadata on addons.mozilla.org
here is a list of the codes: arabic (ar), catalan (ca), czech (cs), danish (da), german (de), greek (el), basque (eu),
spanish (es-es), farsi (fa), finnish (fi), french (fr), gaeilge (ga-ie), hebrew (he), hungarian (hu), indonesian (id), italian (it), japanese (ja), korean (ko), mongolian (mn), dutch (nl), polish (pl), brazilian portuguese (pt-br), european portuguese (pt-pt), romanian (ro), russian (ru), slovakian (sk), albanian (sq), swedish (sv-se), ukrainian (uk), vietnamese (vi), chinese (zh-cn) and taiwanese (zh...
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>, <t
span>, 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
it has implications for the <t
span>, <tref>, and <altglyph> elements, event processing, for bounding box calculations and for calculation of clipping paths: if display is set to none on a <t
span>, <tref>, or <altglyph> element, then the text string is ignored for the purposes of text layout.
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacit...
fill-rule - SVG: Scalable Vector Graphics
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 <t
span> 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.
font-family - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | s...
font-size-adjust - SVG: Scalable Vector Graphics
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 <t
span> 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.
font-size - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the value...
font-stretch - SVG: Scalable Vector Graphics
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 <t
span> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal animatable yes specifications specification status comment css fonts module level ...
font-style - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values,...
font-variant - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values...
font-weight - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the val...
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
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 <t
span> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 180, and 270 degrees.
glyph-orientation-vertical - SVG: Scalable Vector Graphics
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 <t
span> 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.
kerning - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <t
span> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto ...
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <t
span> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
letter-spacing - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the value...
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>, <t
span>, <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
as a presentation attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <t
span>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="...
paint-order - SVG: Scalable Vector Graphics
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 <t
span> 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.
pointer-events - SVG: Scalable Vector Graphics
ement we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <t
span>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted animatable yes for a detailed explanation of each possible value, have a look at the css pointer-events documentation.
stroke-dasharray - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <t
span> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5...
stroke-dashoffset - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" ...
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <...
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" f...
stroke-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the...
stroke-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" ...
stroke-width - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes ...
stroke - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <t
span> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargr...
systemLanguage - SVG: Scalable Vector Graphics
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>, <t
span>, <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.
text-decoration - SVG: Scalable Vector Graphics
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 <t
span> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value ...