Index - Archive of obsolete content
it's a work-in-progress, with questions in red highlight.
... 890 highlightaccesskey no summary!
... 891 highlightnonmatches xul attributes, xul reference no summary!
...And 5 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
hacky highlight tracking causes problems problem: screen readers ignore the msaa focus whenever a highlight bar moves, speaking the current highlighted text instead.
... the implementation of automated highlight tracking simply reads any text that is currently highlighted, even if it resides in several places on the screen.
...problems can easily happen merely by having two listboxes visible at the same time, because selected listbox items use the system highlight color, even when the listbox itself is not focused.
...And 5 more matches

Examine and edit HTML - Firefox Developer Tools
this shows the complete hierarchy through the document for the branch containing the selected element: hovering over a breadcrumb highlights that element in the page.
... moving the mouse over a node in the tree highlights that element in the page.
...clicking the marker enables the grid highlighter.
...And 4 more matches

stroke-linejoin - SVG: Scalable Vector Graphics
--> <path d="m9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="highlight"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5.5" r="0.05" fill="pink" /> </g> <use xlink:href="#highlight" x="6" /> <use xlink:h...
...ref="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> bevel the bevel value indicates that a bevelled corner is t...
...And 4 more matches

Index - Archive of obsolete content
143 highlightaccesskey no summary!
... 144 highlightnonmatches xul attributes, xul reference no summary!
... 591 togglehighlight no summary!
...And 3 more matches

Set a breakpoint - Firefox Developer Tools
highlighting the line you want to break at in the source pane and pressing ctrl + b (windows/linux) or cmd + b (macos).
... the line number is highlighted in blue: in addition, if the line contains multiple function calls, each one will be given a small blue arrow icon to the left of it.
...you can set a conditional breakpoint using the context menu (see above), or by highlighting the line you want to break at in the source pane and pressing ctrl + shift + b (windows/linux) or cmd + shift + b (macos).
...And 3 more matches

DevTools API - Firefox Developer Tools
highlighttool(toolid) highlights the tab for the given tool.
... parameters: toolid {string} - the tool to highlight.
... unhighlighttool(toolid) unhighlights the tab for the given tool.
...And 3 more matches

Index - Firefox Developer Tools
if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting.
... 58 edit css filters css, devtools, filters, page inspector, tools css filter properties in the rules view have a circular gray and white swatch next to them: 59 edit shape paths in css css, devtools, page inspector, rules view, tools, highlighter, shapes the shape path editor is a tool that helps you see and edit shapes created using clip-path and also the css shape-outside property and <basic-shape> values.
... 69 select and highlight elements the selected element is the element in the page that the inspector is currently focused on.
...And 3 more matches

Creating annotations - Archive of obsolete content
the matched element is highlighted and has a click handler bound to it which sends a message to the main add-on code.
... if the page element is eligible for annotation, then the selector highlights that element and binds a click handler to it.
...you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
...And 2 more matches

What text editors are available? - Learn web development
in this article we highlight some things to think about when installing a text editor for web development.
...in particular (if possible in your editor), try to: change syntax highlighting settings and colors play with indentation width, setting it to an appropriate setting for your needs check autosave and session saving settings configure any available plugins and investigate how to get new ones change color schemes adjust view settings and see how you can change the layout of the views check what programming languages/technologies your editor supports while you're lea...
...many text editors help you out with features like: syntax highlighting.
...And 2 more matches

Introduction to the server side - Learn web development
dynamic sites can highlight content that is more relevant based on user preferences and habits.
...other services like facebook, twitter, instagram, and wikipedia use server-side programming to highlight, share, and control access to interesting content.
...sites like google maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results.
...And 2 more matches

Mozilla’s UAAG evaluation report
(p1) ni we don't make use of scope, headers, axis, or any other table accessibility features we have nothing under properties, or anywhere else, to orient users reading a table 10.2 highlight selection and content focus.
... (p1) vg provides a focus outline box highlights follow graphical rendering conventions for windows does not highlight selected images we do not have the ability to show a border around the text selection we have the following focus appearance prefs that are not exposed in the ui, but can be manually inserted in the user's prefs.js file: setboolpref("browser.display.use_focus_colors", usefocuscolors); /* true or false */ setcharpref("browser.display.focus_background_color", colorstring); /* for example #ffeedd or the name of a color */ setcharpref("browser.display.focus_text_color", colorstring); setcharpref("browser.display.focus_ring_width", numpixels); /* integer 0-4 */ 10.3 distinct default highlight styles.
... 10.4 highlight special elements.
...And 2 more matches

Accessibility Inspector - Firefox Developer Tools
hovering over the "target" icon highlights the dom node in the page content.
... highlighting of ui items in the accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the ui items they relate to, if appropriate.
... in the following example, you can see that the image has been highlighted and its role, graphic, name, "road, asphalt, sky, clouds, fall", and the color contrast ratio, 3.46, appears in the information bar above it.
...And 2 more matches

Examine and edit CSS - Firefox Developer Tools
highlight matched elements: next to the selector is a target icon: click this to highlight all nodes in the page that match this selector.
... this also gets the target icon: , giving you a convenient way to highlight the currently selected element in the page.
... filtering rules there's a box at the top of the rules view labeled "filter styles": as you type: any rules which don't contain the typed string at all are hidden any declarations which contain the typed string are highlighted click the "x" at the end of the search box to remove the filter.
...And 2 more matches

View Source - Firefox Developer Tools
syntax highlighting (toggle) applies syntax highlighting to the code.when syntax highlighting is on, view source also highlights parsing errors in red.
... xml syntax highlighting view source uses the html tokenizer when highlighting xml source.
... while the tokenizer has support for processing instructions when highlighting xml source, that's the only xml-specific capability provided.
...And 2 more matches

<mark>: The Mark Text element - HTML: Hypertext Markup Language
the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
...think of this like using a highlighter pen in a book to mark passages that you find of interest.
... don't use <mark> for syntax highlighting purposes; instead, use the <span> element with appropriate css applied to it.
...And 2 more matches

Bookmark Keywords - Archive of obsolete content
changing the properties to alter the properties of the bookmark, highlight the bookmark and select the "properties..." button at the top of the bookmark manager.
...you should end up with the result shown in figure 4, without the red highlighting.
...one such example, with the relevant term highlighted, is shown in figure 7.
...in this case, we'll give it a keyword and title of google and replace the term "geitost" with the %s, as shown (with extra highlighting) in figure 8.

textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation...
..., disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found.
... highlightnonmatches new in thunderbird 1 requires seamonkey 1.0 type: boolean gets and sets the value of the highlightnonmatches attribute.

Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, time...
...out, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, se...
... highlightnonmatches new in thunderbird 3 requires seamonkey 2.0 type: boolean if true, then the autocomplete field will be highlighted when no match has been found.
... highlightnonmatches new in thunderbird 1 requires seamonkey 1.0 type: boolean gets and sets the value of the highlightnonmatches attribute.

CSS and JavaScript accessibility best practices - Learn web development
in addition, the mouse pointer changes to a pointer icon when links are moused over, and the link receives a highlight when focused (e.g.
...the following image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links.
...safari will only highlight the form element with the link on its own, so needs the onclick/focus() block to actually focus it.
... let's look at an example that highlights when this could be useful.

Example 5 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = sele...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option');...
... optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist...
... = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previouselementsibling.tabindex = -1; updatevalue(select, selectedindex); optionlist.foreach(function (option, index) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); option.addeventlistener('click', function (event) { updatevalue(select, index); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', functio...

Accessible Toolkit Checklist
the high contrast theme can be toggled dynamically with leftalt+leftshift+printscreen expose the spi_getscreenreader flag to xml/scripts so that apps can alter behavior use system highlight color where possible for item selection, but never use that exact color in more than 1 place at a time, otherwise screen reader will read everything with that color whenever highlight changes pay attention to spi_getcaretwidth for the correct width of the caret pay attention to 'route mouse pointer to default button' setting it's possible that the user wants mnemonics hidden exc...
...ackspace, ctrl+a, ctrl+b, ctrl+c, ctrl+i, ctrl+u, ctrl+x, ctrl+v, ctrl+[shift]+z in multiline text field, enter key inserts new line (thus default button no longer shows dark border when multiline text field is focused) in autocomplete text fields, make sure the autocomplete popup doesn't receive actual or msaa focus unless an up/down arrow is pressed, and don't use the default system highlight color in the list itself unless it really has focus in autocomplete text fields, make sure that the delete or backspace key removes all auto completed selected text.
... space bar toggles checkboxes for listboxes, use owner drawn list items to show a different highlight color when the list is not focused.
...for unfocused lists, use a lighter color highlight to show a non-focused state.

Drag Operations - Web APIs
however, you can also update the user interface with an insertion point or highlight as needed.
... for simple highlighting, you can use the :-moz-drag-over css pseudoclass on a drop target.
...this is the time when you should remove any insertion markers or highlighting.
...any highlighting or other visual effects specified using the :-moz-drag-over pseudoclass will be removed automatically.

stroke-linecap - SVG: Scalable Vector Graphics
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 --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to th...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> square the square value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half ...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "square" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="square" /> <!-- effect of the "square" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> browser compatibility the compatibility table on this page is generated from structured data.

XUL Events - Archive of obsolete content
this event would be used to update the disabled status of its commands.dommenuitemactivethe dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.dommenuiteminactivethe dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.popuphiddenthe popuphidden event is executed when a <menupopup>, <panel> or <tooltip> has become hidden.popuphidingthe popuphiding event is executed when a <menupopup>, <panel> or <tooltip> is about to be hidden.popupshowingthe popupshowing event is executed when a <men...
... attribute: onunderflow dommenuitemactive this event is sent when a menu or menuitem is hovered over, or highlighted.
... dommenuiteminactive this event is sent when a menu or menuitem is no longer being hovered over, or highlighted.

findbar - Archive of obsolete content
attributes browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar" browserid="content"/> attributes browserid type: string the id of the browser element to which the findbar is attached.
... highlightaccesskey type: string the access key for the "highlight" toolbar button in the findbar.
... togglehighlight( highlight ) return type: no return value turns highlighting of text matching the search term on and off; specify false to disable highlighting or true to enable it.

Menus - Archive of obsolete content
when the user moves the mouse over a menuitem, it will highlight the item.
...the user can press a key to highlight the menu labels and navigate with the cursor keys.
... this item will be highlighted, and will do certain functions depending on the kind of item it is, and the way in which it has been activated, whether via the keyboard or mouse.

PopupKeys - Archive of obsolete content
the following table lists the keys that are checked, and what the menu keyboard listener does in response: cursor up/down move the highlight within the menu up or down, wrapping around if necessary.
...home/end move the highlight to the beginning or the end of the menu, selecting the first or last item.
... enter/return activate the currently highlighted item.

Manifest Files - Archive of obsolete content
change the highlighted parts of the file above to your own information.
...replace the blue highlighted text above with your application's title and author.
...change the highlighted text to the file url below of the directory.

tree - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.
... selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected.
... otherwise, the entire row will be highlighted.

Images, media, and form elements - Learn web development
understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
...there are a few key basics worth highlighting in this section of the article.
... summary this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css.

Type, class, and ID selectors - Learn web development
in the live example below we have created a class called .highlight, and have applied it to several places in my document.
... all of the elements that have the class applied are highlighted.
...in this next example we will highlight a <span> with a class of highlight differently to an <h1> heading with a class of highlight.

How CSS is structured - Learn web development
the example below highlights a single property and value.
...in the example below, highlighting identifies the css declaration block..
...the colored highlighting identifies the h1 rule.

Example 1 - Learn web development
st { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); 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 /* --------------...
...st { z-index : 2; list-style: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); 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 /* -------------...
...e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #fff; } result for open state ...

Example 3 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = sele...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget");...
... form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlightoption(select, option); }); }); select.addeventlistener('click', function (event) { toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deact...

Example 4 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content // ------- // // helpers // // ------- // nodelist.prototype.foreach = function (callback) { array.prototype.foreach.call(this, callback); } // -------------------- // // function definitions // // -------------------- // function deactivateselect(select) { if (!select.classlist.contains('active')) return; var optlist = sele...
...ptlist'); optlist.classlist.add('hidden'); select.classlist.remove('active'); } function activeselect(select, selectlist) { if (select.classlist.contains('active')) return; selectlist.foreach(deactivateselect); select.classlist.add('active'); }; function toggleoptlist(select, show) { var optlist = select.queryselector('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option');...
... nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', function () { highlight...

Handling common HTML and CSS problems - Learn web development
after the packages have finished installing, try loading up an html file and a css file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
... right/cmd + click on the element in question and choose inspect/inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the dom inspector.
... as an example, we entered the following code: body { display: flex; } we highlighted it and ran the autoprefixer command, and it replaced it with this: body { display: -webkit-box; display: -ms-flexbox; display: flex; } layout issues another problem that might come up is differences in layouts between browsers.

Eclipse CDT
introduction eclipse cdt (c/c++ development tools) is an open-source ide for c and c++ development with advanced code assistance (inheritance/call graph explorer, jump to definition, refactoring, autocomplete, syntax highlighting, and so on).
...if you select one of these classes, then in the method pane to the right the method you searched for will be highlighted (you may need to scroll to it) - double click to see its definition.
... troubleshooting: if you get an error when trying to update, try clicking "available software sites" in the "install" window, make sure "juno" is still unticked, that "nightly" is ticked, highlight "nightly", click "reload", "ok", and then try again.

Browser API
htmliframeelement.clearmatch() clears any content highlighted by findall() or findnext().
... htmliframeelement.findall() searches for a string in a browser <iframe>'s content; if found, the first instance of the string relative to the caret position will be highlighted.
... htmliframeelement.findnext() highlights the next or previous instance of a search result after a findall() search has been carried out.

Profiling with the Firefox Profiler
this is good for highlighting particularly interesting parts of the code, but they miss out on un-annotated areas of the code base, and give no visibility into system libraries or drivers.
...hovering over a layer in the left panel highlights the layer in the right panel.
...here, i'm hovering over the last layer in the layer tree (a paintedlayercomposite), and a strip at the top of the right panel is highlighted, telling me that this layer is for the system notification bar in b2g.

Observer Notifications
topic data description highlighter-ready - sent when the highlighter component is initialized.
... inspector-highlighting - sent every time a different node in the page gets highlighted.
... inspector-unhighlighting - sent every time the highlighter stops highlighting a node.

nsIHTMLEditor
nt); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsashtml(); astring gethighlightcolorstate(out boolean amixed); void getindentstate(out boolean acanindent, out boolean acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out ...
... return value gethighlightcolorstate() returns what the highlight color of the selection.
... astring gethighlightcolorstate( out boolean amixed ); parameters amixed true if there is more than one font color.

Drawing and Event Handling - Plugins
however, for the plug-in to draw at any other time, for example, to highlight on a mouse-down event or draw animation at idle time, it must save the current setting of the port, set up its drawing environment as appropriate, draw, and then restore the port to the previous settings.
...because the drag manager calls both handlers no matter where the cursor is, the browser does not show the drag highlight when the cursor is over an instance rectangle.
...the plug-in can then show the drag highlight and handle drops when they occur within the instance rectangle.

Edit Shape Paths in CSS - Firefox Developer Tools
clicking the icon will cause the editor to highlight the shape.
...clicking on the shapes icon next to the value of circle() will highlight the shape, and also give you the option to resize the circle or move its center.
... moving and scaling shapes there is extra functionality available on the shape highlight — if you ctrl/cmd + click on the shapes icon for your shape the highlight will change, instead providing the ability to scale and/or move it.

Paint Flashing Tool - Firefox Developer Tools
the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling.
... using the paint flashing tool open the toolbox, then click the icon labeled "highlight painted area": then try using the page.
...e page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flashing, click the "highlight painted area" icon in the toolbox again.

The JavaScript input interpreter - Firefox Developer Tools
syntax highlighting the text you enter has syntax highlighting as soon as you have typed enough for the highlighter to parse it and infer the meanings of the "words".
... the output is highlighted as well where appropriate.
... note: syntax highlighting is not visible in your browser if accessibility features have been enabled.

Document.querySelectorAll() - Web APIs
a list of matches to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.

Element.querySelectorAll() - Web APIs
a nodelist of all of the <p> elements contained within the element "mybox": var matches = mybox.queryselectorall("p"); this example returns a list of all <div> elements within "mybox" with a class of either "note" or "alert": var matches = mybox.queryselectorall("div.note, div.alert"); here, we get a list of the document's <p> elements whose immediate parent element is a div with the class "highlighted" and which are located inside a container whose id is "test".
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the iframe elements in the document that contain an attribute named "data-src": var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is "userlist" which have a "data-active" attribute whose value is "1": var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active='1']"); accessing the matches once the nodelist of matching elements is returned, you can examine it just like any array.
...you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc.

Range.commonAncestorContainer - Web APIs
the listener gets the common ancestors of each piece of selected text, and triggers an animation to highlight them.
... html <ul> <li>strings <ul> <li>cello</li> <li>violin <ul> <li>first chair</li> <li>second chair</li> </ul> </li> </ul> </li> <li>woodwinds <ul> <li>clarinet</li> <li>oboe</li> </ul> </li> </ul> css the .highlight class created below uses a set of css @keyframes to animate a fading outline.
... .highlight { animation: highlight linear 1s; } @keyframes highlight { from { outline: 1px solid #f00f; } to { outline: 1px solid #f000; } } body { padding: 1px; } javascript document.addeventlistener('pointerup', e => { const selection = window.getselection(); if (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.add('highlight'); }, 0); } result specifications specification status comment domthe definition of 'range.commonancestorcon...

Range.setStart() - Web APIs
examples highlight part of an element this example uses the range.setstart() and range.setend() methods to add part of an address to a range.
... the selected range is then highlighted using range.surroundcontents().
... st.<br> dodge city, ks<br> 67801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city const startoffset = 2; // start at third node: 101 e.

Basic Concepts of grid layout - CSS: Cascading Style Sheets
in the below image you can see a track highlighted – this is the first row track in our grid.
...in the below image, i have highlighted the first cell of the grid.
...the highlighted grid area spans two row and two column tracks.

XUL Migration Guide - Archive of obsolete content
this simple example modifies the selected tab's css to enable the user to highlight the selected tab: function highlightactivetab() { var window = require("sdk/window/utils").getmostrecentbrowserwindow(); var tab = require("sdk/tabs/utils").getactivetab(window); if (tab.style.getpropertyvalue('background-color')) { tab.style.setproperty('background-color','','important'); } else { tab.style.setproperty('background-color','rgb(255,255,100)','important'); } } ...
... require("sdk/ui/button/action").actionbutton({ id: "highlight-active-tab", label: "highlight active tab", icon: "./icon-16.png", onclick: highlightactivetab }); security implications the sdk implements a security model in which an add-on only gets to access the apis it explicitly imports via require().

Overview - Archive of obsolete content
it identifies page elements which are eligible for annotation, highlights them on mouseover, and tells the main add-on code when the user clicks a highlighted element.
...it highlights any annotated elements that are found.

Tamarin build documentation - Archive of obsolete content
what we want is to have the indexer track the currently selected build config (so the correct conditional compiles are highlighted in the editor).
... are included for macos with the gcc 4.0 toolchain: mac-32-release mac-64-release mac-32-debug mac-64-debug mac-32-release-debugger mac-64-release-debugger mac-32-debug-debugger mac-64-debug-debugger the build location will be project_root/build_name/avm note: as discussed above, the c++ indexer has been setup to track the current build config, so the correct conditional compiles are highlighted in the editor run/debug from eclipse for test purposes, a launch config (running the helloworld test from esc) has been included for each of the build configs.

OpenClose - Archive of obsolete content
what it does do is affect how the focus and highlighting of the menu is handled.
...try opening a submenu of a bookmark (a bookmark folder) and note how the highlighting still changes as the mouse is moved over other menus, and the submenu is closed when the mouse is moved away.

selstyle - Archive of obsolete content
« xul reference selstyle type: string if set to the value primary, only the label of the primary column will be highlighted when an item in the tree is selected.
... otherwise, the entire row will be highlighted.

More Event Handlers - Archive of obsolete content
you could use this to highlight the element, however css provides a way to do this automatically so you shouldn't do it with an event.
...you might then unhighlight the element or remove status text.

Scratchpad - Archive of obsolete content
you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more information.
... ↑ and ↓ cycle through the suggestions and enter or tab select the highlighted choice.

Move the ball - Game development
first, add the following two lines above your draw() function, to define x and y: var x = canvas.width/2; var y = canvas.height-30; next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line: function draw() { ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving.
... add the following highlighted new line to the draw() function: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.beginpath(); ctx.arc(x, y, 10, 0, math.pi*2); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); x += dx; y += dy; } save your code and try again, and this time you'll see the ball move without a trail.

Track the score and win - Game development
add the following highlighted line to your code: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; score++; ...
...add the following highlighted section into your collisiondetection() function: function collisiondetection() { for(var c=0; c<brickcolumncount; c++) { for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(b.status == 1) { if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; b.status = 0; ...

HTML: A good basis for accessibility - Learn web development
the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
... this highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible.

HTML: A good basis for accessibility - Learn web development
the focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.
... this highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible.

CSS building blocks - Learn web development
understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.
...this article provides a guide to making html tables look good, with some specific table styling techniques highlighted.

What are browser developer tools? - Learn web development
(an added bonus: this method straight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
...in the following image, the highlight on the number 18 shows that the line has a breakpoint set.

Manipulating documents - Learn web development
add the following inside your html <head>: <style> .highlight { color: white; background-color: black; padding: 10px; width: 250px; text-align: center; } </style> now we'll turn to a very useful method for general html manipulation — element.setattribute() — this takes two arguments, the attribute you want to set on the element, and the value you want to set it to.
... in this case we will set a class name of highlight on our paragraph: para.setattribute('class', 'highlight'); refresh your page, and you'll see no change — the css is still applied to the paragraph, but this time by giving it a class that is selected by our css rule, not as inline css styles.

What went wrong? Troubleshooting JavaScript - Learn web development
if you follow this link, you'll see the exact line where the error is highlighted.
...this section highlights most of them.

Using the Browser API
searchform.addeventlistener('submit',function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); with this all done, you'll see your search results are highlighted; you can cycle through these using the htmliframeelement.findnext() method (specify forward and backward to go in either direction through the results), which is what our next two event listeners do: prev.addeventlistener('touchend',function() { browser.findnext("backward"); }); next.addeventlistener('touchend',function() { browser.findnext("forward"); }); the last event listener in this...
...if searchactive is true, meaning that a search has been done, we want to disable the search as we hide the search options — we disable the buttons, make searchactive false, clear the entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/highlighted search results from the browser.

mozbrowserfindchange
activematchordinal a number indicating the position of the currently highlighted search result, e.g.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events mozbrowserasyncscroll mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

Localizing with Koala
if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...
... the entity was added to the file and the english string is automatically highlighted, so that you can translate it right away.

browser.urlbar.formatting.enabled
the preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.
... type:boolean default value: true exists by default: yes application support:firefox 6.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-05-03 bugs: bug 451833 values true (default) the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.

Preference reference
xt.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts s...
...h the background of a text selection in the user interface or in content will be styled.ui.textselectforegroundui.textselectforeground saves the color in which the text of a text selection in the user interface or the content will be styled.ui.tooltipdelayui.tooltipdelay stores the delay in milliseconds between the mouse stopping over an element and the appearing of its tooltip.view_source.syntax_highlightthe preference view_source.syntax_highlight controls whether markup in the view source view is syntax highlighted.

nsIWebPageDescriptor
constants display type constants constant value description display_as_source 0x0001 generates an optionally syntax-highlighted (for xml/html documents) source of the original page.
...note that if the descriptor is that of the source of another page, this keeps the source view, but uses the current syntax highlighting preference.

Introduction to DOM Inspector - Firefox Developer Tools
if you're inspecting a chrome document, as you select nodes in the dom nodes viewer, the rendered versions of those nodes are highlighted in the user interface itself.
... bugs which prevent the flasher from dom inspector apis from working correctly on certain platforms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with a blinking red border.

Select an element - Firefox Developer Tools
the highlighted element is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the html pane when the inspector is open, as you move the mouse around the elements listed in the html pane, the corresponding elements are highlighted in the page.
...after that, as you move the mouse around the page, the element under the mouse is highlighted.

Work with animations - Firefox Developer Tools
if you hover over this selector, the element is highlighted in the page.
...clicking this icon locks the highlighter on the element.

Animating CSS properties - Firefox Developer Tools
an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
...in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms.

Shader Editor - Firefox Developer Tools
if you hover over an entry in the list, the geometry drawn by that program is highlighted in red: if you click the eyeball icon just left of the program's entry, that program is disabled.
...for example, you can modify the colors: the editor highlights syntax errors in your code: if you hover over the cross shown next to a line containing an error, you'll see more details about the problem: ...

Tips - Firefox Developer Tools
in the rules view: click the inspector icon () next to any selector to highlight all elements that match it.
... click the inspector icon () next to the element{} rule to lock the highlighter on the current element.

CSS Painting API - Web APIs
we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get inputproperties() { return ['--boxcolor']; } static get inputarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight =...
... <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); then we can use the <image> with the css paint() function: li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.

How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
note: firefox devtools have supported highlighting text nodes since version 52, making it easier to see exactly what nodes whitespace characters are contained within.
... the firefox devtools html inspector will highlight text nodes, and also show you exactly what area the elements are taking up — useful if you are wondering what is causing the problem, and are maybe thinking you've got some extra margin in there or something!

ParentNode.querySelectorAll() - Web APIs
examples to obtain a nodelist of all of the <p> elements in the document: var matches = document.queryselectorall("p"); this example returns a list of all <div> elements within the document with a class of either note or alert: var matches = document.queryselectorall("div.note, div.alert"); here, we get a list of <p> elements whose immediate parent element is a <div> with the class highlighted and which are located inside a container whose id is test.
... var container = document.queryselector("#test"); var matches = container.queryselectorall("div.highlighted > p"); this example uses an attribute selector to return a list of the <iframe> elements in the document that contain an attribute named data-src: var matches = document.queryselectorall("iframe[data-src]"); here, an attribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.

Range.getBoundingClientRect() - Web APIs
syntax boundingrect = range.getboundingclientrect() example html <div id="highlight"></div> <p>this example positions a "highlight" rectangle behind the contents of a range.
...the bounding client rectangle contains everything selected in the range.</p> css #highlight { background: yellow; position: absolute; z-index: -1; } p { width: 200px; } javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`; result specification specification status com...

::selection - CSS: Cascading Style Sheets
the ::selection css pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
... syntax /* legacy firefox syntax (version 61 and below) */ ::-moz-selection ::selection examples html this text has special styles when you highlight it.

-ms-high-contrast - CSS: Cascading Style Sheets
highlighttext: controls the color of selected text.
... highlight: controls the background color of selected text.

Ordering Flex Items - CSS: Cascading Style Sheets
in the live example below i have added a focus style in order that as you tab from link to link you can see which is highlighted.
...the heading of the news item is the key thing to highlight and would be the element that a user might jump to if they were tabbing between headings to find content they wanted to read.

Layout using named grid lines - CSS: Cascading Style Sheets
.item2 { grid-column: col-start 7 / span 3; } <div class="wrapper"> <div class="item1">i am placed from col-start line 1 to col-start 5</div> <div class="item2">i am placed from col-start line 7 spanning 3 lines</div> </div> if you take a look at this layout in the firefox grid highlighter you can see how the column lines are shown, and how our items are placed against these lines.
... .main-header, .main-footer { grid-column: col-start / span 12; } .side1 { grid-column: col-start / span 3; grid-row: 2; } .content { grid-column: col-start 4 / span 6; grid-row: 2; } .side2 { grid-column: col-start 10 / span 3; grid-row: 2; } once again, the grid highlighter is helpful to show us how the grid we have placed our items on works.

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
if you use the firefox grid highlighter you can see how the grid has defined columns and rows.
...the firefox grid highlighter can be very useful as you learn, especially if your grid is quite complicated.

Basic Shapes - CSS: Cascading Style Sheets
the floated element has 20 pixels of padding, border and margin applied, and the shapes inspector highlights these reference boxes.
...the screenshot below shows the shape highlighted in the tool.

WebKit CSS extensions - CSS: Cascading Style Sheets
up** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-font-smoothing -webkit-highlight -webkit-hyphenate-character -webkit-hyphenate-limit-after -webkit-hyphenate-limit-before -webkit-hyphenate-limit-lines -webkit-initial-letter l -webkit-line-align -webkit-line-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-befo...
...pe -webkit-max-logical-height -webkit-max-logical-width -webkit-min-logical-height -webkit-min-logical-width n -webkit-nbsp-mode p -webkit-padding-after** -webkit-padding-before** -webkit-padding-end** -webkit-padding-start** -webkit-perspective-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-transform-origin-x -webkit-transform-origin-y -webkit-transform-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, ...

Event reference
dommenuitemactive xul a menu or menuitem has been hovered or highlighted.
... dommenuiteminactive xul a menu or menuitem is no longer hovered or highlighted.

Inline elements - HTML: Hypertext Markup Language
first, some simple css that we'll be using: .highlight { background-color:#ee3; } inline let's look at the following example which demonstrates an inline element: <div>the following span is an <span class="highlight">inline element</span>; its background has been colored to display both the beginning and end of the inline element's influence.</div> in this example, the <div> block-level element contains some text.
...because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this: for looks, this css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-color:#ee3; } block-level now let's change that <span> into a block-level element, such as <p>: <div>the following paragraph is a <p class="highlight">block-level element;</p> its background has been colored to display both the beginning and end of the block-level element's influence.</div> the css (not displayed in standard reading mode) is also used: body { margin: 0; padding: 4px; border: 1px solid #333; } .highlight { background-colo...

SyntaxError: illegal character - JavaScript
use an editor that supports syntax highlighting and carefully check your code against mismatches like a minus sign ( - ) versus a dash ( – ) or simple quotes ( " ) vs non-standard quotation marks ( “ ).
... // syntaxerror: illegal character // – is not - but looks like this var foo = 'bar'; // syntaxerror: illegal character // <37e> is not ; but looks like this this should work: "this is actually a string"; 42 - 13; var foo = 'bar'; some editors and ides will notify you or at least use a slightly different highlighting for it, but not all.

Animation performance and frame rate - Web Performance
an example: margin versus transform in this section we'll see how the waterfall can highlight the difference between animating using margin and animating using transform.
...in the screenshot above we've highlighted a paint operation, and the box on the right tells us it took 13.11ms.

d - SVG: Scalable Vector Graphics
/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- cubic bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="m 10,90 c 30,90 25,10 50,10 s 70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-80 40,-80 s 20,80 40,80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth command control points (the first one is implicit) --> ...
...formulae: po′ = pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- quadratic bézier curve with implicit repetition --> <path fill="none" stroke="red" d="m 10,50 q 25,25 40,50 t 30,0 30,0 30,0 30,0 30,0" /> <!-- highlight the curve vertex and control points --> <g> <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> <circle cx="25" cy="25" r="1.5" /> <!-- curve vertex points --> <circle cx="10" cy="50" r="1.5"/> <circle cx="40" cy="50" r="1.5"/> <g id="smoothquadraticdown"> <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fi...

Guides - Archive of obsolete content
this article highlights the main features of that design.

page-mod - Archive of obsolete content
the following add-on creates a button which, when clicked, highlights all the div elements in the document loaded into the active tab: require("sdk/ui/button/action").actionbutton({ id: "highlight-divs", label: "highlight divs", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").activetab.attach({ contentscript: 'var divs = document.getelementsbytagname("div");' + 'for (var i = 0; i < divs.length; ++i) {' + ...

simple-prefs - Archive of obsolete content
{ "type": "color", "name": "highlightcolor", "value": "#6a5acd", "title": "highlight color" } file displayed as a "browse" button that opens a file picker and stores the full path and name of the file selected.

cfx to jpm - Archive of obsolete content
this article highlights the main differences between cfx and jpm.

Annotator - Archive of obsolete content
whenever the user loads a page containing annotated elements these elements are highlighted, and if the user moves the mouse over an annotated element its annotation is displayed.

Handling Preferences - Archive of obsolete content
preferences with non-default values are highlighted in bold.

Introduction - Archive of obsolete content
the user agent string for firefox at the time of this writing (in us english, mac os x) is: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:25.0.1) gecko/20100101 firefox/25.0.1 the highlighted section is the gecko version: 25.0.1.

JavaScript Object Management - Archive of obsolete content
this is a point that is worth highlighting: modules work outside of the window scope.

Mozilla Documentation Roadmap - Archive of obsolete content
the about:mozilla newsletter is a weekly publication that includes the highlights of what is posted at planet mozilla.

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the incorrect words are highlighted while the user is typing.

Source Navigator - Archive of obsolete content
source navigator then loads the database and then display the following symbols window: searching a method by typing in the method name viewing the definition/declaration by highlighting the method in the code ...

Drag and Drop - Archive of obsolete content
the is also called after a drop is complete so that an element has a chance to remove any highlighting or other indication.

Block and Line Layout Cheat Sheet - Archive of obsolete content
it's a work-in-progress, with questions in red highlight.

jspage - Archive of obsolete content
ction(c){var e=this.get("tween"),d="opacity",a; c=$pick(c,"toggle");switch(c){case"in":e.start(d,1);break;case"out":e.start(d,0);break;case"show":e.set(d,1);break;case"hide":e.set(d,0);break;case"toggle":var b=this.retrieve("fade:flag",this.get("opacity")==1); e.start(d,(b)?0:1);this.store("fade:flag",!b);a=true;break;default:e.start(d,arguments);}if(!a){this.eliminate("fade:flag");}return this;},highlight:function(c,a){if(!a){a=this.retrieve("highlight:original",this.getstyle("background-color")); a=(a=="transparent")?"#fff":a;}var b=this.get("tween");b.start("background-color",c||"#ffff88",a).chain(function(){this.setstyle("background-color",this.retrieve("highlight:original")); b.callchain();}.bind(this));return this;}});fx.morph=new class({extends:fx.css,initialize:function(b,a){this.element=th...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
clicking on the link will open mozilla's internal view source window with the offending line highlighted.

Venkman Introduction - Archive of obsolete content
the line in question will be highlighted in yellow to make it easy to spot.

menuactive - Archive of obsolete content
typcially, the theme will use this to highlight the item.

seltype - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.

Attribute (XUL) - Archive of obsolete content
y dlgtype dragging editable editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu...

DOMMenuItemActive - Archive of obsolete content
the dommenuitemactive event is executed when a <menu> or a <menuitem> has been hovered or highlighted.

DOMMenuItemInactive - Archive of obsolete content
the dommenuiteminactive event is executed when a <menu> or a <menuitem> in no longer hovered or highlighted.

openPopup - Archive of obsolete content
it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.

Property - Archive of obsolete content
disablekeynavigation dlgtype docshell documentcharsetinfo editable editingcolumn editingrow editingsession editor editortype emptytext deprecated since gecko 2 enablecolumndrag eventnode firstordinalcolumn firstpermanentchild flex focused focuseditem forcecomplete group handlectrlpageupdown handlectrltab hasuservalue height hidden hideseconds highlightnonmatches homepage hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup ...

Multiple Rules - Archive of obsolete content
le, positive values with another greatermatch if a number is greater than anotherdisplay values greater than 1000 differently beforematch if a value comes before another alphabetically aftermatch if a value comes after another alphabetically startswithmatch if a value starts with a specific string endswithmatch if a value ends with a specific string containsmatch if a value contains a substringto highlight results that contain a search term here is an example using the 'contains' operator: <vbox datasources="people.xml" ref="*" querytype="xml"> <template> <query expr="person"> <assign var="?letters" expr="string-length(@name) - 1"/> </query> <rule> <where subject="?name" rel="contains" value=" "/> <action> <label uri="?" value="?name has two names for a tot...

Tree Widget Changes - Archive of obsolete content
example: treechildren::-moz-tree-separator { margin-top: 1px; border-top: 1px solid threedshadow; border-left: 1px solid threedshadow; border-right: 1px solid threedhighlight; border-bottom: 1px solid threedhighlight; height: 2px; } original document information author: neil deakin source: here ...

Focus and Selection - Archive of obsolete content
you might use these event handlers to highlight the element or display text on a status bar.

Tree Selection - Archive of obsolete content
this also means that the highlight will appear on several items even though the select event is never fired for those items.

Trees - Archive of obsolete content
the user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard.

XUL Questions and Answers - Archive of obsolete content
is there an editor widget in xul that supports syntax highlighting?

XUL accessibility tool - Archive of obsolete content
(aaronandy) highlight or blink source element in original xul app upon click of referencing line in report.

listbox - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.

menu - Archive of obsolete content
typcially, the theme will use this to highlight the item.

menupopup - Archive of obsolete content
it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.

panel - Archive of obsolete content
it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.

richlistbox - Archive of obsolete content
(default in tree.) for trees, you can also use the following values: cell individual cells can be selected text rows are selected; however, the selection highlight appears only over the text of the primary column.

tooltip - Archive of obsolete content
it affects menu item highlighting; that is, while a context menu is open, menus opened earlier do not highlight or execute their items.

How to enable locale switching in a XULRunner application - Archive of obsolete content
selecteditem = listitem; } localelistbox.appendchild(listitem); } // highlight current locale localelistbox.selecteditem = selecteditem; } catch (err) { alert (err); } 4.

2006-10-06 - Archive of obsolete content
discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project information (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.

External resources for plugin creation - Archive of obsolete content
feature highlights include thread safety checks, unicode support (with std::wstring), activex support, built-in drawing model negotiation for mac, automatic type conversion (including javascript arrays and objects), advanced security features, and more.

Building a Theme - Archive of obsolete content
updating the toolbar's styling note in firefox 4.0 and up, the highlight feature of dom inspector is broken.

Common Firefox theme issues and solutions - Archive of obsolete content
you also need to insert the following style rules into the proper place in the browser/browser.css file in your theme theme: /* highlighter toolbar - html tree */ #inspector-treepanel-toolbutton { list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png"); -moz-margin-end: 0; -moz-image-region: rect(0px 18px 16px 0px); } /* highlighter toolbar */ #inspector-inspect-toolbutton { list-style-image: url("chrome://browser/skin/devtools/inspect-button.png"); -moz-image-region: rect(0px 16px 16px 0px); } sty...

-ms-scrollbar-base-color - Archive of obsolete content
note that scrollbar-base-color sets the scroll bar face color and highlight color to different shades of the same base color.

-ms-scrollbar-track-color - Archive of obsolete content
div { width: 150px; height: 150px; border-style: solid; border-width: thin; overflow-y: scroll; font-family: sans-serif; float: left; margin-right: 10px; } .bluescroll { -ms-scrollbar-highlight-color: aqua; -ms-scrollbar-face-color: blue; -ms-scrollbar-arrow-color: blue; border-color: blue; } .redscroll { -ms-scrollbar-highlight-color: bisque; -ms-scrollbar-face-color: red; -ms-scrollbar-arrow-color: red; border-color: red; } <body> <div class="bluescroll"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet...

CSS - Archive of obsolete content
at specifies the base color of the main elements of a scroll bar.-ms-scrollbar-darkshadow-colorthe -ms-scrollbar-darkshadow-color css property is a microsoft extension that specifies the color of a scroll bar's gutter.-ms-scrollbar-face-colorthe -ms-scrollbar-face-color css property is a microsoft extension that specifies the color of the scroll box and scroll arrows of a scroll bar.-ms-scrollbar-highlight-colorthe -ms-scrollbar-highlight-color css property is a microsoft extension that specifies the color of the slider tray, the top and left edges of the scroll box, and the scroll arrows of a scroll bar.-ms-scrollbar-shadow-colorthe -ms-scrollbar-shadow-color css property is a microsoft extension that specifies the color of the bottom and right edges of the scroll box and scroll arrows of a scroll...

Index - Game development
41 tutorials canvas, games, javascript, web, workflows this page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.

Collision detection - Game development
update the following part of the code as indicated by the highlighted line: var bricks = []; for(var c=0; c<brickcolumncount; c++) { bricks[c] = []; for(var r=0; r<brickrowcount; r++) { bricks[c][r] = { x: 0, y: 0, status: 1 }; } } next we'll check the value of each brick's status property in the drawbricks() function before drawing it — if status is 1, then draw it, but if it's 0, then it was hit by the ball and we don't want it on the sc...

Tutorials - Game development
this page contains multiple tutorial series that highlight different workflows for effectively creating different types of web games.

WAI-ARIA basics - Learn web development
the label text contained in the aria-label attribute is read out when the form input is highlighted.

What is accessibility? - Learn web development
there is no need to learn all of the wcag — be aware of the major areas of concern, and use a variety of techniques and tools to highlight any areas that don't conform to the wcag criteria (see below for more).

Advanced styling effects - Learn web development
this highlights the danger of using non-standard and/or prefixed css features in your work — not only do they cause browser compatibility issues, but they are also subject to change, so your code could break at any time.

Debugging CSS - Learn web development
devtools will generally highlight unsupported properties and values in some way.

Styling tables - Learn web development
this article provides a guide to making html tables look good, with some specific table styling techniques highlighted.

Getting started with CSS - Learn web development
as with everything in css, there is the potential to make the document less accessible with your changes — we will aim to highlight potential pitfalls in appropriate places.

Fundamental text and font styling - Learn web development
you can't select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong>), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element's text), ::first-line (selects the first line of an element's text), or ::selection (selects the text currently highlighted by the cursor.) fonts let's move straight on to look at properties for styling fonts.

Styling links - Learn web development
if you don't want to underline links, at least highlight them in some other way.

Common questions - Learn web development
in this article we highlight some things to think about when choosing and installing a text editor for web development.

Advanced form styling - Learn web development
let's talk about some specifics of each of these types of control, highlighting difficulties along the way.

Client-side form validation - Learn web development
should you highlight the fields that are in error?

Example 2 - Learn web development
e: none; margin : 0; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option...

Styling web forms - Learn web development
simply put, we remove their borders and backgrounds, and redefine their padding and margin: input, textarea { font : 1.4em/1.5em "handwriting", cursive, sans-serif; border : none; padding : 0 10px; margin : 0; width : 80%; background : none; } when one of these fields gains focus, we highlight them with a light grey, transparent, background (it is always important to have focus style, for usability and keyboard accessibility): input:focus, textarea:focus { background : rgba(0,0,0,.1); border-radius: 5px; } now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the...

UI pseudo-classes - Learn web development
this is useful if you want a whole form to highlight in some way when an input inside it is focused.

Your first form - Learn web development
: inline-block; width: 90px; text-align: right; } input, textarea { /* to make sure that all text fields have the same font settings by default, textareas have a monospace font */ font: 1em sans-serif; /* uniform text field size */ width: 300px; box-sizing: border-box; /* match form field borders */ border: 1px solid #999; } input:focus, textarea:focus { /* additional highlight for focused elements */ border-color: #000; } textarea { /* align multiline text fields with their labels */ vertical-align: top; /* provide space to type some text */ height: 5em; } .button { /* align buttons with the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra margin represent roughly the same space as the space betw...

The web and web standards - Learn web development
so-called "linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.

HTML Cheatsheet - Learn web development
emphasize some text <em>i'm posh</em> i'm posh italic textt you can mark a phrase in the text in <i>italics</i> you can mark a phrase in the text in italics bold some text <b>bold a word or phrase</b>within the text bold a word or phrase within the text mark text as important <strong>i'm important</strong> i'm important highlight some text <mark>notice me</mark> notice me draw a line through irrelevant text <s>i'm irrelevant</s> i'm irrelevant underline a non-textual annotation this is <u>mispelled</u> this is mispelled text displayed lower than normal text h₂o h2o small text used to represent the <small>small print </small>of a document used to r...

HTML text fundamentals - Learn web development
</p> <!-- highlight keywords in a set of instructions --> <ol> <li> <b>slice</b> two pieces of bread off the loaf.

HTML table basics - Learn web development
she wants to highlight the columns containing the days she is teaching.

Index - Learn web development
120 images, media, and form elements beginner, css, forms, images, learn, media, replaced content this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css.

Video and Audio APIs - Learn web development
the css for the example is not too complicated, but we'll highlight the most interesting bits here.

Aprender y obtener ayuda - Learn web development
this also highlights the importance of taking regular breaks when you are studying in front of the computer.

The business case for web performance - Learn web development
it highlights the importance of understanding how cumulative experiences impact conversion and retention rates.

Routing in Ember - Learn web development
it contains the following contents: import emberrouter from '@ember/routing/router'; import config from './config/environment'; export default class router extends emberrouter { location = config.locationtype; rooturl = config.rooturl; } router.map(function() { this.route('completed'); this.route('active'); }); the highlighted lines were added when the 2nd and 3rd commands above were run.

Ember app structure and componentization - Learn web development
ext to the rendered todo app, there are a number of ways we could decide how to break up the ui, but let's plan on splitting the html out into the following components: the component groupings are as follows: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-todo" input.

Introduction to client-side frameworks - Learn web development
they are not really true dsls, but they are non-standard html, so we believe they are worth highlighting.

Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
tus --> <todosstatus bind:this={todosstatus} {todos} /> now we can call the exported focus() method from our removetodo() function: function removetodo(todo) { todos = todos.filter(t => t.id !== todo.id) todosstatus.focus() // give focus to status heading } go back to your app — now if you delete any todo, the status heading will be focussed — this is useful to highlight the change in numbers of todos, both to sighted users and screenreader users.

Introduction to automated testing - Learn web development
with the in-built image editor, highlight your screenshot before you push it to your colleagues.

Handling common JavaScript problems - Learn web development
after the packages have finished installing, try loading up a javascript file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.

Introducing a complete toolchain - Learn web development
this is possible because we installed all the tools locally, not globally, and highlights why it is such a powerful option.

Accessibility API cross-reference
uire immediacy alert_medium n/a n/a aria-live=polite low-priority info such as a tip or hint alert_low n/a n/a n/a this object is changing or moving rapidly animated n/a n/a n/a indicates that the user input is currently directed to that object and it is "armed for selection." example: a highlighted menu item or a pressed push button.

Software accessibility: Where are we today?
they might press a switch down to begin moving a highlight bar through the list, and release the switch when the desired option is highlighted.

Eclipse CDT Manual Setup
highlight (select) "cdt gcc build output parser", then in the "language settings provider options" that appear below, make sure that "share setting entries between projects (global provider)" is not ticked.

Reviewer Checklist
trailing whitespace (git diff and splinter view both highlight this, as does hg with the color extension enabled).

Performance
this highlights some performance pitfalls related to frame scripts/message manager usage and alternative approaches to avoid them.

HTMLIFrameElement.clearMatch()
the clearmatch() method of the htmliframeelement clears any content highlighted by findall() or findnext().

HTMLIFrameElement.findAll()
the findall() method of the htmliframeelement searches for a string in a browser <iframe>'s text content; if found, the first instance of the string relative to the caret position will be highlighted.

HTMLIFrameElement.findNext()
the findnext() method of the htmliframeelement highlights the next or previous instance of a search result after a findall() search has been carried out.

Implementing QueryInterface
the differences are highlighted in the following code.

Downloads.jsm
in general, you should be aware of the following highlights: there is no difference between active downloads and finished downloads.

Index
the following list contains links to pages that highlight steps that can be taken to make web content localizable.

Mozilla Content Localized in Your Language
if these are not applicable styles, what are some of the corresponding ways to express, emphasis or highlight some of the texts.

Localization content best practices
if a string is tied to an accesskey or a tooltip, use string ids that highlight this relation: neweventbtn.label = add event neweventbtn.accesskey = a neweventbtn.tooltip = add a new event don't duplicate ids if you're adding new strings, check that you're not duplicating an existing id.

Localizing without a specialized tool
if you click on the highlighted arrow pointing down while reading this tutorial on mdc, you will see two string that need to be translated: add "mdc search" manage search engines...

Creating localizable web applications
consider the following example: a filmreel-like slideshow showcasing highlighted features of the product or featured designs.

Web Localizability
the following list contains links to pages that highlight steps that can be taken to make web content localizable.

Activity Monitor, Battery Status Menu and top
furthermore, if you click on an application name in the menu activity monitor will be opened and that application’s entry will be highlighted.

NSS 3.14.3 release notes
notable changes in nss 3.14.3 cve-2013-1620 recent research by nadhem alfardan and kenny patterson has highlighted a weakness in the handling of cbc padding as used in ssl, tls, and dtls that allows an attacker to exploit timing differences in mac processing.

Hacking Tips
it's designed to highlight incorrect oom handling and this may show up as a crash or assertion failure at some later point.

Parser API
this makes it easier to write tools in javascript that manipulate javascript source programs, such as syntax highlighters, static analyses, translators, compilers, obfuscators, etc.

WebReplayRoadmap
code path highlighting (not yet implemented) when paused in a frame, the code path taken through the frame (the lines/expressions executed) could be highlighted somehow, which would make it easier to see what happened in the frame.

Implementation Details
at-spi events refer to specific pages to get information of supported events for interested at api: gecko msaa ia2 at-spi implementation features this section highlights special features of at apis implementation by gecko.

Preface
sidebar sections are included to highlight technical details.

nsIEffectiveTLDService
cookie setting and domain highlighting, but you should check whether it's the right answer for your application.

nsISupports
the point of those descriptions is to highlight the fact that addref() and release() do not necessarily correspond to incrementing and decrementing a counter, respectively, even though that is how they are usually implemented.

nsIWebBrowserFind
methods findnext() finds, highlights, and scrolls into view the next occurrence of the search string, using the current search settings.

Weak reference
the new and interesting things are highlighted.

Building a Thunderbird extension 1: introduction
these provide features like syntax highlighting and code coloration, indentation, auto-complete, etc.

Using the Mozilla source server
if you click "yes", windbg will display *busy* in the status bar while it downloads the source, and then it will automatically open the file and highlight the current line.

Plugins
roadmap highlights since firefox 52, plugins other than flash are not loaded by firefox.

Debugging service workers - Firefox Developer Tools
delete "name of cache" — delete only the highlighted cache.

Access debugging in add-ons - Firefox Developer Tools
window.addeventlistener("debugger:editorunloaded") relevant files: chrome://browser/content/devtools/debugger-controller.js chrome://browser/content/devtools/debugger-toolbar.js chrome://browser/content/devtools/debugger-view.js chrome://browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.

Breaking on exceptions - Firefox Developer Tools
to instruct the debugger to pause on an exception, tick these checkboxes in the breakpoints list: pause on exceptions pause on caught exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.

Search - Firefox Developer Tools
the debugger will display the number of matches in the code and highlight each result: using the outline tab if you are searching for a specific function within the current javascript file, you can use the outline tab in the debugger to find it quickly.

How to - Firefox Developer Tools
access debugging in add-onsbreaking on exceptionsdebug eval sourcesdisable breakpointsexamine, modify, and watch variableshighlight and inspect dom nodesignore a sourceopen the debuggerpretty-print a minified filesearchset a breakpointset a conditional breakpointset watch expressionsstep through codeuse a source mapuse watchpoints ...

Set event listener breakpoints - Firefox Developer Tools
when execution pauses, the source pane displays the highlighted line of the javascript code that is next to be executed, along with the surrounding code for context.

JSON viewer - Firefox Developer Tools
if you open a json file in the browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting.

Migrating from Firebug - Firefox Developer Tools
both tools highlight the different parts of the box model within the page when hovering them in the box model view.

Network request details - Firefox Developer Tools
in the above screenshot for example, the highlighted request's server-timing header contains 4 items — data, markup, total, and miss.

Network request list - Firefox Developer Tools
clicking an item in the search results highlights that item in the monitor list, and displays the corresponding information in the request details pane.

CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
hover over an element to highlight it on the page.

Examine and edit the box model - Firefox Developer Tools
viewing the box model with the select element button pressed, if you hover over an element in the page, the box model for the element is shown overlaid on the page: it's also shown overlaid if you hover over an element's markup in the html pane: if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element: the box model view when an element's selected, you can get a detailed look at the box model in the box model view: if you hover over a value, you'll see a tooltip telling you which rule the value comes from: if you hover over part of the box model in the box model view, the corresponding part of the page is highlighted: editing the box model you can also edit the values in the box mode...

CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
hovering over the different areas of the mini grid causes the equivalent area on the grid overlay to also highlight, along with a tooltip containing useful information such as the dimensions of that area, its row and column numbers, etc.

Use the Inspector from the Web Console - Firefox Developer Tools
if you hover over this target, the element is highlighted in the page, and if you click the target, the element is selected in the inspector: ...

Animation inspector (Firefox 41 and 42) - Firefox Developer Tools
the animation inspector enables you to: see information about all animations running in the page play/pause all animations play/pause/rewind/fast-forward each animation jump to a specific point in an animation highlight and inspect the animated node adjust the playback rate of each animation see whether an animation is running in the compositor thread (a lightning bolt icon is displayed next to such animations) ...

How to - Firefox Developer Tools
css flexbox inspector: examine flexbox layoutscss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize transformswork with animations ...

Waterfall - Firefox Developer Tools
in the screenshot below, we've zoomed in on a js function that's caused a drop in the frame rate: the intensive javascript article shows how the waterfall can highlight responsiveness problems caused by long javascript functions, and how you can use asynchronous methods to keep the main thread responsive.

Performance - Firefox Developer Tools
intensive javascript uses the frame rate and waterfall tools to highlight performance problems caused by long-running javascript, and how using workers can help in this situation.

Style Editor - Firefox Developer Tools
the editor provides line numbers and syntax highlighting to help make it easier to read your css.

Toolbox - Firefox Developer Tools
the following tools are not included in the toolbar by default, but you can add them in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row...

Web Audio Editor - Firefox Developer Tools
if, instead, you've connected a node to an audioparam in another node, then the connection is shown as a dashed line between the nodes, and is labeled with the name of the audioparam: inspecting and modifying audionodes if you click on a node, it's highlighted and you get a node inspector on the right hand side.

Rich output - Firefox Developer Tools
s", datecreated: 1552404478137 } ​ 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } ​ 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } ​ 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } ​ length: 4 ​ <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the inspector with that node selected.

Document: drag event - Web APIs
.target.style.opacity = .5; }, false); document.addeventlistener("dragend", function(event) { // reset the transparency event.target.style.opacity = ""; }, false); /* events fired on the drop targets */ document.addeventlistener("dragover", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } ...

DocumentOrShadowRoot.activeElement - Web APIs
note: focus (which element is receiving user input events) is not the same thing as selection (the currently highlighted part of the document).

Element: mouseout event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // briefly make the list purple when the mouse moves off the // <ul> element test.addeventlistener("mouseleave", function( event ) { // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color...

Element: mouseover event - Web APIs
html <ul id="test"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> javascript let test = document.getelementbyid("test"); // this handler will be executed only once when the cursor // moves over the unordered list test.addeventlistener("mouseenter", function( event ) { // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color ...

HTMLElement.innerText - Web APIs
as a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

HTMLElement - Web APIs
as a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

HTMLInputElement.setRangeText() - Web APIs
the newly inserted text will be highlighted (selected) afterwards.

Selection.deleteFromDocument() - Web APIs
html <p>try highlighting some of the text in this paragraph.

WebGL constants - Web APIs
useful for rendering hidden-line images, decals, and or solids with highlighted edges.

Lighting in WebGL - Web APIs
for our purposes, we're going to simplify the lighting model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene.

WebGL best practices - Web APIs
this page tackles recommendations across the spectrum of expertise, and not only highlights dos and don'ts, but also details why.

Web Video Text Tracks Format (WebVTT) - Web APIs
the example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using css.

Lighting a WebXR setting - Web APIs
specular light specular light is the light that makes up the highlights on reflective objects, such as gems, eyes, shiny cups and plates, and the like.

Attestation and Assertion - Web APIs
it's important to highlight that the signature for assertion uses a different key pair than attestation.

Window.find() - Web APIs
" + window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button> result notes in some browsers, window.find() selects (highlights) the found content on the site.

Worklet.addModule() - Web APIs
let.addmodule('modules/bypassfilter.js', { credentials: 'omit', }); paintworklet example css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: paint(hollowhighlights, filled, 3px); } } specifications specification status comment worklets level 1the definition of 'addmodule()' in that specification.

XRTargetRayMode - Web APIs
the targeted point or object might be indicated by drawing a shape or highlighting the targeted surface or object.

ARIA Test Cases - Accessibility
reads autocomplete suggestions through its ordinary highlight color mechanism.

ARIA annotations - Accessibility
role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes.

ARIA: Mark role - Accessibility
the mark landmark role semantically denotes html elements containing text that is marked/highlighted for reference purposes.

WAI-ARIA Roles - Accessibility
the main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.aria: mark rolethe mark landmark role semantically denotes html elements containing text that is marked/highlighted for reference purposes.

Web applications and ARIA FAQ - Accessibility
for example, a screen reader uses this api to read the user interface with a text-to-speech engine, a magnifier uses it to highlight important or active areas of the screen, and an onscreen keyboard might use it to provide the most efficient keyboard layout for a given context or ui control.

Accessibility documentation index - Accessibility
47 aria: mark role aria, aria role, reference, annotations, mark the mark landmark role semantically denotes html elements containing text that is marked/highlighted for reference purposes.

Web accessibility for seizures and physical reactions - Accessibility
here are some highlights: inverted-colors according to the section, user preference media features , "the inverted-colors media feature indicates whether the content is displayed normally, or whether colors have been inverted." forced-colors in forced-colors-mode, the user agent enforces the user's preferred color palette on the page, overriding the author's chosen colors.

Web Accessibility: Understanding Colors and Luminance - Accessibility
for example, if you have blue text within a gray "highlighted" area, your eyes will perceive that same blue text with a gray highlight differently if it is in a black div, or a white one.

::grammar-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::grammar-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::grammar-error examples simple document grammar check in this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

::slotted() - CSS: Cascading Style Sheets
'='<attr-modifier> = i | s examples highlighting slotted elements the following snippets are taken from our slotted-pseudo-element demo (see it live also).

::spelling-error - CSS: Cascading Style Sheets
allowable properties only a small subset of css properties can be used in a rule with ::spelling-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.

:blank - CSS: Cascading Style Sheets
syntax :blank examples simple :blank example in eventual supporting browsers, the :blank pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.

:focus-within - CSS: Cascading Style Sheets
(this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.

:invalid - CSS: Cascading Style Sheets
/* selects any invalid <input> */ input:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user.

:placeholder-shown - CSS: Cascading Style Sheets
html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; } result customized input field the following example highlights the branch and id code fields with a custom style.

:required - CSS: Cascading Style Sheets
/* selects any required <input> */ input:required { border: 1px dashed red; } this pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

:target - CSS: Cascading Style Sheets
; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.

:valid - CSS: Cascading Style Sheets
/* selects any valid <input> */ input:valid { background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user.

forced-colors - CSS: Cascading Style Sheets
color fill stroke text-decoration-color text-emphasis-color border-color outline-color column-rule-color scrollbar-color -webkit-tap-highlight-color box-shadow text-shadow you can use system color keywords with any property other than those listed above, to ensure that the rest of the page integrates with the restricted color palette available in forced colors mode.

Block and inline layout in normal flow - CSS: Cascading Style Sheets
for example, a <strong> element is used to highlight a word and displays bold in browsers.

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
"a a b" "a a b" "c d d"; } .item1 { grid-area: a; margin-left: auto; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> you can see how the item is aligned by using the firefox grid highlighter: alignment and writing modes in all of these examples i have been working in english, which is a left-to-right language.

Using CSS transitions - CSS: Cascading Style Sheets
height; transition-duration: 3s, 5s, 3s, 5s; } similarly, if any property's value list is longer than that for transition-property, it's truncated, so if you have the following css: div { transition-property: opacity, left; transition-duration: 3s, 5s, 2s, 1s; } this gets interpreted as: div { transition-property: opacity, left; transition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them.

CSS Layout cookbook - CSS: Cascading Style Sheets
in addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Microsoft CSS extensions - CSS: Cascading Style Sheets
tent-zoom-snap-points -ms-content-zoom-snap-type -ms-filter -ms-flow-from -ms-flow-into -ms-high-contrast-adjust -ms-hyphenate-limit-chars -ms-hyphenate-limit-lines -ms-hyphenate-limit-zone -ms-ime-align -ms-overflow-style -ms-scrollbar-3dlight-color -ms-scrollbar-arrow-color -ms-scrollbar-base-color -ms-scrollbar-darkshadow-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-shadow-color -ms-scrollbar-track-color -ms-scroll-chaining -ms-scroll-limit -ms-scroll-limit-x-max -ms-scroll-limit-x-min -ms-scroll-limit-y-max -ms-scroll-limit-y-min -ms-scroll-rails -ms-scroll-snap-points-x -ms-scroll-snap-points-y -ms-scroll-snap-x -ms-scroll-snap-y -ms-scroll-translation -ms-text-autospace -ms-touch-select -ms-wrap-flow -ms-wrap-ma...

Mozilla CSS extensions - CSS: Cascading Style Sheets
border-style and outline-style -moz-bg-insetobsolete since gecko 1.9 -moz-bg-outsetobsolete since gecko 1.9 -moz-bg-solidobsolete since gecko 1.9 <color> keywords -moz-activehyperlinktext -moz-hyperlinktext -moz-visitedhyperlinktext -moz-buttondefault -moz-buttonhoverface -moz-buttonhovertext -moz-default-background-color -moz-default-color -moz-cellhighlight -moz-cellhighlighttext -moz-field -moz-fieldtext -moz-dialog -moz-dialogtext -moz-dragtargetzone -moz-mac-accentdarkestshadow -moz-mac-accentdarkshadow -moz-mac-accentface -moz-mac-accentlightesthighlight -moz-mac-accentlightshadow -moz-mac-accentregularhighlight -moz-mac-accentregularshadow -moz-mac-chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -...

cross-fade() - CSS: Cascading Style Sheets
it can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

Guide to scroll anchoring - CSS: Cascading Style Sheets
if it does, you can check what node is firefox using as the anchor using the layout.css.scroll-anchoring.highlight switch.

paint() - CSS: Cascading Style Sheets
<li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor.

CSS: Cascading Style Sheets
in addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.

Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
that would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site: now we have our base color and our accent.

<code>: The Inline Code element - HTML: Hypertext Markup Language
example a paragraph of text that includes <code>: <p>the function <code>selectall()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p> the output generated by this html looks like this: notes to represent multiple lines of code, wrap the <code> element within a <pre> element.

<input type="date"> - HTML: Hypertext Markup Language
for example, try viewing the following in a unsupporting browser: <form> <label for="bday">enter your birthday: <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> <span class="validity"></span> </label> <p> <button>submit</button> </p> </form> if you submit it, you'll see that the browser displays an error and highlights the input as invalid if your entry doesn't match the pattern ####-##-## (where # is a digit from 0 to 9).

<input type="datetime-local"> - HTML: Hypertext Markup Language
min="2017-06-01t08:30" max="2017-06-30t16:30" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}t[0-9]{2}:[0-9]{2}" required> <span class="validity"></span> </div> <div> <input type="submit" value="book party!"> </div> <input type="hidden" id="timezone" name="timezone" value="-08:00"> </form> if you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn-nntnn:nn, where n is a number from 0 to 9.

<input type="month"> - HTML: Hypertext Markup Language
(summer months only, yyyy-mm)</label> <input id="month" type="month" name="month" min="2017-06" max="2017-09" required pattern="[0-9]{4}-[0-9]{2}"> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern nnnn-nn, where n is a number from 0 to 9.

<input type="radio"> - HTML: Hypertext Markup Language
radio buttons are typically rendered as small circles, which are filled or highlighted when selected.

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

<input type="time"> - HTML: Hypertext Markup Language
(opening hours 12:00 to 18:00): </label> <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required pattern="[0-9]{2}:[0-9]{2}"> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try submitting it, you'll see that non-supporting browsers now display an error message (and highlight the input as invalid) if your entry doesn't match the pattern nn:nn, where n is a number from 0 to 9.

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
those with extra importance as it relates to <input> are highlighted.

<select>: The HTML Select element - HTML: Hypertext Markup Language
the "focused" select option is highlighted with a dotted outline, in the same way as a keyboard-focused link.

<textarea> - HTML: Hypertext Markup Language
those within, and outside the bounds set by minlength, maxlength, or required) can be highlighted using the :valid and :invalid pseudo-classes.

HTML elements reference - HTML: Hypertext Markup Language
<mark> the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

HTML documentation index - HTML: Hypertext Markup Language
153 <mark>: the mark text element element, html, html text-level semantics, html5, highlighting, highlighting text, marking text, reference, web, mark the html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.

Resource URLs - HTTP
for example, a script on browserleaks highlights what firefox reveals when queried by a simple script running on the site (you can find the code in https://browserleaks.com/firefox#more).

CSS Houdini
li { background-image: paint(mycomponent, stroke, 10px); --highlights: blue; --lowlights: green; } note: with great power comes great responsibility!

A re-introduction to JavaScript (JS tutorial) - JavaScript
function countchars(elm) { if (elm.nodetype == 3) { // text_node return elm.nodevalue.length; } var count = 0; for (var i = 0, child; child = elm.childnodes[i]; i++) { count += countchars(child); } return count; } this highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name?

async function - JavaScript
this highlights the subtle difference between return foo; and return await foo; — return foo immediately returns foo and never throws, even if foo is a promise that rejects.

Mobile first - Progressive web apps (PWAs)
selectively include javascript libraries according to media query and feature tests (require.js is built in, which is helpful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices.

stroke-dashoffset - SVG: Scalable Vector Graphics
y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array computation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of th...

stroke-miterlimit - SVG: Scalable Vector Graphics
,-3 l0.75,3 m2, 0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of a large miter limit (8) --> <path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="8" id="p3" d="m1,29 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" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path stroke="pink" fill="none" stroke-width="0.05" 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 m1,19 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 m1,29 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...