Localization content best practices
me locales use a space between the number and the % symbol, some don't, some use a non-breaking space. splitting splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. when a composite string is needed, try to give the translators "room to move". word order if a string will contain a placeholder, always add the placeholder to the string to allow the localizer to change the word order if necessary. for example, it might seem ok in english to present the strings [username] says: to localizers simply as says: but this will cause serious issues in many other languages as the agent of an action often will not come in front of the verb, but some other position. for example in irish/gaelic the ...
...low the localizer to change the word order if necessary. for example, it might seem ok in english to present the strings [username] says: to localizers simply as says: but this will cause serious issues in many other languages as the agent of an action often will not come in front of the verb, but some other position. for example in irish/gaelic the correct order is be [username] at saying:. if a placeholder is present, this can be correctly localized as tá %s ag rádh: but not without. similarly, if the ui string is flash version, do not simply present the translator with version for translation. present the whole string or, if there is a significant need for a placeholder, use a placeholder. the word version may have to go before or after flash and one or both may need to be inflected. idiom id...
...g sinn url an inbhir seo and cha ghabh url an inbhir seo a pharsadh. unless there are significant savings of translation volume involved, it is usually easier and quicker for translators to handle these as fixed strings rather than composed strings, especially considering the time needed for locating, checking and potentially fixing composed strings. case and inflections (also see section on placeholders) many languages have features like noun classes (i.e. nouns belonging to different categories and are treated differently by the grammar), case and inflections (changes are made to a word to indicate differences in meaning or use) and so on. in modern english, such features are rare and are mainly restricted to plural -s and verb forms (e.g. go > went is a form of inflection). examples from oth...
...And 4 more matches

Progressive loading - Progressive web apps (PWAs)
and improve the performance of the app by progressively loading its resources. first meaningful paint it's important to deliver something meaningful to the user as soon as possible — the longer they wait for the page to load, the bigger the chance they will leave before waiting for everything to finish. we should be able to show them at least the basic view of the page they want to see, with placeholders in the places more content will eventually be loaded. this could be achieved by progressive loading — also known as lazy loading. this is all about deferring loading of as many resources as possible (html, css, javascript), and only loading those immediately that are really needed for the very first experience. bundling versus splitting many visitors won't go through every single page of a ...
...ll of the images in the best possible quality at the very beginning of viewing the site. this can be optimized. first of all, you should use tools or services similar to tinypng, which will reduce the file size of your images without altering the quality too much. if you're past that point, then you can start thinking about optimizing the image loading using javascript. we'll expain this below. ...
...ltering the quality too much. if you're past that point, then you can start thinking about optimizing the image loading using javascript. we'll expain this below. placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the browser to download them automatically, we can do it selectively via javascript. ...
...And 3 more matches

Setting up your own test automation environment - Learn web development
settimeout(function() { console.log(title); driver.quit(); }, 5000); }); }); }); } searchtextongoogle(); visit your lambdatest automation dashboard, to fetch your lambdatest's username and access key by clicking on the key icon on the top-right(see username and access keys). replace the {username} and {accesskey} placeholders in the code with your actual user name and access key values (and make sure you keep them secure). run the below command in your terminal to execute your test: node index.js the test will be sent to lambdatest, and the output of your test will be reflected on your lambdatest console. if you wish to extract these results for reporting purpose from lambdatest platform then you can do so by ...
...iver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } else { console.log('test failed'); } }); }); driver.quit(); from your browserstack automation dashboard, get your user name and access key (see username and access keys). replace the your-user-name and your-access-key placeholders in the code with your actual user name and access key values (and make sure you keep them secure). run your test with the following command: node bstack_google_test the test will be sent to browserstack, and the test result will be returned to your console. this shows the importance of including some kind of result reporting mechanism! now if you go back to the browserstack automation dash...
...d in the request url, as you'll see later). include the following lines just below the block that creates the driver object (let driver ...) : let sessionid; driver.session_.then(function(sessiondata) { sessionid = sessiondata.id_; }); finally, update the driver.sleep(2000) ... ...
...And 2 more matches

<input type="password"> - HTML: Hypertext Markup Language
forms involving sensitive information like passwords (e.g. login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an e...
...this must be an integ...
...planatory text nearby. use of a pattern is strongly recommended for password inputs, in order to help ensure that valid passwords using a wide assortment of character classes are selected and used by your users. with a pattern, you can mandate case rules, require the use of some number of digits and/or punctuation characters, and so forth. see the section validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the pl...
...And 2 more matches

<textarea> - HTML: Hypertext Markup Language
nd cols attributes to allow you to specify an exact size for the <textarea> to take. setting these is a good idea for consistency, as browser defaults can differ. default content entered between the opening and closing tags. <textarea> does not support the value attribute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. the non-deprecated values are...
...<textarea> elements anywhere within a document, not just as descendants of form elements. maxlength the maximum number of characters (utf-16 code units) that the user can enter. if this value isn't specified, the user can enter an unlimited number of characters. minlength the minimum number of characters (utf-16 code units) required that the user should enter. name the name of the control. ...
... number of characters (utf-16 code units) that the user can enter. if this value isn't specified, the user can enter an unlimited number of characters. minlength the minimum number of characters (utf-16 code units) required that the user should enter. name the name of the control. placeholder a hint to the user of what can be entered in the control. carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint. note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. readonly this boolean attribute indicates that the...
...And 2 more matches

l10n - Archive of obsolete content
ze strings appearing in the add-on's javascript code. usage to learn how to use this module to write localizable code, read the localization tutorial. note that you can't currently use localize strings appearing in content scripts or html files, but you can share the localized strings you want by assigning it's values to a json serializable object. globals functions get(identifier, count, placeholder1...n) this function takes a string parameter which it uses as an identifier to look up and return a localized string in the locale currently set for firefox. localized strings are supplied by the add-on developer in .properties files stored in the add-ons "locale" directory. the gettext tools uses "_" for the name of the function that retrieves localized strings. for compatibility with tools th...
...cult to maintain your code if you have many localizations, because any changes to the identifier values break all your .properties files. if you're supplying different localizations for a string depending on the number of items (that is, whether to use a singular or plural form) then get() takes a second integer parameter which indicates the number of items there are. you can supply one or more placeholders to get(), which are strings, such as proper names, that should not be translated themselves but instead should be inserted into the translated string. you can't use plurals and placeholders in the same expression: if you do, the placeholders will be ignored. parameters identifier : string a identifier for the localization of a particular string in the current locale. count : integer option...
... count : integer optional parameter. if you're supplying different localizations for a string for singular or plural forms, this parameter is the number of items there are in this case. var _ = require("sdk/l10n").get; console.log(_("child_id", 1)); console.log(_("child_id", 2)); see the tutorial on plural support for more information. note that if you use this parameter, you can't supply any placeholders. placeholder1...n : string optional parameters. if you do not include the count parameter, you can supply one or more placeholder strings that are to be inserted into the translated string at locations defined by the translator. if you supply multiple placeholders, each one is a separate string parameter. var _ = require("sdk/l10n").get; console.log(_("home_town", "alan", "norwich")); see t...
...1...n : string optional parameters. if you do not include the count parameter, you can supply one or more placeholder strings that are to be inserted into the translated string at locations defined by the translator. if you supply multiple placeholders, each one is a separate string parameter. var _ = require("sdk/l10n").get; console.log(_("home_town", "alan", "norwich")); see the tutorial on placeholder support for more information. returns string : the localized string referenced by the identifier parameter passed in, or the identifier itself if no referent for the identifier can be found. ...

Element: blur event - Web APIs
lost focus. the main difference between this event and focusout is that focusout bubbles while blur does not. the opposite of blur is focus. ...
... and focusout is that focusout bubbles while blur does not. the opposite of blur is focus. ...
...('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true. ...
...und = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true. ...

Element: focus event - Web APIs
eived focus. the main difference between this event and focusin is that focusin bubbles while focus does not. the opposite of focus is blur. ...
... and focusin is that focusin bubbles while focus does not. the opposite of focus is blur. ...
...r('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true. ...
...ound = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true. ...

ARIA: textbox role - Accessibility
is case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contenteditable attribute ensures the text node is editable. <!-- simple text input field --> <div id="txtboxlabel">enter your five-digit zipcode</div> <div role="textbox" contenteditable="true" aria-placeholder="5-digit zipcode" aria-labelledby="txtboxlabel"></div> <!-- multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features. <label for="txt...
...multi-line text area --> <div id="txtboxmultilinelabel">enter the tags for the article</div> <div role="textbox" contenteditable="true" aria-multiline="true" aria-labelledby="txtboxmultilinelabel" aria-required="true"></div> semantic elements are more concise and require no javascript to support textbox features. <label for="txtbox">enter your five-digit zipcode</label> <input type="text" placeholder="5-digit zipcode" id="txtbox"/> <!-- multi-line text area --> <label for="txtboxmultiline">enter the tags for the article</label> <textarea id="txtboxmultiline" required></textarea> where a text field is read-only, indicated this by setting aria-readonly="true" on the element. associated aria properties aria-activedescendent attribute taking as it's value the id of is either a descen...
... input, with the expectation that enter or return will create a line break rather than submitting the form. aria does not alter the behavior of the element; rather this feature must be controlled by the developer. if false is set, or the the attribute is omitted and defaults to false, the user expectation is that the control is a single line text box, and enter or return submits the form. aria-placeholder attribute represents a hint (word or phrase) to the user about what to enter into the text field. the hint should be a sample value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas place...
...e value or a brief description of the expected format.this information should not be used as a substitute for a label: a label is focusable, permanent, indicates what kind of information is expected, and increases the hit area for setting focus on the control, whereas placeholder text is only temporary hint about the expected value, which if implemented incorrectly can decrease accessibility. the placeholder should be visible when the control's value is the empty string such as when the control first receives focus and when users remove a previously-entered value. instead of using aria-placeholder, use the semantic <input type="text"> or <textarea> with a placeholder attribute. aria-readonly attribute indicates that the user cannot modify the value of the text field. instead of using aria-readonly,...

:disabled - CSS: Cascading Style Sheets
state, in which it can be activated or accept focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...pt focus. /* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form. it uses the javascript change event to let the user enable/disable the billing fields. ...
...ping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('bi...

Index - Archive of obsolete content
tom preferences sync when preferences sync is enabled, firefox sync will synchronize preferences between the same application based on a whitelist. that means preferences between firefox and fennec, for instance, are never synced. to sync preferences between firefoxes, fennecs, thunderbirds, etc., ensure the prefs are whitelisted. 476 force rtl (this is a temporary placeholder/stub for the force rtl page) 477 frequently asked questions needsupdate, svg, svg faq we currently maintain two documents to help answer this question: a status page for svg in firefox 1.5+ and a status page for svg in the development trunk. 478 gre gecko, xul, xulrunner the framework for embedding mozilla technologies was at one point called the gre (gec...
... persist xul attributes, xul reference no summary! 1008 persistence xul attributes, xul reference no summary! 1009 phase xul attributes, xul reference no summary! 1010 pickertooltiptext xul attributes, xul reference no summary! 1011 pinned xul, xul attribute, xul reference no summary! 1012 placeholder xul attributes, xul reference no summary! 1013 popup xul attributes, xul reference no summary! 1014 popup.left xul attributes, xul reference no summary! 1015 popup.position xul attributes, xul reference no summary! 1016 popup.top xul attributes, xul reference no summary! 1017 popupalign ...
...1515 pageid xul properties, xul reference no summary! 1516 palette xul properties, xul reference no summary! 1517 parentcontainer xul properties, xul reference no summary! 1518 persist xul properties, xul reference no summary! 1519 persistence xul properties, xul reference no summary! 1520 placeholder xul properties, xul reference no summary! 1521 pmindicator xul properties, xul reference no summary! 1522 popup xul properties, xul reference no summary! 1523 popupboxobject xul properties, xul reference no summary! 1524 popupopen xul properties, xul reference no summary! 1525 position xul...

WAI-ARIA basics - Learn web development
is example — the <input> element has been given the attribute aria-label, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a <label> element. in cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design. <input type="search" name="q" placeholder="search query" aria-label="search through site content"> now if we use voiceover to look at this example, we get some improvements: the search form is called out as a separate item, both when browsing through the page, and in the landmarks menu. the label text contained in the aria-label attribute is read out when the form input is highlighted. beyond this, the site is more likely to be ac...
...e="name" id="name" aria-required="true"> <input type="number" name="age" id="age" aria-required="true"> if you save the example now and test it with a screenreader, you should hear something like "enter your name star, required, edit text". it might also be useful if we give screenreader users and sighted users an idea of what the age value should be. this is often presented as a tooltip, or placeholder inside the form field perhaps. wai-aria does include aria-valuemin and aria-valuemax properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the html5 placeholder attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. update your number input like ...
... wai-aria also enables some advanced form labelling techniques, beyond the classic <label> element. ...

A first splash into JavaScript - Learn web development
two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later). note: you'll learn a lot more about variables/constants later on in the course, starting with the next article. functions next, add the following below your previous javascript: function checkguess() { alert('i am a placeholder'); } functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. this is really useful. there are a number of ways to define functions, but for now we'll concentrate on one simple type. here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. after that we put ...
...ode that we want to run whenever we call the function. when we want to run the code, we type the name of the function followed by the parentheses. let's try that now. save your code and refresh the page in your browser. then go into the developer tools javascript console, and enter the following line: checkguess(); after pressing return/enter, you should see an alert come up that says "i am a placeholder"; we have defined a function in our code that creates an alert whenever we call it. note: you'll learn a lot more about functions later in the course. operators javascript operators allow us to perform tests, do math, join strings together, and other such things. if you haven't already done so, save your code, refresh the page in your browser, and open the developer tools javascript console...
...we want it to check whether a player's guess is correct or not, and respond appropriately. at this point, replace your current checkguess() function with this version instead: function checkguess() { let userguess = number(guessfield.value); if (guesscount === 1) { guesses.textcontent = 'previous guesses: '; } guesses.textcontent += userguess + ' '; if (userguess === ran...

Ember app structure and componentization - Learn web development
welcome page we saw in the previous article, when we first navigated to our server at localhost:4200. however, we don't want this. instead, we want it to contain the todomvc app structure. to start with, delete the contents of application.hbs and replace them with the following: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > </section> note: aria-label provides a label for assistive technology to make use of — for example, for a screenreader to read out. this is useful in such cases where we have an <input> being used with no corresponding html text that could be turned into a label. when you save application.hbs, the development server you started earlier will automat...
...earlier will automatically rebuild the app and refresh the browser. the rendered output should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app. ...
...ents directory: now that we have all of our component structure files, we can cut and paste the html for each component out of the application.hbs file and into each of those components, and then re-write the application.hbs to reflect our new abstractions. ...

AddonManager
promise? getinstallforfile( in nsifile file,...
... promise? getinstallforfile( in nsifile file, in installcallback? callback, in string mimetype ) parameters file...
... promise? getinstallforfile( in nsifile file, in installcallback? callback, in string mimetype ) parameters file the nsifile where the add-on is located callback a callback to pass the addo...

Storage
ral_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); results to be returned however, if you need to get results back, you should create the statement with the mozistorageconnection.createstatement() api like this in javascript: var statement = dbconn.createstatement("select * from table_name where column_name = :parameter"); this example uses a named placeholder called "parameter" to be bound later (described in binding parameters). similarly, the c++ looks like this: nscomptr<mozistoragestatement> statement; rv = dbconn->createstatement(ns_literal_cstring("select * from table_name where column_name = ?1"), getter_addrefs(statement)); ns_ensure_success(rv, rv); this example uses the numbered placeholder indexed by zero for...
...rameters are much easier to use. note: if you need to execute a statement multiple times, caching the result of createstatement will give you a noticeable performance improvement because the sql query does not need to be parsed each time. binding parameters in order to effectively use the statements that you create, you have to bind values to the parameters you placed in the statement. a given placeholder can appear multiple times in the same statement, and all instances of it will be replaced with the bound value. if you neglect to bind a value to a parameter, it will be interpreted as null. you should never try to construct sql statements on the fly with values inserted in them. by binding the parameters, you prevent possible sql injection attacks since a bound parameter can never be executed a...
...for numeric and non-numeric columns. do not put the :boundparametername within apostrophes, because that the binding mechanism does that for you. you can still use this helper object by manually creating the statement wrapper, mozistoragestatementwrapper, which is provided in gecko 1.9.1 and later. using named parameters in c++ is a lot more difficult, so it's generally accepted to use numerical placeholders instead. the example below uses mozistoragestatement.bindint32parameter(). the full list of binding functions can be found with the mozistoragestatement documentation. c++ example: nscomptr<mozistoragestatement> statement; rv = mdbconn->createstatement(ns_literal_cstring("select * from table_name where id = ?1"), getter_addrefs(statement)); ns_ensure_success(rv, r...

CustomElementRegistry.whenDefined() - Web APIs
s defined. if the custom element is already defined, the promise is resolved immediately. exceptions exception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. examples this example uses whendefined() to detect when the custom elements that make up a menu are defined. ...
...ception description syntaxerror if the provided name is not a valid custom element name, the promise rejects with a syntaxerror. examples this example uses whendefined() to detect when the custom elements that make up a menu are defined. the menu displays placeholder content until the actual menu content is ready to display. <nav id="menu-container"> <div class="menu-placeholder">loading...</div> <nav-menu> <menu-item>item 1</menu-item> <menu-item>item 2</menu-item> ... <menu-item>item n</menu-item> </nav-menu> </nav> const container = document.getelementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined. const undefinedelements = container.queryselect...
...elementbyid('menu-container'); const placeholder = container.queryselector('.menu-placeholder'); // fetch all the children of menu that are not yet defined. const undefinedelements = container.queryselectorall(':not(:defined)'); const promises = [...undefinedelements].map( button => customelements.whendefined(button.localname) ); // wait for all the children to be upgraded, // then remove the placeholder. await promise.all(promises); container.removechild(placeholder); specifications specification status comment html living standardthe definition of 'customelements.whendefined()' in that specification. living standard initial definition. ...

Navigator.registerProtocolHandler() - Web APIs
cheme, url, title); note: recently updated to navigator.registerprotocolhandler(scheme, url), but no browsers currently support this version. parameters scheme a string containing the protocol the site wishes to handle. for example, you can register to handle sms text message links by passing the "sms" scheme. url a string containing the url of the handler. this url must include %s, as a placeholder that will be replaced with the escaped url to be handled. note: the handler url must us the https scheme. older browsers also supported http. title a human-readable title string for the handler. this will be displayed to the user, such as prompting “allow this site to handle [scheme] links?” or listing registered handlers in the browser’s settings. note: the title has been removed f...
... the registration. this might happen if: the registered scheme (protocol) is invalid, such as a scheme the browser handles itself (https:, about:, etc.) the handler url’s origin does not match the origin of the page calling this api. the browser requires that this function is called from a secure context. the browser requires that the handler's url be over https. syntaxerror the %s placeholder is missing from the handler url. permitted schemes for security reasons, registerprotocolhandler() restricts which schemes can be registered. a custom scheme may be registered as long as: the custom scheme's name begins with web+ the custom scheme's name includes at least 1 letter after the web+ prefix the custom scheme has only lowercase ascii letters in its name. for example, web+bur...
....example.com, you can register a protocol handler for it to handle web+burger: links, like so: navigator.registerprotocolhandler("web+burger", "https://burgers.example.com/?burger=%s", "burger handler"); this creates a handler that lets web+burger: links send the user to your site, inserting the accessed burger url into the %s placeholder. this script must be run from the same origin as the handler url (so any page at https://burgers.example.com), and the handler url must be http or https. the user will be notified that your code asked to register the protocol handler, so that they can decide whether or not to allow it. see the screenshot below for an example on google.co.uk: specifications specification status ...

ValidityState.patternMismatch - Web APIs
e <input> is of type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
...r expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true. ...
...ch property will be true. examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, patternmisma...

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
id-auto-flow: dense; list-style: none; margin: 1em auto; padding: 0; max-width: 800px; } .wrapper li { border: 1px solid #ccc; } .wrapper li.landscape { grid-column-end: span 2; } .wrapper li img { display: block; object-fit: cover; width: 100%; height: 100%; } <ul class="wrapper"> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.c...
...mg src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="p...
...an example is the definition list in this next example. definition lists are an interesting challenge to style as they are flat, there is nothing wrapping the groups of dt and dd items. ...

HTML attribute: pattern - HTML: Hypertext Markup Language
f the string, which is slightly different from javascript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...e are matching against the entire value, not just any subset, as if a ^(?: were implied at the start of the pattern and )$ at the end. ...
...ttern and )$ at the end. examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each. if the values are too long or too short, or contain characters that aren't digits, the patternm...

Using templates and slots - Web Components
e it, meaning that at the moment it is even less useful than a regular paragraph! we can make it possible to display different text in each element instance in a nice declarative way using the <slot> element. this has more limited support than <template>, available since chrome 53, opera 40, safari 10, firefox 59, and edge 79. slots are identified by their name attribute, and allow you to define placeholders in your template that can be filled with any markup fragment you want when the element is used in the markup. so, if we want to add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-text">my default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the browser doesn't support slots...
...lement-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); using the <element-details> custom element with named slots now let’s take that <element-details> element and actually use it in our document: <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for holding client- side content that is not...
... <i class="desc"><slot name="description">need description</slot></i> </span> </summary> <div class="attributes"> <h4><span>attributes</span></h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> <element-details> <span slot="element-name">slot</span> <span slot="description">a placeholder inside a web component that users can fill with their own markup, with the effect of composing different dom trees together.</span> <dl slot="attributes"> <dt>name</dt> <dd>the name of the slot.</dd> </dl> </element-details> <element-details> <span slot="element-name">template</span> <span slot="description">a mechanism for ...

How to convert an overlay extension to restartless - Archive of obsolete content
that way you build elements hierarchy with not much interaction with dom, plus you can see tag properties and it children in a nice, structured way, just like in overlay.xul. you can find working example here. it involves using of fire...
...id': 'opacity-range', 'type': 'range', 'min': '0', 'max': '10'}) ), hbox({'id': 'pixel-coords', 'class': 'pixel-hbox'}, label({'control': 'coord-x', 'value': 'x:'}), textbox({'id': 'coord-x', 'class': 'coord-box', 'placeholder' : '0'}), label({'control': 'coord-y', 'value': 'y:'}), textbox({'id': 'coord-y', 'class': 'coord-box', 'placeholder': '0'}) ... that way you build elements hierarchy with not much interaction with dom, plus you can see tag properties and it children in a nice, structured way, just like in overlay.xul. you can find working example here. it involves using of firebug.sdk xul.js with few modifications. step 7: manually handle global css stylesheets any global css style sheets which you are using will ...

JavaScript Object Management - Archive of obsolete content
such global namespace pollution. the first step to good javascript object management is having a namespace, or a javascript object that contains our code and data, that you know will not conflict with firefox code or other extensions. namespace declaration is best located in a file of its own, so that you have this one js file that should be included in all of your xul files. we'll be using the placeholder 〈namespace〉 below. this needs to be replaced with an identifier name which is unique to your add-on. if your add-on is called sergeant pepper, for instance, then sgtpepper would be a good namespace name. /** * 〈namespace〉 namespace. */ if (typeof 〈namespace〉 == "undefined") { var 〈namespace〉 = {}; }; note: the naming standard that we normally follow is that the first ...
...: or resource: url pointing to a file on the disk. in particular, chrome: urls (even those that point to a file outside a jar archive) are not valid. to get a better idea, let's look at the code of the modified hello world example. we have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the previous exercise. here again we're using a placeholder, 〈modulenamespace〉, for the identifier name that you'll need to choose. var exported_symbols = [ "〈modulenamespace〉" ]; const { classes: cc, interfaces: ci } = components; /** * 〈modulenamespace〉 namespace. */ var 〈modulenamespace〉 = {}; this should all be familiar enough. we're declaring the namespace we'll use at the module level. we need a separate namespace for the ...

Index - Archive of obsolete content
276 persist xul attributes, xul reference no summary! 277 persistence xul attributes, xul reference no summary! 278 phase xul attributes, xul reference no summary! 279 pickertooltiptext xul attributes, xul reference no summary! 280 pinned xul, xul attribute, xul reference no summary! 281 placeholder xul attributes, xul reference no summary! 282 popup xul attributes, xul reference no summary! 283 popup.left xul attributes, xul reference no summary! 284 popup.position xul attributes, xul reference no summary! 285 popup.top xul attributes, xul reference no summary! 286 popupalign ...
... 784 pageid xul properties, xul reference no summary! 785 palette xul properties, xul reference no summary! 786 parentcontainer xul properties, xul reference no summary! 787 persist xul properties, xul reference no summary! 788 persistence xul properties, xul reference no summary! 789 placeholder xul properties, xul reference no summary! 790 pmindicator xul properties, xul reference no summary! 791 popup xul properties, xul reference no summary! 792 popupboxobject xul properties, xul reference no summary! 793 popupopen xul properties, xul reference no summary! 794 position xul prop...

::-ms-clear - Archive of obsolete content
*/ /* the cross can be hidden by setting the display attribute as "none" */ } result the following screenshot shows wha...
...*/ /* the cross can be hidden by setting the display attribute as "none" */ } result the following screenshot shows what the feature will look like: specifications not part of any specification. ...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
de 8-bit characters that have specific meaning in the context of urls. it is sometimes called url encoding. the encoding consists of substitution: a '%' followed by the hexadecimal representation of the ascii value of the replace character. 321 pixel design, glossary, graphics a pixel is the smallest building block of a graphical display like a computer screen. ...
... of urls. it is sometimes called url encoding. the encoding consists of substitution: a '%' followed by the hexadecimal representation of the ascii value of the replace character. 321 pixel design, glossary, graphics a pixel is the smallest building block of a graphical display like a computer screen. 322 placeholder names cryptography, glossary, security placeholder names are commonly used in cryptography to indicate the participants in a conversation, without resorting to terminology such as "party a," "eavesdropper," and "malicious attacker." 323 plaintext cryptography, glossary, security plaintext refers to information that is being used as an input to an encryption algorithm, or to ciphertext that has been decrypted. 324 p...

Third-party APIs - Learn web development
ct the api vendor than the user. you'll find a line similar to the following in the mapquest api example: l.mapquest.key = 'your-api-key-here'; this line specifies an api or developer key to use in your application — the developer of the application must apply to get a key, and then include it in their code to be allowed access to the api's functionality. in our example we've just provided a placeholder. note: when creating your own examples, you'll use your own api key in place of any placeholder. other apis may require that you include the key in a slightly different way, but the pattern is relatively similar for most of them. requiring a key enables the api provider to hold users of the api accountable for their actions. when the developer has registered for a key, they are then known to...
...ectory. next, you need to go to the mapquest developer site, create an account, and then create a developer key to use with your example. (at the time of writing, it was called a "consumer key" on the site, and the key creation process also asked for an optional "callback url". you don't need to fill in a url here: just leave it blank.) open up your starting file, and replace the api key placeholder with your key. changing the type of map there are a number of different types of map that can be shown with the mapquest api. to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-style map. try some other values too. the tilelayer reference page shows the different available options, plus a lot more information. adding diff...

Silly story generator - Learn web development
create three new variables called xitem, yitem, and zitem, and make them equal to the result of calling randomvaluefromarray() on your three arrays (the result in each case will be a random item out of each array it is called on). for example you can call the function and get it to return one random string out of insertx by writing randomvaluefromarray(insertx). ...
...as a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice. inside the first if block, add another string replacement method call to replace the name 'bob' found in the newstory string with the name variable. ...

Handling text — strings in JavaScript - Learn web development
template literals simplify this enormously: output = `i like the song "${ song }". i gave it a score of ${ score/highestscore * 100 }%.`; there is no more need to open and close multiple string pieces — the whole lot can just be wrapped in a single pair of backticks. when you want to include a variable or expression inside the string, you include it inside a ${ } construct, which is called a placeholder. ...
... the third one calculates a percentage result and rounds it to the nearest integer. the fourth one includes uses a ternary operator to check whether the score is above a certain mark and print a pass or fail message depending on the result. ...

Ember interactivity: Events, classes and state - Learn web development
at we typed in, and we can save our todo and pass that text along to the todo list component to display. we can capture the keydown event via the on modifier, which is just ember syntactic sugar around addeventlistener and removeeventlistener (see this explanation if needed). add the new line shown below to your header.hbs file: <input class='new-todo' aria-label='what needs to be done?' placeholder='what needs to be done?' autofocus {{on 'keydown' this.onkeydown}} > this new attribute is inside double curly braces, which tells you it is part of ember's dynamic templating syntax. the first argument passed to on is the type of event to respond to (keydown), and the last argument is the event handler — the code that will run in response to the keydown event firing. as you may expect fro...
..., add the following import line to header.js, beneath the two existing import lines: import { inject as service } from '@ember/service'; with this import in place, we can now make the todo-data service available inside the headercomponent class via the todos object, using the @service decorator. add the following line just below the opening export... line: @service('todo-data') todos; now the placeholder alert(text); line can be replaced with a call to our new add() function. replace it with the following: this.todos.add(text); if we try this out in the todo app in our browser (npm start, go to localhost:4200), it will look like nothing happens after hitting the enter key (although the fact that the app builds without any errors is a good sign). using the ember inspector however, we can see tha...

PRThreadPriority
a thread's priority setting. syntax #include <prthread.h> typedef enum prthreadpriority { pr_priority_first = 0, pr_priority_low = 0, pr_priority_normal = 1, pr_priority_high = 2, pr_priority_urgent = 3, pr_priority_last = 3 } prthreadpriority; enumerators pr_priority_first placeholder. pr_priority_low the lowest possible priority. this priority is appropriate for threads that are expected to perform intensive computation. ...
...is appropriate for threads that are expected to perform intensive computation. pr_priority_normal the most commonly expected priority. pr_priority_high slightly higher priority than pr_priority_normal. this priority is for threads performing work of high urgency but short duration. pr_priority_urgent highest priority. only one thread at a time typically has this priority. pr_priority_last placeholder description in general, an nspr thread of higher priority has a statistically better chance of running relative to threads of lower priority. however, because of the multiple strategies nspr uses to implement threading on various host platforms, nspr priorities are not precisely defined. at best they are intended to specify a preference in the amount of cpu time that a higher-priority thread m...

An overview of NSS Internals
ntext handle while providing all the parameters required for the operation, then call an “update” function multiple times to pass subsets of the input to nss. the data will be processed and either returned directly or sent to a callback function registered in the context. when done, you call a finalization function that will flush out any pending data and free the resources. this line is a placeholder for future sections that should explain how libpkix works and is designed. if you want to work with nss, it's often helpful to use the command line utilities that are provided by the nss developers. there are tools for managing nss databases, for dumping or verifying certificates, for registering pkcs#11 modules with a database, for processing cms encrypted/signed messages, etc. for example...
... use the older database file format by default, where each application has its own nss database. if you require a copy of a certificate stored in an nss database, including its private key, you can use pk12util to export it to the pkcs#12 file format. if you require it in pem format, you could use the openssl pkcs12 command (that's not nss) to convert the pkcs#12 file to pem. this line is a placeholder for how to prepare a database, how to dump a cert, and how to convert data. you might have been motivated to work with nss because it is used by the mozilla applications such as firefox, thunderbird, etc. if you build the mozilla application, it will automatically build the nss library, too. however, if you want to work with the nss command line tools, you will have to follow the standalone ns...

Index
ntext handle while providing all the parameters required for the operation, then call an “update” function multiple times to pass subsets of the input to nss. the data will be processed and either returned directly or sent to a callback function registered in the context. when done, you call a finalization function that will flush out any pending data and free the resources. this line is a placeholder for future sections that should explain how libpkix works and is designed. if you want to work with nss, it's often helpful to use the command line utilities that are provided by the nss developers. there are tools for managing nss databases, for dumping or verifying certificates, for registering pkcs#11 modules with a database, for processing cms encrypted/signed messages, etc. for example...
... use the older database file format by default, where each application has its own nss database. if you require a copy of a certificate stored in an nss database, including its private key, you can use pk12util to export it to the pkcs#12 file format. if you require it in pem format, you could use the openssl pkcs12 command (that's not nss) to convert the pkcs#12 file to pem. this line is a placeholder for how to prepare a database, how to dump a cert, and how to convert data. you might have been motivated to work with nss because it is used by the mozilla applications such as firefox, thunderbird, etc. if you build the mozilla application, it will automatically build the nss library, too. however, if you want to work with the nss command line tools, you will have to follow the standalone ns...

mozIRegistry
creating the services itself) would suffice. worst case, clients would obtain the moziregistry singleton via some other means (i.e., a "nsgetregistry" function). architecture this diagram illustrates the various components that you will be using to interoperate with other mozilla components. some are for illustrative purposes (the lighter-colored boxes near the top of the picture). these are placeholders for the types of components you're designing and implementing. i'll talk about them to provide examples of how you should use the other boxes. these components (indicated by the darker-colored boxes) are the services you'll be using. i'll be explaining the rationale for the design and implementation of these components in this document. lastly, there's one component (labelled "mozrdfregistry/nsi...
...ccess other components is via the service manager. that thing isn't yet covered in this document. see the note above. in this section, i'll discuss a number of different components, their requirements for dynamically binding to other components, and how they might utilize the core xpcom components to satisfy those requirements. i18n xul/xptoolkit app shell clsid binding protocols this is a placeholder for potential encapsulations of particular idioms for storing clsid information in the registry and using that information, along with nsrepository, to implement some instance creation protocol on top of the core xpcom services. i think these things can be divided into two categories, according to the basic service they provide: identifying the implementers of a given interface. figuring out a...

nsIAppShell
inout string argv ); parameters argc the number of parameters passed in on the command line. argv a direct reference to the parameter array. dispatchnativeevent() obsolete since gecko 1.9 (firefox 3) after event dispatch execute app specific code. void dispatchnativeevent( in prbool arealevent, in voidptr aevent ); parameters arealevent event is real or a null placeholder (macintosh). aevent void pointer to native event structure. exit() exit the handle event loop. void exit(); parameters none. favorperformancehint() give hint to native event queue notification mechanism. if the native platform needs to tradeoff performance vs. native event starvation this hint tells the native dispatch code which to favor. the default is to prevent native event starvation. call...
...y is only used when favorperfoverstarvation is pr_false. it is the amount of time in milliseconds to wait before the pr_false actually takes effect. getnativeevent() obsolete since gecko 1.9 (firefox 3) after event dispatch execute app specific code. void getnativeevent( in prboolref arealevent, in voidptrref aevent ); parameters arealevent event is real or a null placeholder (macintosh). aevent void pointer to native event structure. listentoeventqueue() obsolete since gecko 1.9 (firefox 3) an event queue has been created or destroyed. hook or unhook it from your system, as necessary. void listentoeventqueue( in nsieventqueue aqueue, in prbool alisten ); parameters aqueue the queue in question. alisten pr_true for a new queue wanting ...

nsIConsoleService
ll work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmessagearray( [array, size_is(count)] out nsiconsolemessage messages, out pruint32 count ); parameters messages an array of logged messages. count the number of messages in the array. ...
... note: see the code samples below for how to call getmessagearray. logmessage() void logmessage( in nsiconsolemessage message ); parameters message the nsiconsolemessage to log. logstringmessage() a convenient method for logging simple messages. ...

nsISelectionPrivate
see bug 35296 and bug 199412 native code only! interlineposition boolean type short returns the type of the selection (see nsiselectioncontroller for available constants). read only. ...
...textrangestyleref textrangestyle); native code only! void startbatchchanges(); wstring tostringwithformat(in string formattype, in unsigned long flags, in print32 wrapcolumn); attributes attribute type description cancacheframeoffset boolean frame offset cache can be used just during calling nseditor::endplaceholdertransaction. endplaceholdertransaction will give rise to reflow/refreshing view/scroll, and call times of nstextframe::getpointfromoffset whose return value is to be cached. see bug 35296 and bug 199412 native code only! interlineposition boolean type short returns the type of the selection (see nsiselectioncontroller for available constants). read only. constants consta...

nsIXULTemplateQueryProcessor
cessor. the query is expected to consist of either text or dom nodes that, when executed by a call to the generateresults() method, will allow the generation of a list of results. the template builder will supply two variables, the reference variable and the member variable to further indicate what part of the datasource is to be examined in addition to the query itself. the reference is always a placeholder for the starting point and the member is always a placeholder for the end points (the results). the reference point is important when generating output recursively, as the query will be the same for each iteration, however, the reference point will differ. for instance, when examining an xml source, an xml query processor might begin at the node referred by the reference variable and end at a lis...
...n. if null is returned, the query will be ignored. the template builder will call this method once for each query within the template, before any results can be generated using generateresults(), but after initializeforbuilding() has been called. this method should not be called again for the same query unless the template is rebuilt. the reference variable may be used by the query processor as a placeholder for the reference point, or starting point in the query. the member variable is determined from the member attribute on the template, or from the uri in the first action's rule if that attribute is not present. a rule processor may use the member variable as a hint to indicate what variable is expected to contain the results. nsisupports compilequery( in nsixultemplatebuilder abuilder, in nsi...

Document.forms - Web APIs
living standard document object model (dom) level 2 html specificationthe definition of 'document.forms' in that specificatio...
... living standard document object model (dom) level 2 html specificationthe definition of 'document.forms' in that specification. obsolete initial definition. browser compatibili...

Element: focusin event - Web APIs
focus. the main difference between this event and focus is that focusin bubbles while focus does not. the opposite of focusin is focusout. ...
...focus is that focusin bubbles while focus does not. the opposite of focusin is focusout. ...

Element: focusout event - Web APIs
focus. the main difference between this event and blur is that focusout bubbles while blur does not. the opposite of focusout is focusin. ...
...blur is that focusout bubbles while blur does not. the opposite of focusout is focusin. ...

HTMLInputElement - Web APIs
o a negative number, an exception will be thrown.) pattern string: returns / sets the element's pattern attribute, containing a regular expression that the control's value is checked against. use the title attribute to describe the pattern to help the user. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user of what can be entered in the control. the placeholder text must not contain carriage returns or line-feeds. this attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. readonly boolean: returns / sets the element's readonly attribut...
...abindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on htmlelement. the following properties are now obsolete: align and usemap. the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown(). document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification. ...

HTMLTextAreaElement - Web APIs
acters the user can enter. this constraint is evaluated only when the value changes. minlength long: returns / sets the element's minlength attribute, indicating the minimum number of characters the user can enter. this constraint is evaluated only when the value changes. name string: returns / sets the element's name attribute, containing the name of the control. placeholder string: returns / sets the element's placeholder attribute, containing a hint to the user about what to enter in the control. readonly boolean: returns / sets the element's readonly attribute, indicating that the user cannot modify the value of the control. required boolean: returns / sets the element's required attribute, indicating that the user must specify a value b...
...s comment html living standardthe definition of 'htmltextareaelement' in that specification. living standard html5the definition of 'htmltextareaelement' in that specification. recommendation the attributes tabindex and accesskey, as well as the methods blur() and focus() are now defined on htmlelement. the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange(). document object model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification. obsolete ...

Index - Web APIs
property returns a htmloptionscollection of the <option> elements contained by the <select> element. 1887 htmlselectelement.remove() api, html dom, htmlselectelement, method, reference the htmlselectelement.remove() method removes the element at the specified index from the options collection for this select element. 1888 htmlselectelement.selectedindex placeholder 1889 htmlselectelement.selectedindex api, html dom, html forms, htmlselectelement, property, reference the htmlselectelement.selectedindex is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple. the value -1 indicates that no element is selected. 1890 htmlselectelement.selectedoptions api, html dom, ...
... this slot, and if the flatten option is set to true, the assigned nodes of any other slots that are descendants of this slot. if no assigned nodes are found, it returns the slot's fallback content. 1898 htmlslotelement.name api, htmlslotelement, property, reference, name, shadow dom the name property of the htmlslotelement interface returns or sets the slot name. a slot is a placeholder inside a web component that users can fill with their own markup. 1899 htmlslotelement: slotchange event event, reference, web components, events, shadow dom, slotchange the slotchange event is fired on an htmlslotelement instance (<slot> element) when the node(s) contained in that slot change. 1900 htmlsourceelement api, html dom, interface, reference th...

Pseudo-classes - CSS: Cascading Style Sheets
html living standard living standard defines when particular selectors match html elements. ...
... :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen. html living standard living standard defines when particular selectors match html elements. selectors level 4 working draft defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where(). changed :empty to behave like :-moz-only-whitespace . no significant change for other pseudo-classes defined in selectors level 3 and html5 (though semantic meaning not taken over). html5 recommendation copies the relevant section from the canonical (whatwg) html spec. css basic user interface ...

HTML attribute: rel - HTML: Hypertext Markup Language
if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. alternate indicates an alternate representation of the current document. valid for link, a, and area, the meaning depends on the values of the other attributes. ...
...if several icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. license valid on the <a>, <area>, <form>, <link> elements, the license value indicates that the hyperlink leads to a document describing the licensing informat...

HTML documentation index - HTML: Hypertext Markup Language
colgroup> element defines a group of columns within a table. 83 <command>: the html command element command, html, html commands, html5, html:element, html:element reference, obsolete the html command element (<command>) represents a command which the user can invoke. commands are often used as part of a context menu or toolbar. 84 <content>: the shadow dom content placeholder element (obsolete) content, dom, deprecated, element, html, html web components, placeholder, reference, web, web components, shadow dom the html <content> element—an obsolete part of the web components suite of technologies—was used inside of shadow dom as an insertion point, and wasn't meant to be used in ordinary html. 85 <data> element, html, html text-level seman...
...s, reference, shadow root, web components, shadow, shadow dom the html <shadow> element—an obsolete part of the web components technology suite—was intended to be used as a shadow dom insertion point. 191 <slot> element, html, html web components, reference, web components, shadow dom, slot the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together. 192 <small>: the side comment element element, html, html text-level semantics, reference, web, font-size the html <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. by ...

Template literals (Template strings) - JavaScript
hem. they were called "template strings" in prior editions of the es2015 specification. syntax `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag`string text ${expression} string text` description template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes. template literals can contain placeholders. these are indicated by the dollar sign and curly braces (${expression}). the expressions in the placeholders and the text between the backticks (` `) get passed to a function. the default function just concatenates the parts into a single string. if there is an expression preceding the template literal (tag here), this is called a tagged template. in that case, the tag expression (usually a fu...
...ugar, making substitutions like this more readable: let a = 5; let b = 10; console.log(`fifteen is ${a + b} and not ${2 * a + b}.`); // "fifteen is 15 and // not 20." nesting templates in certain cases, nesting a template is the easiest (and perhaps more readable) way to have configurable strings. within a backticked template, it is simple to allow inner backticks simply by using them inside a placeholder ${ } within the template. for instance, if condition a is true, then return this templated literal. in es5: let classes = 'header'; classes += (islargescreen() ? '' : item.iscollapsed ? ' icon-expander' : ' icon-collapser'); in es2015 with template literals and without nesting: const classes = `header ${ islargescreen() ? '' : (item.iscollapsed ? 'icon-expander' : 'icon-collapser') ...

/loader - Archive of obsolete content
strapping the loader itself. they are low level helpers and should be used only during loader bootstrap. module() the module() function takes a module id and uri and creates a module instance object that is exposed as the module variable in the module scope. let module = module('foo/bar', 'resource:///modules/foo/bar.js'); note that this won't actually load any module code, it just creates a placeholder for it. the section below describes how to load the module. load() the load() function takes loader and loads the given module into it: let loader = loader(options); let module = module('foo/bar', 'resource:///modules/foo/bar.js'); load(loader, module); sandbox() the sandbox() function is a utility function for creating js sandboxes. it is used by the loader to create scopes into which modu...

Promises - Archive of obsolete content
ask.spawn(function* () { // open the connection. let db = yield sqlite.openconnection({ path: database_path }); try { // start a transaction to insert the data. yield db.executetransaction(function* () { for (let node of nodes) // insert the node's data, using an automatically-cached, // pre-compiled statement, and parameter placeholders. yield db.executecached( "insert into nodes (id, owner, key, value) \ values (:id, :owner, :key, :value);", { params: { id: node.id, owner: node.owner.id, key: node.key, value: node.value }}); }); // perform ...

Force RTL - Archive of obsolete content
(this is a temporary placeholder/stub for the force rtl page) download force rtl making sure your theme works with rtl locales ehsan's force rtl page ...

emptytext - Archive of obsolete content
« xul reference home emptytext deprecated since gecko 2 type: string a string that appears in the textbox when it has no value. this is superseded by the placeholder attribute in gecko 2.0. the old name is retained for compatibility, but you should update your code. ...

Attribute (XUL) - Archive of obsolete content
onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sort...

emptyText - Archive of obsolete content
the old name is retained for compatibility, but you should update your code. ...

textbox.label - Archive of obsolete content
« xul reference label type: string sets the label attribute. gets the label attribute if it is present and not empty. otherwise it returns the value of the associated label element, if applicable. otherwise it returns the placeholder or emptytext property. the getter is mostly useful for screen readers. note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element. ...

Property - Archive of obsolete content
maxwidth menu menuboxobject menupopup min minheight minresultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected...

Textbox (XPFE autocomplete) - Archive of obsolete content
ing. iswaiting type: boolean this property is set to true during the period while waiting for the timeout between the time when a user has pressed a key and a search is performed. label type: string sets the label attribute. gets the label attribute if it is present and not empty. otherwise it returns the value of the associated label element, if applicable. otherwise it returns the placeholder or emptytext property. the getter is mostly useful for screen readers. note: prior to firefox 3, and always in thunderbird and seamonkey, the label property of an autocomplete textbox returns its value, for compatibility with the menulist element. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer gets and set...

Advanced Rules - Archive of obsolete content
esource's child resources. it applies each resource to the conditions. if the conditions match for that resource, the content in the actions element is generated for that resource. if the conditions do not match, no content is generated. content element the conditions element can contain three elements. the first is the content element, which should always exist once and only once. it serves as a placeholder as the template builder iterates through the resources. it specifies the name of a variable in which is placed a reference to the root resource while the conditions are analyzed for a match. the root resource is the one specified by the ref attribute on the element containing the template. the syntax of the content element is as follows: <content uri="?var"/> the question mark indicates that the...

Broadcasters and Observers - Archive of obsolete content
ute so that it can be referred to by other elements. <broadcasterset> <broadcaster id="isoffline" label="offline"/> </broadcasterset> any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its label attribute changed. this results in these elements having a new label. like other non-displayed elements, the broadcasterset element serves as a placeholder for broadcasters. you should declare all your broadcasters inside a broadcasterset element so that they are all kept together. making elements observers elements that are watching the broadcaster are called observers because they observe the state of the broadcaster. to make an element an observer, add an observes attribute to it. this is analogous to using the command attribute when attaching ...

Grids - Archive of obsolete content
ws> <columns> <column> <label control="first" value="first name:"/> <label control="middle" value="middle name:"/> <label control="last" value="last name:"/> </column> <column> <textbox id="first"/> <textbox id="middle"/> <textbox id="last"/> </column> </columns> </grid> this grid has three rows and two columns. the row elements are just placeholders to specify how many there are. you may add the flex attribute to a row to make it flexible. the content is placed inside in each column. the first element inside each column element is placed in the first row, the second element in the second row and the third element is placed in the third row. if you put content in both the columns and the rows, the content will overlap each other, although t...

More Tree Features - Archive of obsolete content
</treechildren> </treeitem> </treechildren> </tree> this has created a hierarchical tree. as can be seen in the image, a small plus or minus sign (often called a twisty) has appeared next to the first row, indicating that it contains child rows. by clicking the row, the user can open and close the list. the child rows are indented. notice how the guys row only needs one column as it is a placeholder item for its children. the outer treeitem element contains a single treerow element and a treechildren element. the former creates the data for the parent row and the latter contains the child items. you can nest rows deeper as well. remember that you must use the container attribute on rows which contain child rows. the simple presence of child rows isn't sufficient to indicate this, as you may ...

Popup Menus - Archive of obsolete content
s can be seen here, a simple popup menu with three commands on it has been created. the menupopup element surrounds the three menuitem elements. you will also notice that the id has been set on the menupopup element itself. the popupset element surrounds the entire popup menu declaration. this is a generic container for popups, and is optional. it does not draw on screen but instead is used as a placeholder where you would declare all of your popups. as the name popupset implies, you can put multiple popup declarations inside it. just add additional ones after the first menupopup element. you can have more than one popupset in a file, but usually you will have only one. associating a popup with an element now that we've created the popup, it's time to make the popup appear. to do this we need to a...

Styling a Tree - Archive of obsolete content
apply to the entire tree. adding a style to the treecol element does not cause the style to be applied to the column but only to the header. the body of the tree must be styled in a somewhat different way than other elements. this is because the tree body is stored in a different way to other elements. the outer treechildren is the only real element in the tree body. the inner elements are just placeholders. setting properties instead, you must use the properties attribute on the rows or cells to set one or more named properties. this can be used with trees with static content, rdf built content or with those with a custom view. let's say we want a particular row to have a blue background color. this would be used to implement mozilla mail's labels feature. we'll use a property called 'makeitblue...

Trees - Archive of obsolete content
y with those keywords. in a sense, it is somewhat like using css classes. tree styling will be discussed in detail in a later section. tree elements trees can be created with the tree element, which is described in the following sections. there are also two elements used to define the columns to be displayed in the tree. tree this is the outer element of a tree. treecols this element is a placeholder for a set of treecol elements. treecol this is used to declare a column of the tree. by using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. you should always place an id attribute on a column, as mozilla uses the ids to identify the columns when rearranging and hiding them. this is no longer required in ...

Using the Editor from XUL - Archive of obsolete content
ess() gets the key press event. for normal character keys, that falls into nshtmleditor::editorkeypress(). nshtmleditor::editorkeypress() gets the character code from the key event, puts that into a string, and calls nshtmleditor::typedtext(), which simply calls nshtmleditor::inserttext(). nshtmleditor::inserttext() hides quite a bit of complexity in some stack-based classes. nsautoplaceholderbatch is a utility class that wraps text insertion with calls to turn off selection and layout updating (to avoid flicker), and the maintenance of a placeholder transaction. this placeholder transaction enables us to batch typing events together, so that an undo undoes the whole series of keystrokes. another stack-based class, nsautorules, ensures that text insertion is wrapped with calls to ns...

Archived Mozilla and build documentation - Archive of obsolete content
monkey, thunderbird or any of the other applications. for thunderbird, you may also find the extension howto or faq pages helpful. firefox sync sync refers to a family of related components and services which provide synchronization of data between mozilla application instances. these components and services include: force rtl (this is a temporary placeholder/stub for the force rtl page) gecko coding help wanted take a look through lxr, and you'll realize that mozilla's source code is a big place. gre hacking wiki to be able to hack the mdc wiki software, you'll need a local webserver install, which can run mediawiki. help viewer help viewer: allows information to be s...

Common Firefox theme issues and solutions - Archive of obsolete content
out:memory is a little messed up in that nodes do not collapse as they should when clicked on. to fix this issue you need to copy the following file from the latest version of firefox to your theme: chrome://global/content/aboutmemory.css. about:permissions domain names don't line up in about:permissions the domains on the domain list of about:permissions do not line up properly due to missing placeholder icons for domains without favicons. this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do no...

Theme changes in Firefox 2 - Archive of obsolete content
ht tab[selected="true"] > .tab-image-left tab[selected="true"] > .tab-image-middle tab[selected="true"] > .tab-image-right the following styles are new in firefox 2: .alltabs-item > .menu-iconic-left > .menu-iconic-icon .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon .alltabs-item[selected="true"] .tab-close-button .tab-close-button > .toolbarbutton-icon .tab-close-button-placeholder .tab-close-button:hover .tab-close-button:hover:active .tabbrowser-arrowscrollbox > .scrollbutton-down .tabbrowser-arrowscrollbox > .scrollbutton-down:hover .tabbrowser-arrowscrollbox > .scrollbutton-up .tabbrowser-arrowscrollbox > .scrollbutton-up:hover .tabbrowser-tab > .tab-close-button .tabbrowser-tab:not([selected="true"]) > .tab-close-button .tabbrowser-tab:not([selected="true"]):h...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
formprocessor.proxy = true; </script> the first statement which uses the jaxer.db namespace creates a new database table in the default sqlite database if it doesn't already exist. you can see the field names and data types which make sense for the type of data that's been added. the second statement is just a simple insert statement using the data obtained from the form. placeholders in the form of '?' are used to match up the argument values with their proper position in the insert statement. xml processing the final feature we'll explore is xml processing with a particular emphasis first on the capability to create a simple xml service on the server-side, then use the e4x capabilities to processes it. listing 10 demonstrat...

MDN Web Docs Glossary: Definitions of Web-related terms
openssl opera browser operand operator origin ota owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived performance percent-encoding php pixel placeholder names plaintext png polyfill polymorphism pop3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps promise property property (css) property (javascri...

HTML: A good basis for accessibility - Learn web development
align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main cont...

HTML: A good basis for accessibility - Learn web development
align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="#ffffff"> <!-- main cont...

Pseudo-classes and pseudo-elements - Learn web development
.) :only-child matches an element that has no siblings. :only-of-type matches an element that is the only one of its type among its siblings. :optional matches form elements that are not required. :out-of-range matches an element with a range when its value is out of range. :past matches the elements before the current element. :placeholder-shown matches an input element that is showing placeholder text. :playing matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when that element is “playing”. :paused matches an element representing an audio, video, or similar resource that is capable of being “played” or “paused”, when t...

Basic native form controls - Learn web development
c.). all rich text editors you'll encounter are custom widgets created with html, css, and javascript. all basic text controls share some common behaviors: they can be marked as readonly (the user cannot modify the input value but it is still sent with the rest of the form data) or disabled (the input value can't be modified and is never sent with the rest of the form data). they can have a placeholder; this is text that appears inside the text input box that should be used to briefly describe the purpose of the box. they can be constrained in size (the physical size of the box) and maxlength (the maximum number of characters that can be entered into the box). they can benefit from spell checking (using the spellcheck attribute), if the browser supports it. note: the <input> element is uni...

How to build custom form controls - Learn web development
/ select : the dom node with the class `select` containing the value to update // index : the index of the value to be selected function updatevalue(select, index) { // we need to get the native control for the given custom control // in our example, that native control is a sibling of the custom control var nativewidget = select.previouselementsibling; // we also need to get the value placeholder of our custom control var value = select.queryselector('.value'); // and we need the whole list of options var optionlist = select.queryselectorall('.option'); // we set the selected index to the index of our choice nativewidget.selectedindex = index; // we update the value placeholder accordingly value.innerhtml = optionlist[index].innerhtml; // and we highlight the correspon...

UI pseudo-classes - Learn web development
ed focus or contains an element that has received focus. this is useful if you want a whole form to highlight in some way when an input inside it is focused. the :focus-visible pseudo-class matches focused elements that received focus via keyboard interaction (rather than touch or mouse) — useful if you want to show a different style for keyboard focus compared to mouse (or other) focus. the :placeholder-shown pseudo-class matches <input> and <textarea> elements that have their placeholder showing (i.e. the contents of the placeholder attribute) because the value of the element is empty. the following are also interesting, but as yet not well-supported in browsers: the :blank pseudo-class selects empty form controls. :empty also matches elements that have no children, like <input>, but it is...

Document and website structure - Learn web development
-> <header> <h1>header</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">our team</a></li> <li><a href="#">projects</a></li> <li><a href="#">contact</a></li> </ul> <!-- a search form is another commmon non-linear way to navigate through a website. --> <form> <input type="search" name="q" placeholder="search query"> <input type="submit" value="go!"> </form> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. donec a diam lectus. set sit amet ipsum mauris. maecenas congue ligula as quam viverra nec consect...

Image gallery - Learn web development
ffect is removed again. to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do. looping through the images we've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbbar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbbar. you need to: put the section of code below the "looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image. in each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. we ar...

Making decisions in your code — conditionals - Learn web development
if() {...} blocks, except for the first one, which is tested in an if() {...} block. the very last choice, inside the else {...} block, is basically a "last resort" option — the code inside it will be run if none of the conditions are true. in this case, it serves to empty the text out of the paragraph if nothing is selected, for example, if a user decides to re-select the "--make a choice--" placeholder option shown at the beginning. note: you can also find this example on github (see it running live on there also.) a note on comparison operators comparison operators are used to test the conditions inside our conditional statements. we first looked at comparison operators back in our basic math in javascript — numbers and operators article. our choices are: === and !== — test if one...

Test your skills: Strings - Learn web development
own editor or in an online editor. strings 4 in the final string task, we have given you the name of a theorem, two numeric values, and an incomplete string (the bits that need adding are marked with asterisks (*)). we want you to change the value of the string as follows: change it from a regular string literal into a template literal. replace the four asterisks with four template literal placeholders. these should be: the name of the theorem. the two number values we have. the length of the hypotenuse of a right-angled triangle, given that the two other side lengths are the same as the two values we have. you'll need to look up how to calculate this from what you have. do the calculation inside the placeholder. try updating the live code below to recreate the finished exam...

Client-Server Overview - Learn web development
ut the required team name and number of players from the url. the web application then gets the required information from the database (using additional "internal" parameters to define which players are "best", and possibly also getting the identity of the logged in coach from a client-side cookie). the web application dynamically creates an html page by putting the data (from the database) into placeholders inside an html template. the web application returns the generated html to the web browser (via the web server), along with an http status code of 200 ("success"). if anything prevents the html from being returned then the web application will return another code — for example "404" to indicate that the team does not exist. the web browser will then start to process the returned html, sendin...

Introduction to the server side - Learn web development
the document and a success status (usually 200 ok). if the file cannot be retrieved for some reason, an error status is returned (see client error responses and server error responses). dynamic sites a dynamic website is one where some of the response content is generated dynamically, only when needed. on a dynamic website html pages are normally created by inserting data from a database into placeholders in html templates (this is a much more efficient way of storing large amounts of content than using static websites). a dynamic site can return different data for a url based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications). most of the code to support a dynamic website must run on the serve...

Server-side web frameworks - Learn web development
st/views.py from django.shortcuts import render from .models import team def youngest(request): list_teams = team.objects.filter(team_level__exact="u09") context = {'youngest_teams': list_teams} return render(request, 'best/index.html', context) rendering data web frameworks often provide templating systems. these allow you to specify the structure of an output document, using placeholders for data that will be added when a page is generated. templates are often used to create html, but can also create other types of document. web frameworks often provide a mechanism to make it easy to generate other formats from stored data, including json and xml. for example, the django template system allows you to specify variables using a "double-handlebars" syntax (e.g. {{ variable_name }...

Implementing feature detection - Learn web development
ports those features or not. let's look at an example to show how you'd use those properties. first of all, make a local copy of the modernizr-js.html example file. attach the modernizr library to the html using a <script> element, as we have done in previous demos. put it above the existing <script> element, which is attaching the google maps api to the page. next, fill in the your-api-key placeholder text in the second <script> element (as it is now) with a valid google maps api key. to get a key, sign in to a google account, go to the get a key/authentication page, then click the blue get a key button and follow the instructions. finally, add another <script> element at the bottom of the html body (just before the </body> tag), and put the following script inside the tags: if (modernizr.g...

Accessibility information for UI designers and developers
mes the font size this does not mean that your page needs to offer controls to make such changes, merely that if someone does these things in a custom stylesheet, they should not break the interface. forms in forms, provide labels for all controls. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast. it is more helpful to describe what an input element is for in text just above or underneath the input. error recovery when you detect users provide unexpected input, explain what is wrong and, if possible, how to correct it. this is specifically important in these cases: the user input is about legal commitments or financial...

Mozilla’s UAAG evaluation report
ported abbr element: supported abbr attribute for td/th: not supported summary for table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.10 toggle placeholders. (p3) ni 2.11 alert unsupported language. (p3) nr ? guideline 3. allow configuration not to render some content that may reduce accessibility. checkpoint title status notes/plans 3.1 toggle background images. (p1) c preferences, appearance, colors - "use my chosen colors, ignoring the colors and background image specified" ...

Debugging Frame Reflow
gfxbuttoncontrol hr hr framei htmlframeinner frameo htmlframeouter img image inline inline letter letter line line select select obj object page page place placeholder posinline positionedinline canvas canvas root root scroll scroll caption tablecaption cell tablecell bccell bctablecell col tablecol colg tablecolgroup tbl table t...

IME handling guide
tion events and a dom text event for emulating to commit composition synchronously. additionally, textcomposition ignores comming events which are dispatched by widget when the widget receives native ime events. in this case, using the last composition string as commit string. however, if the last composition string is only an ideographic space (fullwidth space), the composition string may be a placeholder of some old chinese ime on windows. in this case, although, we should not commit the placeholder character because it's not a character which the user wanted to input but we commit it as is. the reason is, inputting an ideographic space causes a composition. therefore, we cannot distinguish if committing composition is unexpected. if the user uses such old chinese ime, "intl.ime.remove_placeho...

Introduction to Layout in Mozilla
ther created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs. ...

source-editor.jsm
it's created. by default, this is the empty string, indicating there should be no text on startup. keys array an array of objects defining custom keyboard bindings. see xxxxx for details. mode string a string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. see editor mode constants for permitted values. placeholdertext string the default initial text to be in the editor when it's created; by default, an empty string. this is deprecated starting in firefox 13; use initialtext instead. deprecated since gecko 13.0 readonly boolean a boolean value indicating whether or not the source editor should be read only. showannotationruler boolean a boolean value indicating whether o...

Localization and Plurals
particular grammatical structure. the following would be better: components.utils.import("resource://gre/modules/pluralform.jsm"); let downloads = "you have one download.;you have #1 downloads."; let num = 10; // for english, this would display "you have 10 downloads." print(pluralform.get(num, downloads).replace("#1", num); notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string. additionally, the localizer has control over where the placeholder is, in relation to the rest of the text. of course, the strings to be localized will be placed in a separate file, such as yourextension.properties, instead of being hardcoded in the javascript code file. the following 3 file snippets show how to use pluralform with your .xul...

Mozilla Quirks Mode Behavior
quirk has been adapted to match the behavior of other browser (bug 783213). prior to gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pseudo-element was used in the selector, or if it was part of a pseudo-class argument (bug 783213). quirks mode has document.all support (undetected). images (img elements) without alt attributes sometimes display placeholder icons in quirks mode. obsolete since gecko 2.0 html colors were parsed differently up to gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) (bug 121738). in quirks mode, the url fragment #top scrolls to the top of the page when there is no such anchor. obsolete since gecko 10.0 however, html5 requires this behavior, and starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey...

Mozilla Style System Documentation
ugh a pair of frames represents table formatting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. (mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames. these three types of style contexts correspond to the three ways of creating a style context: nsiprescontext::resolvestylecontextfor, nsiprescontext::resolvepseudostylecontextfor, and.nsiprescontext::resolvestylecontextfornonelement there is also a fourth method, nsiprescontext::probepseudostylecontextfor, which creates a style context only if there are style rules that match the pseudo-e...

NSPR Error Handling
performed. pr_in_progress_error the operation is still in progress (probably a nonblocking connect). pr_already_initiated_error the (retried) operation has already been initiated (probably a nonblocking connect). pr_group_empty_error the wait group is empty. pr_invalid_state_error the attempted operation is on an object that was in an improper state to perform the request. pr_max_error placeholder for the end of the list. ...

Web Replay
ch point there is no js on the stack). there is a new onpopframe handler, which is needed when doing reverse-step-in operations. operations on the debuggee which require interaction with the system will fail. these operations may be property accesses, evals, or object calls, and an example is accessing the font property of a canvasrenderingcontext2d. failed operations currently just produce a placeholder "incomplete" result. operations on the debuggee which have side effects — eval("x.f = 3") — should be avoided. when the process resumes forward or backward these side effects will be lost (the process reverts to its original state) and while paused at a breakpoint these effects can cause some strange behavior — after the above eval, getting the x.f property directly could produce a differ...

Index
ript, you can pass parameters to the constructor, more on that below. 512 nsidomprogressevent interfaces, interfaces:scriptable, reference, xmlhttprequest, xpcom interface reference, nsidomprogressevent, progress the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. 513 nsidomserializer dom, interfaces, interfaces:scriptable implemented by: @mozilla.org/xmlextras/xmlserializer;1. to create an instance, use: 514 nsidomsimplegestureevent dom, gestures, interfaces, interfaces:scriptable, needscontent, xpcom interface reference the nsid...

Components.utils.exportFunction
able to accept callbacks as arguments. allowcrossoriginarguments: do not check that arguments to the exported function are subsumed by the caller: this allows the caller to pass objects with a different origin into the exported function, which can then use its privileged status to make cross-origin requests with them. boolean, defaulting to false. this option is new in firefox 34. returns the placeholder function which has been created in the target context. exporting functions that take arguments until firefox 34, any arguments that the function takes are structured-cloned across the security boundary unless they are native objects such as dom nodes. because structured cloning does not clone functions, this meant that the function may not return a function, and by default, may not take any fun...

nsIDOMProgressEvent
loading data using the xmlhttprequest object. 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcomputablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description ...

nsIDOMSerializer
an instance of this interface can be used to serialize a dom document or any dom subtree. inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/xmlextras/xmlserializer;1. ...

nsIDocShell
s_error_not_implemented error may be returned by implementations not supporting zoom. implementations not supporting zoom should return 1.0 all the time for the get operation. 1.0 by the way is the default of zoom. this means 100% of normal scaling or in other words normal size no zoom. constants constant value description internal_load_flags_none 0x0 used as a placeholder when you don't want to explicitly specify flags. internal_load_flags_inherit_owner 0x1 used to indicate that it may be safe to inherit the owner of a javascript: or data: url from the existing document. internal_load_flags_dont_send_referrer 0x2 used to indicate that the load was caused by a meta refresh and the current document uri shouldn't be sent as the http refe...

nsIEditor
void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out boolean canundo); void redo(in unsigned long count); void canredo(out boolean isenabled, out boolean canredo); void begintransaction(); void endtransaction(); void beginplaceholdertransaction(in nsiatom name); void endplaceholdertransaction(); boolean shouldtxnsetselection(); void setshouldtxnsetselection(in boolean should); inline spellchecking methods nsiinlinespellchecker getinlinespellchecker(in boolean autocreate); void syncrealtimespell(); void setspellcheckuseroverride(in boolean enable); clipboa...

nsIXPCException
ljsval(); parameters none. return value native code only!stowjsval void stowjsval( in xpcexjscontextptr cx, in xpcexjsval val ); parameters cx val remarks components.exception is a javascript constructor to create nsixpcexception objects. the call signature of the constructor is: components.exception(message, result, stack, data, inner) all parameters are optional and the appropriate placeholder is 'unknown'. message - a custom message set by the thrower (defaults to 'exception') result - the nsresult associated with this exception (defaults to components.results.ns_error_failure) stack - the stack chain (defaults to the current stack) data - additional data object of your choice (defaults to null) inner - an inner exception that triggered this, if available ...

Using the clipboard
e utf-16 // format internally. trans.settransferdata("text/unicode", supportsstring(str), str.length * 2); the first line gets the transferring component which implements nsitransferable. next we need to initialize it with a "privacy context", which will ensure that source data from inside private browsing mode will be cleared when the mode is exited. please note: the sourcewindow variable is a placeholder for whatever window owns the data being copied -- from any dom element you can obtain it via element.ownerdocument.defaultview. if, and only if, you are placing data on the clipboard that is unrelated to web content the user is viewing, you can pass a null privacy context to the init method. the next step is to tell the transferable what type of data we want to use. the type of data is referred ...

Standard OS Libraries
address() ); console.info('win_undermouse:', win_undermouse, win_undermouse.tostring()); console.info('x:', x, x.tostring()); console.info('y:', y, y.tostring()); console.info('mask:', mask, mask.tostring()); gdk.close(); gdk3.close(); gtk+ the gtk+ toolkit can also be used. the list of the exposed symbols/functions can be found here: gnome developer :: gtk+ reference manual. example: ... // placeholder - example soon to come x11 x11 runs primarily on unix® and unix-like operating systems like linux, all of the bsd variants, sun solaris both native 32 and 64 bit support, solaris x86, mac os x (via darwin) as well as other platforms like os/2 and cygwin. there are updates that happen to x11; at the time of this writing, the latest version is 4.4.0. information on all releases can be found on i...

Debugger.Source - Firefox Developer Tools
a block of webassembly code, its properties provide the serialized text as a string. currently only entire modules evaluated via new webassembly.module are represented. spidermonkey constructs exactly one debugger.source for each underlying webassembly module per debugger instance. please note at the time of this writing, support for webassembly is very preliminary. many properties below return placeholder values. convention for descriptions of properties and methods below, if the behavior of the property or method differs between the instance referring to javascript source or to a block of webassembly code, the text will be split into two sections, headed by “if the instance refers to javascript source” and “if the instance refers to webassembly code”, respectively. if the behavior does ...

Network request list - Firefox Developer Tools
triggered. blocking specific urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the browser or an extension), you can block requests matching patterns you specify. click the request blocking icon in the toolbar. this opens the blocking sidebar. (click the icon again when you want to close the sidebar.) enter a string in the field with the placeholder text block resource when url contains. reload the page to test it with the specified url blocked. other actions you can take with request blocking: to turn all request blocking off or on: toggle the checkbox next to enable request blocking. to turn a specific block off or on: toggle the checkbox next to that item. to delete a blocked item, click the x icon that appears when you focus the ...

Examine and edit CSS - Firefox Developer Tools
ated longhand properties by clicking the arrow besides them. ...

CacheStorage - Web APIs
mylittlevader.jpg'); }); } })); }); this snippet shows how the api can be used outside of a service worker context, and uses the await operator for much more readable code. // try to get data from the cache, but fall back to fetching it live. ...

Binary strings - Web APIs
al user, since the length of javascript strings is calculated using two bytes as the unit. binary strings are not part of the javascript language design. however at least one native function requires binary strings as its input, btoa(): invoking it on a string that contains codepoints greater than 255 will cause a character out of range error. the reason that brought to use utf-16 code units as placeholders for uint8 numbers is that as web applications become more and more powerful (adding features such as audio and video manipulation, access to raw data using websockets, and so forth) it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data. in the past, this had to be simulated by treating the raw data as a ...

Element: keydown event - Web APIs
(229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <input> element. ...

Element: keyup event - Web APIs
e this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <input> element. ...

Element.slot - Web APIs
syntax var astring = element.slot element.slot = astring value a domstring. examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. ...

Using FormData Objects - Web APIs
nding it along, to include additional information that's not necessarily user-editable. sending files using a formdata object you can also send files using formdata. ...

GlobalEventHandlers.onchange - Web APIs
not necessarily called for each alteration to an element's value. syntax target.onchange = functionref; functionref is a function name or a function expression. the function receives an event object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents and then change focus away from it. ...

GlobalEventHandlers.oninput - Web APIs
onchange event handler is not necessarily called for each alteration to an element's value. syntax target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. example this example logs the number of characters in an <input> element, every time you modify its contents. ...

HTMLElement: beforeinput event - Web APIs
e. bubbles yes cancelable yes interface inputevent event handler property none sync / async sync composed yes default action update the dom element examples this example logs current value of the element immediately before replacing that value with the new one applied to the <input> element. ...

HTMLElement: change event - Web APIs
listener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus. try entering something into the field below, and then click somewhere else to trigger the event. ...

HTMLElement: input event - Web APIs
event instead for elements of these types. note: the input event is fired every time the value of the element changes. this is unlike the change event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like. examples this example logs the value whenever you change the value of the <input> element. ...

HTMLSelectElement.selectedIndex - Web APIs
placeholder ...

HTMLSlotElement.name - Web APIs
syntax var name = htmlslotelement.name htmlslotelement.name = name value a domstring. examples the following snippet is taken from our slotchange example (see it live also). ...

SVGGraphicsElement: copy event - Web APIs
ct and dispatch a synthetic copy event, but this will not affect the system clipboard. ...

A simple RTCDataChannel sample - Web APIs
on" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text input box into which the user can type a message to transmit, with a button to send the entered text. this <div> will be the first peer in the channel. <div class="messagebox"> <label for="message">enter a message: <input type="text" name="message" id="message" placeholder="message text" inputmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages. this <div> block will be the second peer. <div class="messagebox" id="receivebox"> <p>messages received:</p> </div> the ja...

Using ARIA: Roles, states, and properties - Accessibility
region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-colspan aria-controls aria-describedby...

Text labels and names - Accessibility
<input type="checkbox" id="terms"> </label> <input type="checkbox" id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in addition to having a <label> for every form element, those labels should be visible, not hidden. visible labels help all users understand the purpose of a form element. do not rely on placeholder text, because it disappears as soon as the user starts typing. frame elements must be labeled frame elements, both <iframe> and the older, obsolete <frame>, must have a title to describe the contents of the frame. use the title attribute to label a frame element. without a title, users of assistive technologies have to navigate into the frame in order to understand what it contains, which can b...

:any-link - CSS: Cascading Style Sheets
been visited. in other words, it matches every <a>, <area>, or <link> element that has an href attribute. thus, it matches all elements that match :link or :visited. /* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification. working draft initial definition. ...

:in-range - CSS: Cascading Style Sheets
ent value is within the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <form action="" id="form1"> <ul>values between 1 and 10 are valid. ...

:link - CSS: Cascading Style Sheets
ple will probably have special font colors only before you visit them. (after that, you'll need to clear your browser history to see them again.) however, the background-color values are likely to remain, as most browsers do not set that property on visited links by default. html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link { background-color: gold; color: green; } result specifications specification status comment html living standardthe definition of ':link' in that specification. living standard selectors level 4the definition of ':link' in that specification. working draft no change. selectors level 3th...

:out-of-range - CSS: Cascading Style Sheets
utside the permitted limits. note: this pseudo-class only applies to elements that have (and can take) a range limitation. ...

Border-image generator - CSS: Cascading Style Sheets
rder5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" ...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
i am using floats for older browsers and grid for new ones.</div> </div> the image below shows the media object in a non-supporting browser on the left, and a supporting one on the right: using feature queries the above example is very simple, and we can get away without needing to write code that would be a problem to browser...

Mozilla CSS extensions - CSS: Cascading Style Sheets
d :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-m...

Pseudo-elements - CSS: Cascading Style Sheets
lasses from pseudo-elements. however, since this distinction was not present in older versions of the w3c spec, most browsers support both syntaxes for the original pseudo-elements. ...

CSS reference - CSS: Cascading Style Sheets
r-inlineoverscroll-behavior-xoverscroll-behavior-yppad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepaint()paint-orderpath()pc<percentage>perspectiveperspective()perspective-originplace-contentplace-itemsplace-self::placeholderpointer-eventspolygon()<position>positionprefix (@counter-style)ptpxqqquotesrradradial-gradient()range (@counter-style)<ratio>:read-only:read-writerect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotatex()rotatey()rotatez()row-gapsssaturate()scalescale()scale3d()scalex()scaley()sc...

WebKit CSS extensions - CSS: Cascading Style Sheets
-webkit-full-screen-controls-hidden * now standard. note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid. pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ...

DOM onevent handlers - Developer guides
ess, onfocus, etc. you can specify an on<…> event handler for a particular event (such as click) for a given object in different ways: adding an html attribute named on<eventtype>: <button onclick="handleclick()">, or by setting the corresponding property from javascript: document.queryselector("button").onclick = function(event) { … }. an onevent event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. in order to allow multiple handlers to be installed for the same event on a given object, you can call its addeventlistener() method, which manages a list of handlers for the given event on the object. a handler can then be removed from the object by calling its removeeventlistener() function. when an event occurs that applies to an elem...

Constraint validation - Developer guides
traints, web developers want to control what messages are displayed to the users and how they are styled. controlling the look of elements the look of elements can be controlled via css pseudo-classes. :required and :optional css pseudo-classes the :required and :optional pseudo-classes allow writing selectors that match form elements that have the required attribute, or that don't have it. :placeholder-shown css pseudo-class see :placeholder-shown :valid :invalid css pseudo-classes the :valid and :invalid pseudo-classes are used to represent <input> elements whose content validates and fails to validate respectively according to the input's type setting. these classes allow the user to style valid or invalid form elements to make it easier to identify elements that are either formatted corre...

HTML attribute reference - HTML: Hypertext Markup Language
details> indicates whether the details will be shown on page load. optimum <meter> indicates the optimal numeric value. pattern <input> defines a regular expression which the element's value will be validated against. ping <a>, <area> the ping attribute specifies a space-separated list of urls to be notified if a user follows the hyperlink. placeholder <input>, <textarea> provides a hint to the user of what can be entered in the field. poster <video> a url indicating a poster frame to show until the user plays or seeks. preload <audio>, <video> indicates whether the whole resource, parts of it or nothing should be preloaded. radiogroup <command> readonly <input>, <textarea> indi...

<input type="color"> - HTML: Hypertext Markup Language
rowser that doesn't support an input of type color will naturally fall back to the type text. because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input, such as #ff0000. using color inputs inputs of type color are simple, due to the limited number of attributes they support. providing a default color you can update the simple example above to set a default value, so that the color well is pre-filled with the default color and the color picker (if any) will also ...

<input type="range"> - HTML: Hypertext Markup Language
nt attribute defines the orientation of the range slider. values include horizontal, meaing the range is rendered horizontally, and vertical, where the range is rendered vertically. note: the following input attributes do not apply to the input range: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width. any of these attributes, if included, will be ignored. examples while the number type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. the range input type lets you ask the user for a value in cases where the user may not even care—o...

<slot> - HTML: Hypertext Markup Language
content categories flow content, phrasing content permitted content transparent events slotchange tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlslotelement attributes this element includes the global attributes. ...

HTML elements reference - HTML: Hypertext Markup Language
ement's disclosure box. web components web components is an html-related technology which makes it possible to, essentially, create and use custom elements as if it were regular html. in addition, you can create custom versions of standard html elements. element description <slot> the html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together. <template> the html content template (<template>) element is a mechanism for holding html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript. obsolete and deprecated e...

Link types - HTML: Hypertext Markup Language
ral icons are equally appropriate, the last one is used. if the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on. note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for web clip or a start-up placeholder. instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively. the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore. <link> <a>, <area>, <form> import html imports <link> <a>, <area>, <form> index obsolete since html5 indicates that the ...

MIME types (IANA media types) - HTTP
ted in some way or binary data that requires a specific application or category of application to use. generic binary data (or binary data whose true type is unknown) is application/octet-stream. other common examples include application/pdf, application/pkcs8, and application/zip. audio list at iana audio or music data. examples include audio/mpeg, audio/vorbis. example reserved for use as a placeholder in examples showing how to use mime types. these should never be used outside of sample code listings and documentation. example can also be used as a subtype; for instance, in an example related to working with audio on the web, the mime type audio/example can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world. ...

Meta programming - JavaScript
t defines a target (an empty object here) and a handler object, in which a get trap is implemented. here, an object that is proxied will not return undefined when getting undefined properties, but will instead return the number 42. additional examples are available on the proxy reference page. terminology the following terms are used when talking about the functionality of proxies. handler placeholder object which contains traps. traps the methods that provide property access. (this is analogous to the concept of traps in operating systems.) target object which the proxy virtualizes. it is often used as storage backend for the proxy. invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target. invariants s...

The legacy Iterator protocol - JavaScript
is an legacy iterator when it implements a next() method with the following semantics, and throws stopiteration at the end of iteration. property value next a zero arguments function that returns an value. difference between legacy and es2015 iterator protocols the value was returned directly as a return value of calls to next, instead of the value property of a placeholder object iteration termination was expressed by throwing a stopiteration object. simple example with the old protocol function makeiterator(array){ var nextindex = 0; return { next: function(){ if(nextindex < array.length){ return array[nextindex++]; else throw new stopiteration(); } } } var it = makeiterator(['yo',...

for await...of - JavaScript
onsesize = 0; // the for-await-of loop. async iterates over each portion of the response. for await (const chunk of streamasynciterable(response.body)) { // incrementing the total response length. responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators. in that case it internally awaits emitted values before assign them to the loop control variable. function* generator() { yield 0; yield 1; yield promise.resolve(2); yield promise.resolve(3); yield 4; } (async function() { for await (let num of gener...

background_color - Web app manifests
this value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded. therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transition between launching the web application and loading the site's content. ...

<mmultiscripts> - MathML
presuperscript)* ] </mmultiscripts> after the base expression you can specify a postsubscript and a postsuperscript. prescripts are optional and are separated by the empty tag <mprescripts/> (only one <mprescripts /> element is allowed, otherwise you will get an duplicatemprescripts error in the error console and "invalid-markup" in your rendering). in addition you are able to use <none/> as a placeholder for empty scripts (not for the base). see the examples section for a correct usage. attributes class, id, style provided for use with stylesheets. href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. subscriptshift the minimum sp...

Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
e needed to display the image before it has loaded, if css has been applied that causes problems with its display size. read on to find out more. jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads. without the width and height attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout. this wasn't an attractive thing for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence a...

Populating the page: how browsers work - Web Performance
limited number of differing viewport sizes. in this phase, taking the viewport size into consideration, the browser determines what the dimensions of all the different boxes are going to be on the screen. taking the size of the viewport as its base, layout generally starts with the body, laying out the dimensions of all the body’s descendants, with each element's box model properties, providing placeholder space for replaced elements it doesn’t know the dimensions of, such as our image. the first time the size and position of nodes are determined is called layout. subsequent recalculations of node size and locations are called reflows. in our example, suppose the initial layout occurs before the image is returned. since we didn't declare the size of our image, there will be a reflow once the im...

<a> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshap...

<circle> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<ellipse> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<foreignObject> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status comment s...

<g> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...

<line> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<marker> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshap...

<path> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptiv...

<polygon> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<polyline> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<rect> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animati...

<svg> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...

<symbol> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdesc...

<text> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:an...

<textPath> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number o...

<tspan> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in an...

<use> - SVG: Scalable Vector Graphics
ked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted content...

Web Components
does not include nodes in shadow trees if the shadow root was created with shadowroot.mode closed. html templates <template> contains an html fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using javascript, mainly used as the basis of custom element structures. the associated dom interface is htmltemplateelement. <slot> a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together. the associated dom interface is htmlslotelement. the slot global html attribute assigns a slot in a shadow dom shadow tree to an element. slotable a mixin implemented by both element and text nodes, defining features that allow them to become the contents of an <s...