RFE to the Custom Controls - Archive of obsolete content
introduction if you have a custom control that you believe will help fulfill the needs of form authors or other custom controls authors, please file it here.
... this page could be of particular interest to people using custom controls in xul documents for the following reason.
...therefore the control set may need to be more extensive to address the wider spectrum of requirements that a xul application will have on its controls.
... note: xul is a feature of mozilla only and custom control authors should be aware their controls won't work on other browser platforms.

Mobile touch controls - Game development
overview: control mechanisms next the future of mobile gaming is definitely web, and many developers choose the mobile first approach in their game development process — in the modern world, this generally also involves implementing touch controls.
... in this tutorial, we will see how easy it is to implement mobile controls in an html5 game, and enjoy playing on a mobile touch-enabled device.
... note: the game captain rogers: battle at andromeda is built with phaser and managing the controls is phaser-based, but it could also be done in pure javascript.
... summary that covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support.

HTMLFormControlsCollection.namedItem() - Web APIs
the htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification.
... living standard html5the definition of 'htmlformcontrolscollection' in that specification.
... recommendation in this snapshot of html living standard, the htmlformcontrolscollections is defined for the first time.

HTMLMediaElement.controlsList - Web APIs
the controlslist property of the htmlmediaelement interface returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
... syntax var domtokenlist = htmlmediaelement.controlslist; value a domtokenlist.
... specifications specification status comment controls list api: solution outline browser compatibility the compatibility table on this page is generated from structured data.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontrolslistchrome full support 58edge full support ≤79firefox ?

User input and controls - Developer guides
this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
... user input and controls workflow the following diagram illustrates the typical workflow for implementing user input mechanisms: first of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on.
...for example if you want to add controls when any key gets pressed, you need to add an event listener on the window object: window.addeventlistener("keydown", handlekeydown, true); window.addeventlistener("keyup", handlekeyup, true); where handlekeydown and handlekeyup are the functions implementing the controls about the keydown and keyup events.
... implement controls pointer lock in some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the browser or screen: the pointer_lock_api gives you full control of the pointing device.

XUL controls - Archive of obsolete content
the following table lists the xul user interface controls.
... for a step-by-step guide on how to use these controls, see the xul tutorial.
... description reference <groupbox> a groupbox displays a labelled box around other user interface controls.

Unconventional controls - Game development
implementing mobile and desktop controls is recommended is a must, and gamepad controls add that extra experience.
...smart tvs are shipped with remote controls, which can be used to control your games if you know how.
...captain rogers had the keyboard controls implemented already: this.cursors = this.input.keyboard.createcursorkeys(); //...

Test your skills: HTML5 controls - Learn web development
html5 controls 1 first let's explore some of the new html5 input types.
... html5 controls 2 next, we want you to implement a slider control to allow the user to choose a maximum number of people to invite to their party.
...your post should include: a descriptive title such as "assessment wanted for html5 controls 1 skill test".

RFE to the Custom Controls Interfaces - Archive of obsolete content
you can refer to custom controls page to get familiar with custom controls mechanism.
...et/set the value of the instance data node that the xforms element is bound to as well as getting the various states of that node nsixformsdelegate - used to obtain the nsixformsaccessors interface nsixformsuiwidget - used by the xforms processor to update the value/state of an xforms element when its bound node's value/state is changed our current mechanism that allows authors to build custom controls assumes that the controls will be bound to instance nodes of simple content type.

XForms Custom Controls Examples - Archive of obsolete content
a full example showing a complete form can be found on xforms:custom_controls.

Implementing controls using the Gamepad API - Game development
controls for web games historically playing games on a console connected to your tv was always a totally different experience to gaming on the pc, mostly because of the unique controls.

Mouse controls - Game development
we have already added keyboard controls, but we could easily add mouse controls too.

Paddle and keyboard controls - Game development
it's time to implement some keyboard controls.

HTTP Index - HTTP
20 cross-origin resource sharing (cors) ajax, cors, cross-origin resource sharing, fetch, fetch api, http, http access controls, same-origin policy, security, xmlhttprequest, l10n:priority cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.
...it is similar to content security policy but controls features instead of security behavior.
... 69 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes.
...And 32 more matches

Index - Web APIs
62 animation api, animations, experimental, interface, reference, web animations, waapi, web animations api the animation interface of the web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source.
... 187 audiotrack.enabled audio, audiotrack, html dom, media, media controls, media track, property, reference, video, enabled, mute, track the audiotrack property enabled specifies whether or not the described audio track is currently enabled for use.
... 662 constraint validation api api, constraint validation, landing, reference the constraint validation api enables checking values that users have entered into form controls, before submitting the values to the server.
...And 28 more matches

Feature-Policy - HTTP
directives accelerometer controls whether the current document is allowed to gather information about the acceleration of the device through the accelerometer interface.
... ambient-light-sensor controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
... autoplay controls whether the current document is allowed to autoplay media requested through the htmlmediaelement interface.
...And 26 more matches

TCP/IP Security - Archive of obsolete content
security controls exist for network communications at each layer of the tcp/ip model.
... security controls that are available at each layer include: application layer.
... separate controls must be established for each application.
...And 22 more matches

Accessible multimedia - Learn web development
multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes).
... for example: <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> accessible audio and video controls implementing controls for web-based audio/video shouldn't be a problem, right?
... the problem with native html5 controls html5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box.
...And 21 more matches

Index - Archive of obsolete content
255 offering a context menu for form controls add-ons, extensions, mozilla, xul firefox 3 changed the behavior of right-click on form controls to no longer display a context menu by default.
... this article describes how an extension can override this change in a particular window, enabling context menus to work on form controls.
... 1152 building accessible custom components in xul accessibility, dhtml, xul dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
...And 19 more matches

Video and Audio APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls.
...as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
... here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls.
...And 18 more matches

Video player styling basics - Developer guides
the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items.
... the markup for the custom controls now looks as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> </div> related css alteration the previous article simply set the display property of the video co...
... basic styling the html video and its controls are all contained within a <figure> element, which is given a maximum width and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up...
...And 16 more matches

UI pseudo-classes - Learn web development
previous overview: forms next in the previous articles, we covered the styling of various form controls, in a general manner.
...we'll discuss these in more detail in the sections below, but briefly, the main ones we'll be looking at are: :required and :optional: targets required or optional form controls.
... :valid and :invalid, and :in-range and :out-of-range: target form controls that are valid/invalid according to form validation constraints set on them, or in-range/out-of-range.
...And 15 more matches

Creating a cross-browser video player - Developer guides
as well as working fullscreen, the player features custom controls rather than just using the browser defaults.
... the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.
... working example our example video player displays a clip from an open source movie called tears of steel, and includes typical video controls.
...And 15 more matches

Windows Media in Netscape - Archive of obsolete content
controls such as windows media player also interact closely with the scripts in a web page.
... netscape 7.1 is the first netscape gecko™ browser to support the windows media player as an activex control -- previous netscape browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control.
...client-side detection using javascript objects internet explorer implements the activexobject object to create new instances of activex controls.
...And 14 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
... controls if this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
...this is subject to http access controls.
...And 12 more matches

Advanced form styling - Learn web development
<input type="color"> date-related controls such as <input type="datetime-local"> <input type="range"> <input type="file"> <progress> and <meter> let's first talk about the appearance property, which is pretty useful for making all of the above more stylable.
... appearance: controlling os-level styling in the previous article we said that historically, styling of web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls.
... the appearance property was created as a way to control what os- or system-level styling was applied to web form controls.
...And 11 more matches

Styling web forms - Learn web development
in this article we will move on to looking at how to use css to style your form controls.
... this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old browsers are retired and modern browsers give us more features to use.
... form controls were added to html in the html 2 specification in 1995; css wasn't released until late 1996, and wasn't supported very well by browsers for a few years after that.
...And 11 more matches

WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.
... as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc.
... html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs.
...And 10 more matches

Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
... the controls attribute on the <audio> element is specified when we require the browser to provide us with default playback controls.
... if you don't specify this attribute, no controls will appear — and you will instead have to create your own controls and program their functionality using the media api (see below).
...And 10 more matches

Index - Game development
29 implementing controls using the gamepad api controls, gamepad api, gamepads, games, javascript, controllers the gamepad api is very easy to develop with.
... 30 implementing game control mechanisms controls, desktop, gamepad, games, javascript, laptop, mobile, keyboard, mouse, touch one of html5's main advantages as a game development platform is the ability to run on various platforms and devices.
... streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts.
...And 9 more matches

Handling common accessibility problems - Learn web development
you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text input (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button.
...you might have inherited a site where the semantics are not very good (perhaps you've ended up with a horrible cms that generates buttons made with <div>s), or you are using a complex control that does not have keyboard accessibility built in, like the html5 <video> element (amazingly, opera is the only browser that allows you to tab through the <video> element's default browser controls).
...And 9 more matches

Operable - Accessibility
mouse), so that users that rely on keyboard controls can access them.
... success criteria how to conform to the criteria practical resource 2.1.1 keyboard (a) all functionality should be accessible using keyboard controls, unless it cannot be done using the keyboard (e.g.
...built-in controls should be used where possible (e.g.
...And 9 more matches

Index - HTTP
21 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes.
... 64 feature-policy: autoplay directive, feature policy, feature-policy, http, reference, autoplay the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay media requested through the htmlmediaelement interface.
... 65 feature-policy: camera directive, feature policy, feature-policy, http, reference, camera the http feature-policy header camera directive controls whether the current document is allowed to use video input devices.
...And 9 more matches

Index - Learn web development
in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server.
...for now, the best solution is to learn more about the way the different browsers support css when applied to html form controls.
... 310 basic native form controls beginner, controls, example, forms, guide, html, input, web, widgets this article has covered the older input types — the original set introduced in the early days of html that is well supported in all browsers.
...And 8 more matches

Border-image generator - CSS: Cascading Style Sheets
</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" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="se...
...ss="guideline" data-axis="y" data-topic="slice-top"></div> <div class="guideline" data-axis="x" data-topic="slice-right"></div> <div class="guideline" data-axis="y" data-topic="slice-bottom"></div> <div class="guideline" data-axis="x" data-topic="slice-left"></div> </div> <div id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-checkbox" data-topic='slice-fill'></div> <...
...er-radius: 2px; border-image-width: 20px; border-image-repeat: round; border-style: solid; box-shadow: 0 0 3px 0 #bababa; } #preview .resize-handle { width: 10px; height: 10px; background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } #preview .resize-handle:hover { cursor: nw-resize; } /* * general controls menu */ #general-controls { padding: 10px 30px; background-color: #fff; opacity: 0.95; color: #888; /*border-radius: 2px;*/ box-shadow: 0 0 3px 0 #bababa; } #general-controls .property { width: 130px; float: left; } #general-controls .name { height: 20px; margin: 0 10px 0 0; line-height: 100%; text-align: right; float: left; } #general-controls .right { width: 200px; float: ri...
...And 8 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
... attributes for the <input> element include global html attributes and: attribute type or types description accept file hint for expected file type in file upload controls alt image alt attribute for the image type.
... required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http m...
...And 8 more matches

Color picker tool - CSS: Cascading Style Sheets
d="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> ...
...; position: absolute; background-color: #eee; box-shadow: 0 0 1px 0 #eee; } #picker-samples #add-icon:before { width: 70%; height: 16%; top: 42%; left: 15%; } #picker-samples #add-icon:after { width: 16%; height: 70%; top: 15%; left: 42%; } #picker-samples #add-icon:hover:before, #picker-samples #add-icon:hover:after { background-color: #ddd; box-shadow: 0 0 1px 0 #ddd; } /** * controls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-switch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display: table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-im...
...age: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; background-position: center right; } #controls .switch { width: 106px; padding: 1px; border: 1px solid #ccc; font-size: 14px; text-align: center; line-height: 24px; overflow: hidden; float: left; } #controls .switch:hover { cursor: pointer; } #controls .switch > * { width: 50%; padding: 2px 0; background-color: #eee; float: left; } #controls .switch [data-active='true'] { color: #fff; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /**...
...And 7 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.
... controls if this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
... controlslist the controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g.
...And 7 more matches

Index - Archive of obsolete content
421 building accessible custom components in xul accessibility, dhtml, xul dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
... developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.
... 438 introduction to xul guide, xul mozilla has configurable, downloadable chrome, meaning that the arrangement and even presence or absence of controls in the main window is not hardwired into the application, but loaded from a separate ui description.
...And 6 more matches

Mozilla XForms User Interface - Archive of obsolete content
mainly this is aimed to document how xforms elements will be presented in mozilla since the xforms specifications give only a hint of how controls might be rendered.
...the xforms specs define two kinds of xforms ui elements, called 'form controls' and 'xforms user interface'.
... elements from the "form controls" group allows users to interact with instance data.
...And 6 more matches

The HTML5 input types - Learn web development
now we'll look at the functionality of newer form controls in detail, including some new input types, which were added in html5 to allow collection of specific types of data.
... objective: to understand the newer input type values available to create native form controls, and how to implement them using html.
... because html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls.
...And 6 more matches

Web forms — Working with user data - Learn web development
in the articles listed below, we'll cover all the essential aspects of web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server.
...at this point you should find the introductory guides easy to understand, and also be able to make use of our basic native form controls guide.
... mastering forms however requires more than just html knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls.
...And 6 more matches

Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.browser.altclicksavethe preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.browser.dom.window.dump.enabledthis setting enables the dump function, which sends messages to the system console.
...changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
... if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name i...
...And 6 more matches

HTMLFormElement.elements - Web APIs
the htmlformelement property elements returns an htmlformcontrolscollection listing all the form controls contained in the <form> element.
... independently, you can obtain just the number of form controls using the length property.
... prior to html 5, the returned object was an htmlcollection, on which htmlformcontrolscollection is based.
...And 6 more matches

HTMLFormElement - Web APIs
htmlformelement.elements read only a htmlformcontrolscollection holding all form controls belonging to this form element.
... htmlformelement.lengthread only a long reflecting the number of controls in the form.
... htmlformelement.autocomplete a domstring reflecting the value of the form's autocomplete html attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
...And 6 more matches

Inputs and input sources - Web APIs
the fundamental capabilities of an input source are: targeting monitoring directional controls (either a motion-sensing pointer or a joystick or trackpad, for example) to aim in a direction, possibly at a target, though targeting is left to you to implement yourself.
...this gaze input method is fairly simple, and doesn't need any special controls, as it will be based on the facing direction reported by the headset or whatever device is used to determine what direction the viewer's face is pointing in.
... gamepad record each input source has a gamepad property which, if not null, is a gamepad object describing the various controls and widgets available on the controller.
...And 6 more matches

Building accessible custom components in XUL - Archive of obsolete content
introduction dhtml accessibility is a new technology which enables developers to construct accessible controls within (x)html pages.
... developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.
...by implementing dhtml accessibility techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview).
...And 5 more matches

Requests For Enhancement - Archive of obsolete content
custom controls i think that xforms is a great way to show that 14 year old html hacks can build really powerful web apps and reduce the need for javascript by 90%.
...a lot of the xforms capabilities are reachable by using our custom controls interfaces.
... custom controls interfaces this section contains rfe to the custom control interfaces.
...And 5 more matches

Video and audio content - Learn web development
a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video.
... controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate javascript api.
...take a look at the following updated example (try it live here, also): <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video.
...And 5 more matches

Audio and Video Delivery - Developer guides
html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playba...
... for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> <!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x480 pixels, displaying a poster image...
... <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <a href="audiofile.mp3">download audio</a> <object width="320" height="30" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf" /> <param name="flashvars" value="contr...
...And 5 more matches

Adding windows and dialogs - Archive of obsolete content
input controls most additional xul windows and dialogs in extensions are some kind of input form.
...there isn't much we need to add from what the xul tutorial explains, so go ahead and read the following sections: input controls numeric controls list controls there are some other aspects to take into account when handling input controls, which we cover in the following sections.
... groupboxes the groupbox element should be easy to understand: it groups a series of xul controls together.
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls.
... in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls.
... one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard.
...And 4 more matches

HTML: A good basis for accessibility - Learn web development
ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls.
... in this section, we'll look at the basic accessibility concerns to be aware of when creating such controls.
... one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard.
...And 4 more matches

Adding captions and subtitles to HTML5 video - Developer guides
we actually have our subtitles in three different languages — english, german, and spanish — so we will reference all three of the relevant vtt files by adding <track> elements inside our html5 <video> element: <video id="video" controls preload="metadata"> <source src="video/sintel-short.mp4" type="video/mp4"> <source src="video/sintel-short.webm" type="video/webm"> <track label="english" kind="subtitles" srclang="en" src="captions/vtt/sintel-en.vtt" default> <track label="deutsch" kind="subtitles" srclang="de" src="captions/vtt/sintel-de.vtt"> <track label="español" kind="subtitles" srclang="es" src="captions/vt...
...as a consequence, the video controls now look as follows: <div id="video-controls" class="controls" data-state="hidden"> <button id="playpause" type="button" data-state="play">play/pause</button> <button id="stop" type="button" data-state="stop">stop</button> <div class="progress"> <progress id="progress" value="0" min="0"> <span id="progress-bar"></span> </progress> </div> <button id="mute" type...
...="button" data-state="mute">mute/unmute</button> <button id="volinc" type="button" data-state="volup">vol+</button> <button id="voldec" type="button" data-state="voldown">vol-</button> <button id="fs" type="button" data-state="go-fullscreen">fullscreen</button> <button id="subtitles" type="button" data-state="subtitles">cc</button> </div> css changes the video controls have undergone some minor changes in order to make space for the extra button, but these are relatively straightforward.
...And 4 more matches

disabled - HTML: Hypertext Markup Language
often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.
... this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls.
... note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>.
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
20 accumulate needscompattable, needsexample, svg, svg attribute this attribute controls whether or not the animation is cumulative.
... 24 amplitude needscompattable, svg, svg attribute the amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma.
... 120 keysplines svg, svg attribute the keysplines attribute defines a set of bézier curve control points associated with the keytimes list, defining a cubic bézier function that controls interval pacing.
...And 4 more matches

Implementing game control mechanisms - Game development
streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts.
...the first one initializes phaser, the second preloads all the assets, the third one controls the main menu welcoming the player, and the fourth controls the actual gameplay.
... the articles javascript is the perfect choice for mobile gaming because of html5 being truly multiplatform; all of the following articles focus on the apis provided for interfacing with different control mechanisms: mobile touch controls — the first article will kick off with touch, as the mobile first approach is very popular.
...And 3 more matches

Mobile accessibility - Learn web development
there are some exceptions that need special consideration for mobile; the main ones are: control mechanisms — make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
... when talkback is turned on, your android device's basic controls will be a bit different.
... swiping left and right will move between apps, or buttons/controls if you are in a control bar.
...And 3 more matches

Client-side form validation - Learn web development
previous overview: forms next before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format.
... this is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
... using built-in form validation one of the most significant features of html5 form controls is the ability to validate most user data without relying on javascript.
...And 3 more matches

Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right html form controls and other html elements, adding some very simple styling via css, and describing how data is sent to a server.
... a web form's html is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as html forms.
... the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
...And 3 more matches

Gecko info for Windows accessibility vendors
they typically use standard windows controls for their user interface -- the area outside of the client content window, plus the context menu.
...none of the user interface contains standard windows controls -- not even the menus!
... enum { navrelation_labelled_by = 0x1003 }; enum { navrelation_described_by = 0x100e }; these two relations are they inverse; they can be used on form controls.
...And 3 more matches

NSS environment variables
3.7 nss_sdb_use_cache string ("no","yes","auto") controls whether nss uses a local cache of sql database contents.
... 3.12 nss_ssl_cbc_random_iv string ("0", "1") controls the workaround for the beast attack on ssl 3.0 and tls 1.0.
... 3.12.5 modified in 3.12.6 nss_ssl_require_safe_negotiation boolean (1 to enable) it controls whether safe renegotiation indication is required for initial handshake.
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
implementing the controls now let's take a look at the code that handles turning keyboard and mouse events into something usable for controlling an avatar in a webxr scenario.
... let lastframetime = 0; function drawframe(time, frame) { let session = frame.session; let adjustedrefspace = xrreferencespace; let pose = null; animationframerequestid = session.requestanimationframe(drawframe); adjustedrefspace = applyviewercontrols(xrreferencespace); pose = frame.getviewerpose(adjustedrefspace); if (pose) { let gllayer = session.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); logglerror("bindframebuffer"); gl.clearcolor(0, 0, 0, 1.0); gl.cleardepth(1.0); // clear everything gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit); logglerror("glcl...
...then we pass the object's reference space into the applyviewercontrols() function, which returns a revised xrreferencespace that transforms the position and orientation of the object to take into account the movement, pitch, and yaw applied by the user using the keyboard and mouse.
...And 3 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
the interface consists of master controls, which allow us to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music".
... each voice also has local controls, which allow you to manipulate the effects or parameters particular to each technique we are using to create those voices.
... pulse user controls for the ui controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs.
...And 3 more matches

ARIA live regions - Accessibility
aria-controls: the aria-controls=[idlist] is used to associate a control with the regions that it controls.
...aria-controls="myregionid1 myregionsid2".
... not known if the aria-controls aspect of live regions is implemented in current ats, or which.
...And 3 more matches

ARIA Test Cases - Accessibility
the above is a suggested series of behaviors i as an end user would want to experience when dealing with aria drag and drop, but it has no basis to go on, unlike common controls, for example.
... as the controls within the toolbar are navigated, the newly focused item should be announced, but the label or role of the toolbar itself should not be repeated.
...: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - aria-controls aria-controls -- activating button makes live region change aria-controls and live="polite" changes -- live region with a combination of polite real world changes and button-controlled changes expected at behavior: (al) minimal: the screen reader should utilize the politeness level to read changes that occur.
...And 3 more matches

ARIA: tab role - Accessibility
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">tab label</button> description an element with the tab role controls the visibility of an associated element with the tabpanel role.
...they should contain the aria-controls property identifying an element with the tabpanel role.
... associated roles and attributes aria-selected boolean aria-controls id of element with tabpanel role id content keyboard interaction key action tab when focus is outside of the tablist moves focus to the active tab.
...And 3 more matches

Basic form hints - Accessibility
when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
... when a screen reader user navigates a page, the screen reader will describe form controls.
...abel> </li> <li> <input id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript widget, using <div>s or <span>s.
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
if you're implementing controls/widgets, you should also see the accessible toolkit checklist.
...you only need to support msaa on the non-standard controls in your app.
... msaa decision-making guide use msaa whenever you have created custom controls where you're handling the drawing, mouse and keyboard accessibility in your own code.
...And 3 more matches

Perceivable - Accessibility
ui controls such as form elements and buttons should have text labels that describe their purpose.
...for more information on other ui controls, see ui controls.
... the whole of html: a good basis for accessibility is packed with information about this, but you should particularly refer to good semantics, ui controls, and text alternatives.
...And 3 more matches

-ms-high-contrast - CSS: Cascading Style Sheets
the available color keywords are: windowtext: controls the color of text content.
... highlighttext: controls the color of selected text.
... highlight: controls the background color of selected text.
...And 3 more matches

HTML documentation index - HTML: Hypertext Markup Language
9 autocapitalize autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.
... 86 <datalist>: the html data list element element, html, html forms, html5, reference, web the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
... 99 <fieldset>: the field set element element, forms, html, html forms, reference, web the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
...And 3 more matches

HTTP headers - HTTP
connection management connection controls whether the network connection stays open after the current transaction finishes.
... keep-alive controls how long a persistent connection should stay open.
... controls expect indicates expectations that need to be fulfilled by the server to properly handle the request.
...And 3 more matches

Box Model Details - Archive of obsolete content
the align attribute controls this behavior on a horizontal box.
... packing controls their horizontal placement of child elements.
... alignment controls how the row of elements are aligned vertically.
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
55 css css, codingscripting, glossary, web, l10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser.
...this code is executed by the victims and lets the attackers bypass access controls and impersonate users.
... 118 domain browser, domain, glossary, infrastructure, networking a domain is an authority within the internet that controls its own resources.
...And 2 more matches

Gecko Roles
thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.
... role_toolbar represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box.
...And 2 more matches

nsIAccessibleRole
thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.
... role_toolbar 22 represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.
... role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box.
...And 2 more matches

Web audio spatialization basics - Web APIs
the boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls.
...these are also the parameters we're going to change when the controls on our interface are used.
...we've got some controls set up to do this.
...And 2 more matches

Keyboard-navigable JavaScript widgets - Accessibility
using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused.
... the following table describes tabindex behavior in modern browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.).
... non-native controls native html elements that are interactive, like <a>, <input> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.
...And 2 more matches

Mobile accessibility checklist - Accessibility
focus all activatable elements must be focusable: standard controls such as links, buttons, and form fields are focusable by default.
... non-standard controls must have an appropriate aria role assigned to them, such as button, link, or checkbox.
... all form controls must have labels (<label> elements) for the benefit of screen reader users.
...And 2 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
justify-content — controls alignment of all items on the main axis.
... align-items — controls alignment of all items on the cross axis.
... align-self — controls alignment of an individual flex item on the cross axis.
...And 2 more matches

Index - Developer guides
as well as working fullscreen, the player features custom controls rather than just using the browser defaults.
... the player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.
... 9 cross-browser audio basics apps, audio, guide, html5, media, events this article provides: a basic guide to creating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are output live.
...And 2 more matches

<fieldset>: The Field Set element - HTML: Hypertext Markup Language
the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
... disabled if this boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>.
...by default browsers display such controls grayed out.
...And 2 more matches

<input type="datetime-local"> - HTML: Hypertext Markup Language
<input> elements of type datetime-local create input controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.
...in other browsers, these degrade gracefully to simple <input type="text"> controls.
... additional attributes in addition to the attributes common to all <input> elements, datetime-local inputs offer the following attributes: attribute description max the latest date and time to accept min the earliest date and time to accept step the stepping interval to use for this input, such as when clicking arrows on spinner controls or performing validation max the latest date and time to accept.
...And 2 more matches

<input type="range"> - HTML: Hypertext Markup Language
a few examples of situations in which range inputs are commonly used: audio controls such as volume and balance, or filter controls.
... color configuration controls such as color channels, transparency, brightness, etc.
... game configuration controls such as difficulty, visibility distance, world size, and so forth.
...And 2 more matches

Layout System Overview - Archive of obsolete content
thus the html editor and text controls put considerable performance requirements on the layout system's handling of dynamic content manipulation.
...css2 defines several (block, inline, list-item, marker, run-in, compact, and various table types) and the standard html form controls require their own special frame types to be formatted as expected.
...presumably it is more time and space-efficient to prevent frame creation for elements with no display.) the frame manager also maintains a list of forms and form controls, as content nodes.
...these collections of forms and form controls should be removed eventually.

Mozilla Crypto FAQ - Archive of obsolete content
encryption export controls?
...export controls on encryption software what are the relevant u.s.
...export controls on encryption software already been ruled unconstitutional?
...export controls on encryption software?

Tuning Pageload - Archive of obsolete content
so this preference is used to increase responsiveness, especially on cached loads (where data comes into the parser in large chunks) content.max.tokenizing.time controls how often the sink interrupts the parser.
... content.notify.* controls the information flow from content sink to rendering model.
...specifically - content.notify.ontimer controls whether the frame constructor is notified off a timer at all content.notify.backoffcount controls how many times that happens for a given page (the default is arbitrarily many times).
... content.maxtextrun controls the maximum length of data in a textnode.

Element Positioning - Archive of obsolete content
for horizontally oriented boxes, it controls the horizonal positioning of the children.
... for vertically oriented boxes, it controls the vertical positioning of the children.
...for horizontal boxes, it controls the position of the children vertically.
... for vertical boxes, it controls the position of the children horizontally.

Common Firefox theme issues and solutions - Archive of obsolete content
miscellaneous issues html 5 media controls html 5 media controls are not styled the html5 video control bar is not styled.
... warning: if you copy over the firefox 11 or newer style rules and graphics from the media folder in omni.ja you need to make the following changes in videocontrols.css or the pause and mute buttons will break in firefox 10.
... change the style rules: .playbutton[paused] {...} .mutebutton[muted] {...} to: .playbutton[paused="true"] {...} .mutebutton[muted="true"] {...} error console warnings unknown namespace for videocontrols.css the error console is reporting the following issue: warning: unknown namespace prefix 'html'.
...source file: chrome://global/skin/media/videocontrols.css the solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace: @namespace html url("http://www.w3.org/1999/xhtml"); you can generate the error console message by going to mozilla's mission page.

Implementation Status - Archive of obsolete content
4.5.5 xforms-output-exception unsupported 4.5.6 xforms-submit-error supported 4.5.7 xforms-version-exception unsupported 4.6 event sequencing supported 4.6.1 for input, secret, textarea, range, or upload controls supported 4.6.2 for output controls supported 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported 4.6.5 for submit controls supported 4.6.6 sequence:...
...1.1 standards, yet 7.4 expression categories supported 7.4.2 model binding expressions and computed expressions supported 7.4.3 expressions in actions and submissions partial 7.4.4 ui expressions partial scenarios exist where controls contained inside other controls inside a repeat won't be bound correctly 333638; 7.4.5 ui binding in other xml vocabularies unsupported not a compliance requirement for an xforms processor 7.4.6 binding examples supported 7.5 xforms core function library supported ...
...core form controls section title status notes bugs 8.1 the xforms core form controls module supported 8.1.1 common requirements n/a 8.1.2 input supported 8.1.3 secret supported 8.1.4 ...
...container form controls section title status notes bugs 9.1.1 group supported 9.2.1 switch partial @selected not working inside repeats 339937; 9.2.2 case partial 302497; 329143; 9.3 repeat module partial 264329; 273...

CSS and JavaScript accessibility best practices - Learn web development
something should definitely happen when states change, and you shouldn't get rid of the pointer cursor or the outline — both are very important accessibility aids for those using keyboard controls.
...it is arguable that such a game doesn't really have this group of people as a part of its main target audience, and it would be unreasonable to expect you to make it 100% accessible to blind people, however you could implement keyboard controls so it is usable by non-mouse users, and make the color scheme contrasting enough to be usable by those with color deficiencies.
... providing custom controls for html5 <video>s that are accessible to keyboard-only users, along with a direct link to the video that can be used to access it if javascript is not available (the default <video> browser controls aren't keyboard accessible in most browsers).
...functionality that runs in response to these events will not be accessible using other mechanisms, like keyboard controls.

How to structure a web form - Learn web development
this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
...don't worry about this for now; you'll find out how they work in the next article (basic native form controls).
...we have three distinct controls along with their labels, each contained inside a <p>.
... see also a list apart: sensible forms: a form usability checklist previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...

Accessibility API cross-reference
a tree with expandable & collapseable elements outline tree tree tree a tree item outlineitem n/a n/a treeitem a tab in a tab panel ui (but is this the actual 'tab' that sticks out, or the panel associated with it?) pagetab page_tab page_tab tab the container of the page tab controls.
...see also div n/a n/a n/a <span> span kind of like a dial, but controls the value in a related field spinbutton n/a n/a spinbutton uneditable text statictext label label see aria-readonly the text nodes of html elements are uneditable by default, apart from <input type=text>, or those with a contenteditable attribute entire status bar.
... n/a n/a aria-controls indicates the element that represents the current item within a container or set of related elements.
...ui controls, see armed focused focused focused available to javascript as document.activeelement appearance has changed for mouseover hottracked n/a n/a especially used for sliders, scrollbars, toolbars, tablists...

Accessibility information for UI designers and developers
text spacing users should be able to make the following changes to their text spacing: set line height (leading) to at least 1.5 times the font size set spacing following paragraphs to at least 2 times the font size set letter spacing (tracking) to at least 0.12 times the font size set word spacing to at least 0.16 times 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.
... use default controls controls that are built into browsers come with a lot of accessibility for free.
...it is recommended to use native controls, visibly or under the hood.

Mozilla’s UAAG evaluation report
(p1) vg can use keyboard api to control mozilla, by generating keystrokes programmatically when in-process, can use dom to generate events uses active accessibility to provide program access to controls do not support all active accessibility features for programmatic operation (put_accname, put_accvalue not yet supported) 6.5 programmatic alert of changes.
...(p2) g mozilla uses non-native controls.
...(p1) g provides sequential access to links and input form controls cannot navigate to non-links and non-input form controls with event handlers cannot configure mozilla to only allow focus changes on explicit user request 9.4 restore history.
...(p2) g provides sequential access to links and input form controls cannot navigate to non-links and non-input form controls with event handlers no directional navigation, or navigation to links by name 9.8 text search.

Accessible Toolkit Checklist
also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls.
...you will also need to provide a way for custom and owner drawn controls to easily accessibility api support, as wxwidgets does.
... there will be custom and owner drawn controls -- there always are.
... the focused radio button is always selected, and vice versa keyboard and msaa support must still work correctly when radio button labels have textfields, combo boxes or other controls as part of their prompts.

Using the Browser API
aside from the iframe, there are some basic controls: <button> elements, a simple <form> to implement the browser controls, and a search bar.
...this is implemented in our sample app with the following functions: browser.addeventlistener('mozbrowserloadstart',function() { stopreload.textcontent = 'x'; }); browser.addeventlistener('mozbrowserloadend',function(e) { canmovebwd(); canmovefwd(); stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); when the mozbrowserloadstart event fires, the latest page request has started loading, and we change the button to a cross to indicate "stop".
... in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience — this can be read out of the event object's e.detail.backgroundcolor value.
...an cycle through these using the htmliframeelement.findnext() method (specify forward and backward to go in either direction through the results), which is what our next two event listeners do: prev.addeventlistener('touchend',function() { browser.findnext("backward"); }); next.addeventlistener('touchend',function() { browser.findnext("forward"); }); the last event listener in this section controls what happens when the search toggle button is pressed.

sslfnc.html
ssl_handshake_as_client controls the behavior of pr_accept,.
... ssl_handshake_as_server controls the behavior of pr_connect.
... ssl_handshake_as_client controls the behavior of pr_accept,.
... ssl_handshake_as_server controls the behavior of pr_connect.

IAccessibleText
also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children.
... lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.
...also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children.
... lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.

BiquadFilterNode.type - Web APIs
controls the width of the frequency band.
... controls the width of the frequency band.
... controls the width of the frequency band.
... controls how sharp the transition is at the medium frequency.

BiquadFilterNode - Web APIs
controls the width of the frequency band.
... controls the width of the frequency band.
... controls the width of the frequency band.
... controls how sharp the transition is at the medium frequency.

Using the Gamepad API - Web APIs
this information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
... mapping: a string indicating whether the browser has remapped the controls on the device to a known layout.
...if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.
... axes: an array representing the controls with axes present on the device (e.g.

HTMLFormElement.length - Web APIs
the htmlformelement.length read-only property returns the number of controls in the <form> element.
... you can access the list of the form's controls using the elements property.
... syntax numcontrols = form.length; value numcontrols is the number of form controls within the <form>.
... this is the same as the number of the elements in the htmlformcontrolscollection returned by the elements property.

SourceBuffer - Web APIs
_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
... sourcebuffer.appendwindowstart controls the timestamp for the start of the append window.
... sourcebuffer.mode controls how the order of media segments in the sourcebuffer is handled, in terms of whether they can be appended in any order, or they have to be kept in a strict sequence.
... sourcebuffer.timestampoffset controls the offset applied to timestamps inside media segments that are subsequently appended to the sourcebuffer.

WebXR Device API - Web APIs
to accomplish these things, the webxr device api provides the following key capabilities: find compatible vr or ar output devices render a 3d scene to the device at an appropriate frame rate (optionally) mirror the output to a 2d display create vectors representing the movements of input controls at the most basic level, a scene is presented in 3d by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing.
... using webxr input profiles a guide to interpreting the json data provided by the webxr input profiles registry, which can be used to determine what options and controls are available on the user's available input devices.
... supporting advanced controllers and gamepads in webxr applications webxr uses the gamepad object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices.
... in this guide, learn how to make use of these devices' controls.

Controlling multiple parameters with ConstantSourceNode - Web APIs
<div class="controls"> <div class="left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the ch...
...ord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display: table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time.
...we also create gainnode2 and gainnode3, setting their values to match gainnode1, then set the value of the volume slider to the same value, so it is synchronized with the gain level it controls.
... controlling the linked oscillators the changevolume() function—the event handler for the slider control for the gain on the linked oscillator pair—looks like this: function changevolume(event) { constantnode.offset.value = volumecontrol.value; } that simple function controls the gain on both nodes.

Using the alertdialog role - Accessibility
additionally, alert dialogs can have other interactive controls such as text fields, tabs or checkboxes.
...in other words, when a dialog's information and controls require the user's immediate attention alertdialog should be used instead of dialog.
... note: this role should only be used for alert messages that have associated interactive controls.
... if an alert dialog only contains static content and has no interactive controls at all, alertdialog is likely not the right role to use here.

Box-shadow generator - CSS: Cascading Style Sheets
<div class="ui-checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="wrap-left"> <div class="colorpicker category"> <div class="title"> </div> <div id="colorpicker" class="group"> <div id="gradient" class="gradient"> <div id="gradient_picker"> </div> </div> <div id="hue" data-topic="hue" class="...
...ign: left; display : block; position: absolute; z-index: -1; } #obj-after { height: 100%; width: 100%; background: #ddd; border: 1px solid #ccc; text-align: right; display : block; position: absolute; z-index: -1; } /******************************************************************************/ /******************************************************************************/ /** * controls */ .wrap-left { float: left; overflow: hidden; } .wrap-right { float: right; overflow: hidden; } .wrap-left > * { float: left; } .wrap-right > * { float: right; } @media (min-width: 960px) { .wrap-left { width: 45%; } .wrap-right { width: 55%; } } @media (max-width: 959px) { .wrap-left { width: 30%; } .wrap-right { width: 70%; } } #controls { color: #444; mar...
...gin: 10px 0 0 0; } #controls .category { width: 500px; margin: 0 auto 20px; padding: 0; } #controls .category .title { width: 100%; height: 1.5em; line-height: 1.5em; color: #aaa; text-align: right; } #controls .category > .group { border: 1px solid #ccc; border-radius: 3px; } /** * color picker */ @media (min-width: 960px) { #controls .colorpicker { width: 420px; } } @media (max-width: 959px) { #controls .colorpicker { width: 210px; } } #colorpicker { width: 100%; margin: 0 auto; } #colorpicker .gradient { width: 200px; height: 200px; margin: 5px; background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, ...
... } #colorpicker [data-topic="hexa"] > span { display: none; } #colorpicker [data-topic="hexa"] > input { width: 85px; padding: 2px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui components */ /* property */ .property { height: 20px; margin: 10px 0; } .property * { float: left; height: 100%; line-height: 100%; } /* slider */ #controls .ui-slider-name { margin: 0 10px 0 0; } /* * output code styling */ #output { position: relative; } #output .menu { max-width: 70%; height: 20px; position: absolute; top: 2px; } #output .button { width: 90px; height: 22px; margin: 0 5px 0 0; text-align: center; line-height: 20px; font-size: 14px; color: #fff; background-color: #999; border-top-left-radius: 3px; border-top-ri...

Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-input-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> <d...
...axis[axisid='2']:after { background-color: #5c9bda; } .gradient-axis[axisid='3']:after { background-color: #5c5cda; } .gradient-axis[axisid='0'] path { fill: #da5c5c; } .gradient-axis[axisid='1'] path { fill: #5cda9b; } .gradient-axis[axisid='2'] path { fill: #5c9bda; } .gradient-axis[axisid='3'] path { fill: #5c5cda; } .gradient-axis .rotate-point:hover { cursor: pointer; } /** * controls */ #controls { width: 100%; margin: 0 auto; display: table; } #controls .section { width: 50%; padding: 10px; display: table; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #controls .section .title { width: 90%; margin: 0 0 10px 0; padding: 5px; border-bottom: 1px solid #ddd; font-size: 18px; color: #777; } #controls .pro...
...perty { width: 100%; height: 24px; margin: 10px 0; padding: 3px 0; display: table; } #controls .property > * { float: left; } #controls .property .name { width: 90px; padding: 0px 10px 0px 0px; text-align: right; line-height: 150%; } /* button */ #controls .button { height: 24px; padding: 0 10px; background-color: #379b4a; border-radius: 3px; font-size: 14px; color: #fff; display: inline; float: left; } #controls .button[data-state='disabled'] { background-color: #ccc !important; color: #777 !important; } #controls .button[data-state='disabled']:hover { background-color: #ccc !important; cursor: default !important; } #controls .button:hover { cursor: pointer; background-color: #208b20; } /* active point */ .ui-input-slider { height: 24px; line-height: 20px; } #...
...delete-point { margin: 0 58px 0 0; float: right !important; } #controls .ui-color-picker[data-topic="picker"] { margin: 20px 0 0 0; } #controls .ui-input-slider[data-topic="axis-rotation"] { } #controls .ui-dropdown { width: 130px; height: 24px; } #controls .ui-dropdown-select { line-height: 24px; } #controls .ui-dropdown-list { height: 66px; line-height: 2.5em; overflow: hidden; } #delete-axis { margin: 0 38px 0 0; float: right !important; } /* tool controls */ #tool-section .property .name { width: 150px; } #canvas-bg { width: 16px; height: 16px; margin: 5px; background: url("images/toggle-background.png") center right no-repeat; } #canvas-bg:hover { cursor: pointer; } #canvas-bg[data-alpha='false'] { background-position: center left; } #canvas-bg[data-alpha='true']...

Audio and video manipulation - Developer guides
html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08...
... html <video id="my-video" controls src="myvideo.mp4" type="video/mp4"> </video> javascript var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); // configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; ...
... playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination)...

HTML attribute reference - HTML: Hypertext Markup Language
autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser.
... controls <audio>, <video> indicates whether the browser should show playback controls to the user.
...the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).
...the attribute can be used with form controls (such as the value of textarea elements), or in elements in an editing host (e.g., using contenteditable attribute).

HTML elements reference - HTML: Hypertext Markup Language
<datalist> the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
... <fieldset> the html <fieldset> element is used to group several controls as well as labels (<label>) within a web form.
... <form> the html <form> element represents a document section containing interactive controls for submitting information.
... <input> the html <input> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.

Autoplay guide for media and Web Audio APIs - Web media technologies
handling autoplay failure with media controls a common use case for autoplay is to automatically begin to play a video clip that goes along with an article, an advertisement, or a preview of the page's main functionality.
... to autoplay videos like these, you have two options: don't have an audio track, or have an audio track but configure the <video> element to mute the audio by default, like this: <video src="/videos/awesomevid.webm" controls autoplay muted> this video element is configured to include the user controls (typically play/pause, scrubbing through the video's timeline, volume control, and muting); also, since the muted attribute is included, the video will autoplay but with the audio muted.
... the user has the option, however, of re-enabling the audio by clicking on the unmute button in the controls.
... media.autoplay.enabled.user-gestures-needed (nightly builds only) a boolean preference which controls whether or not detection of user gestures is allowed to override the setting of media.autoplay.default.

Web video codec guide - Web media technologies
<video controls src="filename.webm"></video> an mp4 container and the avc (h.264) video codec, ideally with aac as your audio codec.
... <video controls> <source type="video/webm" src="filename.webm"> <source type="video/mp4" src="filename.mp4"> </video> keep in mind that the <video> element requires a closing </video> tag, whether or not you have any <source> elements inside it.
... <video controls src="filename.webm"></video> an mp4 container using the hevc codec using one of the advanced main profiles, such as main 4:2:2 with 10 or 12 bits of color depth, or even the main 4:4:4 profile at up to 16 bits per component.
... <video controls> <source type="video/webm" src="filename.webm"> <source type="video/mp4" src="filename.mp4"> </video> recommendations for archival, editing, or remixing there are not currently any lossless—or even near-lossless—video codecs generally available in web browsers.

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
this element takes a number of attributes, and can easily be made to display controls (buttons, etc) using widgets and layouts native to whatever platform it is running on.
...apart from menuitem elements, it can be used with buttons and other input controls.
... input controls xul includes a number of input control elements that are very similar to html's form-related elements.

Adding Events and Commands - Archive of obsolete content
it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes.
...you shouldn't normally use this event to trigger actions on input controls such as buttons.
...maybe your extension needs to disable or enable a series of controls when the user logs in or out of a service, or when firefox detects it's online or offline.

The Essentials of an Extension - Archive of obsolete content
/** * controls the browser overlay for the hello world extension.
...you can easily recognize the access keys on windows because the letter that corresponds to the access key is underlined, as in the following image: most user interface controls have the accesskey attribute, and you should use it.
...in a window you have to be more careful picking access keys because there are usually more controls there.

Index of archived content - Archive of obsolete content
initialization and cleanup prerequisites walkthrough webextensions for firefox for android listening to events in firefox extensions migrating from internal linkage to frozen linkage migrating raw components to add-ons multiple item extension packaging offering a context menu for form controls overlay extensions firefox addons developer guide appendix: what you should know about open-source software licenses chapter 1: introduction to extensions chapter 2: technologies used in developing extensions chapter 3: introduction to xul—how to build a more intuiti...
... xforms select element xforms select1 element xforms submit element xforms switch module xforms textarea element xforms trigger element xforms upload element other resources requests for enhancement rfe to the custom controls rfe to the custom controls interfaces rfe to the xforms api troubleshooting xforms forms using xforms and php xforms api reference xforms config variables xforms custom controls xforms custom controls examples xforms styling ba...
... using titles with external stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly sized list item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards using the right markup to invoke plugins windows media in netscape xquery xul booster xul parser in python input archive ...

In-Depth - Archive of obsolete content
use this when you want one or two controls to look different from the operating systems defaults.
...-moz-box-direction controls which way the items in this box are displayed.
...this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar.

Documentation for BiDi Mozilla - Archive of obsolete content
as far as we could discover, icu is the only one which is 100% compatible with uba, including support for explicit directional controls (lro, rlo, etc, and their html equivalents).
...form controls: based on bidi options in preferences, the text mode of form controls may be "logical", "visual" or "like containing document".
... we have also tested behaviour of all controls with dir=rtl and added support where necessary.

Introducing the Audio API extension - Archive of obsolete content
the following example extracts the data from an audio element: <!doctype html> <html> <head> <title>javascript metadata example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('loadedmetadata', loadedmetadata, false); <...
... we can extend the previous example to visualize the timestamp and the first two samples in a <div> element: <!doctype html> <html> <head> <title>javascript visualization example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <pre id="raw">hello</pre> <script> function loadedmetadata() { channels = audio.mozchannels; rate = audio.mozsamplerate; framebufferlength = audio.mozframebufferlength; } function audioavailable(event) { var framebuffer = event.framebuffer; var t = event.t...
... <audio id="a1" src="song.ogg" controls> </audio> <script> var a1 = document.getelementbyid('a1'), a2 = new audio(), buffers = []; function loadedmetadata() { // mute a1 audio.

Positioning - Archive of obsolete content
for a menupopup placed inside a menu, button or toolbarbutton, the position attribute controls how the menupopup is anchored to the parent menu, button or toolbarbutton.
... for a menupopup or panel attached using the popup attribute, the position attribute controls how the popup is anchored to the element with the popup attribute.
... for a tooltip, the position attribute controls how the tooltip is anchored to the element with the tooltip attribute.

Adding Labels and Images - Archive of obsolete content
this element is useful for informative text at the top of a dialog or a group of controls for example.
...the label element is intended for labels of controls, such as text fields.
...in the next section, we will learn how to add some input controls to a window.

listbox - Archive of obsolete content
see list controls for more information.
... the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

window - Archive of obsolete content
chromemargin type: margin string controls the amount of chrome that should be visible on each side of the window.
...if this code is placed between window tags it messes up all other controls on the window.
... if it is placed between box tags, window controls are rendered fine, but still there is this error message.

Dialogs in XULRunner - Archive of obsolete content
xul has a wide range of input controls you can use in a dialog.
... in the future, i will try to go into more detail on some of the existing and planned xul input controls.
... future articles in this series will look at input controls, printing, the clipboard, and xpcom.

Troubleshooting XForms Forms - Archive of obsolete content
ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
... any instance, no controls get bound if no controls show with either inline instance or an <xf:instance src="...">, check the following: as with inline instance, make sure the instance of the form control ref binding expression matches the namespace of the data.
... if form controls are within repeat, check that you are using attribute nodeset for the repeat instead of attribute ref.

Mozilla XForms Specials - Archive of obsolete content
custom control interface we have added a lot of functionality to our user interface, which allows the form authors to create custom controls.
... it involves exposing some (script) functionality on all our controls, like output, input, etc.
...more information can be found in xforms:custom controls.

What is accessibility? - Learn web development
the way this usually affects web development work is the requirement that controls be accessible by the keyboard — we'll discuss keyboard accessibility in later articles in the module, but it is a good idea to try out some websites using just the keyboard to see how you get on.
... can you use the tab key to move between the different controls of a web form, for example?
... you can find more details about keyboard controls in our cross browser testing using native keyboard accessibility section.

HTML Cheatsheet - Learn web development
embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">your browser does not support the html5 audio element.</audio> your browser does not support the html5 audio element.
... embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your browser does not support audio.
... embedded video <video controls src="https://udn.realityripple.com/samples/1f/6cc66528b8.mp4">the <code>video</code> element is unsupported.</video> the video element is unsupported.

Introduction to web APIs - Learn web development
in the same way, if you want to say, program some 3d graphics, it is a lot easier to do it using an api written in a higher-level language such as javascript or python, rather than try to directly write low level code (say c or c++) that directly controls the computer's gpu or other graphics functions.
... audio and video apis like htmlmediaelement, the web audio api, and webrtc allow you to do really interesting things with multimedia such as creating custom ui controls for playing audio and video, displaying text tracks like captions and subtitles along with your videos, grabbing video from your web camera to be manipulated via a canvas (see above) or displayed on someone else's computer in a web conference, or adding effects to audio tracks (such as gain, distortion, panning, etc).
...we don't include any default browser controls.

Software accessibility: Where are we today?
use the accessible toolkit checklist to make sure your ui controls adhere to standards.
... ensure correct keyboard accessibility when developing new controls: mozilla's xul and html widgets already support proper keyboard accessibility, so let's not regress in that area.
... support msaa and atk via nsiaccessible when developing new controls: mozilla is a great position to provide context so that custom controls can be made accessible.

A bird's-eye view of the Mozilla framework
the various x toolkit implementations provide a set of widgets for ui controls such as menus, command buttons, dialog boxes and scroll bars.
... the mozilla xptoolkit module provides a similar set of facilities for building cross-platform ui controls implemented as xml user interface language (xul) packages.
...the nglayout engine also parses xul ui controls into a dom tree and handles rendering of the ui.

Statistics API
there are several ways to get access to this data: the environment variable moz_gctimer controls text dumping of gc stats.
... the browser preference javascript.options.mem.log controls dumping of human-readable gc stats messages to the developer console.
... the browser preference javascript.options.mem.notify controls emission of json encoded gc stats to an observer interface.

XForms Accessibility
or you may be guided by toolkit checklist to check keyboard navigation for xforms controls.
... forms controls module some of form control elements may be represented in few ways by different widgets.
...it can have the following representations: combobox listbox radio group additional elements these elements may be used as child elements to the form controls described above.

Index
765 nsimsgdbviewcommandupdater interfaces, interfaces:scriptable, messages, xpcom, xpcom api reference, xpcom interface reference, thunderbird the nsimsgdbviewcommandupdater interface controls changes that occur as the selection changes.
... 820 nsiparentalcontrolsservice firefox 3, interfaces, interfaces:scriptable, parental controls, xpcom, xpcom api reference, xpcom interface reference implemented by: @mozilla.org/parental-controls-service;1.
... 1113 nsixultemplatebuilder interfaces, xpcom, xpcom api reference, xpcom interface reference, xul the nsitemplatebuilder interface controls the display of elements using a xul template element and is automatically attached to an element containing a datasources attribute.

BiquadFilterNode() - Web APIs
q: controls how peaked the response will be at the cutoff frequency.
... q: controls how peaked the response will be at the cutoff frequency.
... q: controls the width of the band.

Document.execCommand() - Web APIs
enableinlinetableediting enables or disables the table row/column insertion and deletion controls.
... the controls are disabled by default since firefox 64 (bug 1490641).
... insertbronreturn controls whether the enter key inserts a <br> element, or splits the current block element into two.

Using the MediaStream Recording API - Web APIs
we wanted to give the first two (the header and the controls) fixed heights: header { height: 70px; } .main-controls { padding-bottom: 0.7rem; height: 170px; } however, we wanted to make the third area (which contains the recorded samples you can play back) take up whatever space is left, regardless of the device height.
....onstop = function(e) { console.log("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.url.createobjecturl(blob); audio.src = audio...
... <article class="clip"> <audio controls></audio> <p>your clip name</p> <button>delete</button> </article> after that, we create a combined blob out of the recorded audio chunks, and create an object url pointing to it, using window.url.createobjecturl(blob).

Using the Web Speech API - Web APIs
we also set a few other properties of the recognition instance before we move on: speechrecognition.continuous: controls whether continuous results are captured (true), or just a single result each time recognition is started (false).
...this includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered.
... html and css the html and css are again pretty trivial, simply containing a title, some instructions for use, and a form with some simple controls.

ARIA: button role - Accessibility
a menu button is a button that controls a menu and has an aria-haspopup property attribute set to either menu or true.
... aria-expanded if the button controls a grouping of other elements, the aria-expanded state indicates whether the controlled grouping is currently expanded or collapsed.
...ntbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio.play(); } } result accessibility concerns buttons are interactive controls and thus focusable.

Understandable - Accessibility
again, sensible design — make the navigation controls the same across all pages or views.
... 3.2.4 consistent identification (aa) controls or components that have the same functionality should be identified in the same way across different pages or views.
...content or controls), let the user control when they want that change to occur (e.g.

@viewport - CSS: Cascading Style Sheets
user-zoom controls whether or not the user should be able to change the zoom factor.
... orientation controls the document's orientation.
... viewport-fit controls the display of the document on non-rectangular displays.

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
the css writing-mode property controls the block flow direction.
...however, replaced elements such as form controls which include text, should match the writing mode in use.
...in vertical-lr it controls the size in the block direction because it does not rotate with the text.

WebKit CSS extensions - CSS: Cascading Style Sheets
pseudo-classes :-webkit-animating-full-screen-transition :-webkit-any() :-webkit-any-link* :-webkit-autofill :-webkit-autofill-strong-password :-webkit-drag :-webkit-full-page-media :-webkit-full-screen* :-webkit-full-screen-ancestor :-webkit-full-screen-document :-webkit-full-screen-controls-hidden * now standard.
... ::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-w...
...ebkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
iscrete-capacity-level-indicator div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; } <div>lorem</div> safari inner-spin-button div{ color: black; -webkit-appearance: inner-spin-button; } <div>lorem</div> firefox chrome safari image-controls-button div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; } <div>lorem</div> safari list-button div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; } <div>lorem</div> safari datalist listitem div { color: black; -...
...utton; } <div>lorem</div> safari media-volume-slider div{ color: black; -webkit-appearance: media-volume-slider; } <div>lorem</div> chrome safari media-volume-sliderthumb div{ color: black; -webkit-appearance: media-volume-slider-thumb; } <div>lorem</div> chrome safari media-controls-background div{ color: black; -webkit-appearance: media-controls-background; } <div>lorem</div> chrome safari media-controls-dark-bar-background div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; } <div>lorem</div> safari media-co...
...ntrols-fullscreen-background div{ color: black; -webkit-appearance: media-controls-fullscreen-background; } <div>lorem</div> chrome safari media-controls-light-bar-background div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; } <div>lorem</div> safari media-current-time-display div{ color: black; -webkit-appearance: media-current-time-display; } <div>lorem</div> chrome safari media-time-remaining-display div{ color: black; -webkit-appearance: media-time-remaining-display; } <div>lorem</div> chrome safari menulist-text div { c...

font-variant-numeric - CSS: Cascading Style Sheets
the font-variant-numeric css property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
... <numeric-spacing-values> these values controls the sizing of figures used for numbers.
... <numeric-fraction-values> these values controls the glyphs used to display fractions.

Media buffering, seeking, and time ranges - Developer guides
this will work with <audio> or <video>; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> we can access these attributes like so: var myaudio = document.getelementbyid('my-audio'); var bufferedtimeranges = myaudio.buffered; timeranges object timeranges are a series of non-overlapping ranges of time, with start and stop times.
...tance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; ...
...the html for our player looks like this: <audio id="my-audio" preload controls> <source src="music.mp3" type="audio/mpeg"> </audio> <div class="buffered"> <span id="buffered-amount"></span> </div> <div class="progress"> <span id="progress-amount"></span> </div> we'll use the following css to style the buffering display: .buffered { height: 20px; position: relative; background: #555; width: 300px; } #buffered-amount { display: block; height: 100%; bac...

Feature Policy - HTTP
it is similar to content security policy but controls features instead of security behavior.
... the primary difference between the http header and the allow attribute is that the allow attribute only controls features within an iframe.
... the header controls features in the response and any embedded content within the page.

SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; animatable: yes glyph-orientation-horizontal deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is horizontal.
... value: <angle>|inherit; animatable: no glyph-orientation-vertical deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is vertical.
... value: auto|<length>|inherit; animatable: yes letter-spacing it controls spacing between text characters.

page-mod - Archive of obsolete content
attachto controls whether to attach scripts to tabs that were already open when the page-mod was created, and whether to attach scripts to iframes as well as the topmost document.
... contentscriptwhen controls the point during document load at which content scripts are attached.

disabled - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

Introduction to XUL - Archive of obsolete content
preamble mozilla has configurable, downloadable chrome, meaning that the arrangement and even presence or absence of controls in the main window is not hardwired into the application, but loaded from a separate ui description.
... widgets widgets are generally objects like form controls: buttons, text boxes, tree controls and the like.

textbox (Toolkit autocomplete) - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

Textbox (XPFE autocomplete) - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

More Button Features - Archive of obsolete content
the dir attribute controls the direction of the image and text.
...in this case, the dir attribute controls the placement above or below.

XUL accessibility guidelines - Archive of obsolete content
to solve this problem, we use the aria-labelledby attribute on both controls (note the double l—aria uses uk-style spelling) to specify that the checkbox and the textbox are both labeled by the the entire group of components.
... <checkbox id="rememberhistorydays" aria-labelledby="historydaysprelabel historybox historydayspostlabel"> <label id="historydaysprelabel">remember visited pages for the last</label> <textbox id="historydays" aria-labelledby="historydaysprelabel historybox historydayspostlabel"/> <label id="historydayspostlabel" >days.</label> the aria-labelledby attribute comes in handy for controls embedded within controls (usually embedded within a checkbox or a radio button).

arrowscrollbox - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

button - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

checkbox - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

colorpicker - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

command - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

datepicker - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

description - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

key - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

keyset - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

label - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

listcell - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

listhead - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

listheader - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

listitem - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

menu - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

menuitem - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

menulist - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

menuseparator - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

preference - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

radio - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

radiogroup - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

richlistbox - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

richlistitem - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

scale - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

tab - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

tabs - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

textbox - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

timepicker - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

toolbarbutton - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

tree - Archive of obsolete content
the disabled attribute is allowed only for form controls.
... visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.

XUL - Archive of obsolete content
xul controls lists some of the common controls provided by xul.
... xul controls a quick list of all of the available xul controls.

Theme changes in Firefox 3.5 - Archive of obsolete content
if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls.
... supporting 3.5 features video/audio player: controlbar has to be styled (chrome://global/skin/media/videocontrols.css) shadow effect for disabled text using text-shadow.

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
also since you know which engine you're targeting, you're free to confidently use advanced built in controls such as xml processing via e4x, xpath, and xslt.
...the example application is running under jaxer build 0.9.7.2472 and also incorporates the extjs version 2.1 javascript framework for user interface controls.

XForms Group Element - Archive of obsolete content
introduction the group element is used as a container for defining a hierarchy of form controls.
...core form controls, groups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant.

Building up a basic demo with A-Frame - Game development
a-frame is built on top of webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc.
... the controls are already working: you can use the mouse for looking around and the keyboard for movement (try the w, a, s, and d keys.) there's even an "enter vr mode" button in the bottom right corner of the screen, to allow you to shift to full screen, stereoscopic image viewing if you have the necesary vr hardware set up and ready.

Images, media, and form elements - Learn web development
many form controls are added to your page by way of the <input> element — this defines simple form fields such as text inputs, through to more complex fields added in html5 such as color and date pickers.
... for consistency it is a good idea to set margins and padding to 0 on all elements, then add these back in when styling particular controls button, input, select, textarea { box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all together into a "reset" as a final step, we can wrap up the various properties dis...

CSS values and units - Learn web development
an example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is).
... let's rewrite our last example to use rgb colors: you can also use rgba colors — these work in exactly the same way as rgb colors, and so you can use any rgb values, however there is a fourth value that represents the alpha channel of the color, which controls opacity.

Flexbox - Learn web development
align-items controls where the flex items sit on the cross axis.
... justify-content controls where the flex items sit on the main axis.

Styling links - Learn web development
focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of browsers in the mid-1990s.
...="#">microsoft edge</a>.</p></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssi...

HTML forms in legacy browsers - Learn web development
form controls appearance is browser and operating system specific.
...and, if you must alter the default styles of your form widgets, define a style guide to ensure consistency among all your form controls so user experience is not destroyed.

Sending form data - Learn web development
the names and values of the non-file form controls are sent to the server as name=value pairs joined with ampersands.
... include one or more <input type="file"> controls to allow your users to select the file(s) that will be uploaded.

Test your skills: Multimedia and embedding - Learn web development
add an attribute to make browsers display some default controls.
...you need to: add an attribute to make browsers display some default controls.

Third-party APIs - Learn web development
adding different controls the map has a number of different controls available; by default it just shows a zoom control.
... you can expand the controls available using the map.addcontrol() method; add this to your code, inside the window.onload handler: map.addcontrol(l.mapquest.control()); the mapquest.control() method just creates a simple full-featured control set, and it is placed in the top-right hand corner by default.

Adding features to our bouncing balls demo - Learn web development
setcontrols() this method will add an onkeydown event listener to the window object so that when certain keyboard keys are pressed, we can move the evil circle around.
... first of all, create a new evil circle object instance (specifying the necessary parameters), then call its setcontrols() method.

Multimedia: video - Learn web development
for example, given video compressions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the browser downloads the first format it understands.
...there are no controls, so there is no way to hear audio.

Mozilla accessibility architecture
accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need information about document content and ui controls, as well as important events like changes of focus.
...in the future xbl form controls may be used, in which case there will be dom content for these sub-parts, and we will not need to override the traversal methods.

Configuring Build Options
the most important of these is moz_objdir, which controls where your application gets built (also known as the object directory).
...the -j flag controls how many parallel builds will run concurrently.

Security best practices for Firefox front-end engineers
this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.
... existing security controls sanitizing all strings that enter the dom through apis such as innerhtml when running system-privileged chrome code, we sanitize all html fragments that are created for chrome-privileged documents.

mozbrowserloadend
in addition, the background of the controls ui bar is changed to the background color of the site that has just loaded, to provide a more integrated experience.
... var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; console.log(e.detail.backgroundcolor); controls.style.background = e.detail.backgroundcolor; }); browser.addeventlistener('mozbrowserloadend',function() { stopreload.textcontent = 'r'; }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadstart mozbrowserlocationchange mozbrowseropenwindow mozbrowsersecuritychange mozbrowsershowmodalprompt mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...

Using the viewport meta tag to control layout on mobile browsers
viewport basics a typical mobile-optimized site contains something like the following: <meta name="viewport" content="width=device-width, initial-scale=1"> the width property controls the size of the viewport.
...(there are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.) the initial-scale property controls the zoom level when the page is first loaded.

AT APIs Support
they typically use standard windows controls for their user interface -- the area outside of the client content window, plus the context menu.
...none of the user interface contains standard os controls.

Building the WebLock UI
if you are planning on deploying the weblock component in some other application, you'll have to devise a different means of access (e.g., native widgetry that instantiates and controls the weblock component).
...the parent of the textbox that users enter an url into is something called an <hbox/>, which is a layout widget - often invisible - that controls the way its child elements are rendered.

Starting WebLock
the first section of the interface controls whether or not weblock checks to see if a web page can be loaded.
...finally, the iweblock interface is the interface that actually controls the web locking functionality.

IAccessibleTable
also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children.
... lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.

IAccessibleTable2
also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children.
... lists, trees, and tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed.

nsIDOMHTMLSourceElement
example <video controls> <source src="foo.webm" type="video/webm; codecs=&quot;vp9, opus&quot;"> your browser does not support the <code>video</code> element.
... </video> this example specifies that a video object with playback controls should be drawn, playing the file "foo.ogg".

nsINavHistoryQuery
domainishost boolean this controls the meaning of domain, and whether it is an exact match domainishost = true, or hierarchical (= false).
... uriisprefix boolean controls the interpretation of uri.

Plug-in Basics - Plugins
it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images.
... see the mozilla activex project page in the plug-in references section below for more information about embedding activex controls in plug-ins or embedding plug-ins in activex applications.

Network request details - Firefox Developer Tools
a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.
... a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text.

Toolbox - Firefox Developer Tools
toolbar the toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.
...m in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between standalone and attached to the browser window access developer tool settings settings see the separate page on the developer tools settings.

AudioContext.createMediaStreamSource() - Web APIs
the range slider below the <video> element controls the amount of gain given to the lowpass filter — increase the value of the slider to make the audio sound more bass heavy!
...so playing/pausing the stream can still be done through the media element api and the player controls.

Constraint validation API - Web APIs
the constraint validation api enables checking values that users have entered into form controls, before submitting the values to the server.
... concepts and usage certain html form controls, such as <input>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.

Element.onfullscreenchange - Web APIs
this gives us a value, isfullscreen, which we pass into a function called adjustmycontrols(), which we imagine to be a function that makes adjustments to the app's user interface to present itself optimally when it's in full-screen mode versus being displayed in a window.
...= handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } specifications specification status comment fullscreen apithe definition of 'onfullscreenchange' in that specification.

Gamepad.mapping - Web APIs
the gamepad.mapping property of the gamepad interface returns a string indicating whether the browser has remapped the controls on the device to a known layout.
...if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard.

Gamepad - Web APIs
properties gamepad.axes read only an array representing the controls with axes present on the device (e.g.
... gamepad.mapping read only a string indicating whether the browser has remapped the controls on the device to a known layout.

Gamepad API - Web APIs
it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other information about the gamepads themselves, and what buttons and other controls are currently being pressed.
... tutorials and guides using the gamepad api implementing controls using the gamepad api specifications specification status comment gamepad extensions editor's draft defines the experimental gamepad extensions.

msAudioCategory - Web APIs
syntax <audio controls="controls" msaudiocategory="backgroundcapablemedia"> </audio> the msaudiocategory property offers a variety of values that can enhance the behavior of your audio-aware app.
... example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src="song.mp3"/> </audio> ...

HTMLMediaElement - Web APIs
htmlmediaelement.controls is a boolean that reflects the controls html attribute, indicating whether user interface items for controlling the resource should be displayed.
... htmlmediaelement.controlslist read only returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.

KeyboardEvent.code - Web APIs
moverate and turnrate are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke.
...finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls.

Key Values - Web APIs
media controller keys because modern remote controls for media devices often include buttons beyond the basic controls covered elsewhere in this document, key values are defined for a broad array of these additional buttons.
... the values below are derived in part form a number of consumer electronics technical specifications: dtv application software environment (part of the atsc specification) open cable application platform 1.1.3 ansi/cea-2014-b: web-based protocol and framework for remote user interface on upnp™ networks and the internet android keyevent key code values note: remote controls typically include keys whose values are already defined elsewhere, such as under multimedia keys or audio control keys.

MediaRecorder: dataavailable event - Web APIs
var chunks = []; mediarecorder.addeventlistener('stop', (event) => { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ...
... var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaStreamAudioSourceNode - Web APIs
the range slider below the <video> element controls the amount of gain given to the lowpass filter — increase the value of the slider to make the audio sound more bass heavy!
...so playing/pausing the stream can still be done through the media element api and the player controls.

MediaStreamConstraints.audio - Web APIs
html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript con...
... result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript con...

MediaStreamTrackAudioSourceNode - Web APIs
the range slider below the <video> element controls the amount of gain given to the lowpass filter — increase the value of the slider to make the audio sound more bass heavy!
...so playing/pausing the stream can still be done through the media element api and the player controls.

Recording a media element - Web APIs
<div class="right"> <div id="stopbutton" class="button"> stop </div> <h2>recording</h2> <video id="recording" width="160" height="120" controls></video> <a id="downloadbutton" class="button"> download </a> </div> on the right we see a stop button and the <video> element which will be used to play back the recorded video.
... notice that the playback panel doesn't have autoplay set (so the playback doesn't start as soon as media arrives), and it has controls set, which tells it to show the user controls to play, pause, and so forth.

Media Session API - Web APIs
it does this by providing metadata for display by the user agent of the media your web app is playing, and allows you to create event handlers, to define your own behaviors for a user-agent playback controls.
... audio.play() .then(_ => { /* set up media session controls, as shown above.

Navigator.mediaSession - Web APIs
in addition, the mediasession interface provides the setactionhandler() method, which lets you receive events when the user engages device controls such as either onscreen or physical play, pause, seek, and other similar controls.
... an internet radio app, for example, can use setactionhandler() to let fhe media controls on a keyboard or elsehwere on the user's device be used to control the app's media playback.

SpeechRecognition - Web APIs
speechrecognition.continuous controls whether continuous results are returned for each recognition, or only a single result.
... defaults to single (false.) speechrecognition.interimresults controls whether interim results should be returned (true) or not (false.) interim results are results that are not yet final (e.g.

VTTCue - Web APIs
the vttcue interface—part of the api for handling webvtt (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element.
... example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒�...

WebGLRenderingContext - Web APIs
webglrenderingcontext.stencilmask() controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
... webglrenderingcontext.stencilmaskseparate() controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.

Example and tutorial: Simple synth keyboard - Web APIs
the settings bar beneath the keyboard, we'll put some controls for configuring the layer.
... for now, we will have two controls: one to set the master volume and another to select what periodic waveform to use when generating notes.

WindowOrWorkerGlobalScope.setInterval() - Web APIs
btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; spart = ""; for (nidx; nidx < asheets.length; scroll(asheets[nidx++], 0, false)); clean(); }; } /* usage: */ var otwexample1 = new typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15); /* default frame rate is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-col...
...or: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[&nbsp;<span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span>&nbsp;]</p> <div id="info"> vivamus blandit massa ut metus mattis in fringilla lectus imperdiet.

XRSystem: requestSession() - Web APIs
next, it calls issessionsupported(), passing it the desired session option before enabling controls for entering xr.
... adding controls is a necessary step because entering xr requires a user action.

ARIA: article role - Accessibility
controls to interact with the article, share it, etc.
...controls to interact with the article, share it, etc.

ARIA: document role - Accessibility
<button>close</button> </div> this example shows a dialog widget with some controls and a section with some informational text that the assistive technology user can read when tabbing to it.
... assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard input events, such as up or down arrow keyboard events, to control the reading cursor.

ARIA: form role - Accessibility
important: use an html <form> element to contain your form controls, rather than the aria form role, unless you have a very good reason.
...even if you are using the form landmark instead of <form>, you are encouraged to use native html form controls like button, input, select, and textarea associated wai-aria roles, states, and properties no role specific states or properties.

ARIA: dialog role - Accessibility
the label given to the dialog will provide contextual information for the interactive controls inside the dialog.
... in other words, the dialog's label acts like a grouping label for the controls inside it (similar to how a <legend> element provides a grouping label for the controls inside a <fieldset> element).

ARIA: textbox role - Accessibility
if list or both is set, the aria-controls and aria-haspopup attributes should also be included.
... the value of aria-controls is the id of the element that contains the list of suggested values.

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
community member ben millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using html 4, simply by embedding the input into the label.
...for labels with embedded form controls, using aria-labelledby is still the best approach.

Accessibility documentation index - Accessibility
10 basic form hints aria, accessibility, forms when implementing forms using traditional html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
... 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls.

Web accessibility for seizures and physical reactions - Accessibility
the epilepsy foundation's article "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the browser or in the os.
... see the mdn document, "accessibility: what users can to to browse more safely" to see more details of how a user accesses the controls.

:focus-visible - CSS: Cascading Style Sheets
compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard.
...this matches the native focus behavior for controls like <button>.

:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.

:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.

Border-radius generator - CSS: Cascading Style Sheets
ty="2"></div> <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-input-slider" data-topic="width" data-info="width" data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> <div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min...
...; width: 100%; line-height: 20%; font-size: 20px; text-align: center; position: relative; top: 40%; } #radius-lock [data-topic="top-left"] { top: 10px; left: 10px; } #radius-lock [data-topic="top-right"] { top: 10px; right: 10px; } #radius-lock [data-topic="bottom-right"] { bottom: 10px; right: 10px; } #radius-lock [data-topic="bottom-left"] { bottom: 10px; left: 10px; } /** * controls */ #dimensions { width: 200px; color: #444; float:left; } #dimensions input { background: #555; color: #fff; border: none; border-radius: 3px; } #output { width: 500px; padding: 10px 0; margin: 10px 0; color: #555; text-align: center; border: 1px dashed #999; border-radius: 3px; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; user-select: text; fl...

Handling content breaks in multicol - CSS: Cascading Style Sheets
the orphans property controls the number of lines left on their own at the end of a fragment.
... the widows property controls the number left on their own at the start of a fragment.

Basic concepts of flexbox - CSS: Cascading Style Sheets
this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together.
... the flex-shrink property where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away.

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
-moz-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-orient: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include flex-direction($args...); } flexbox wrap the flex-wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.
... -webkit-flex-flow: $values; -ms-flex-flow: $values; flex-flow: $values; } flexbox order the order property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

align-items - CSS: Cascading Style Sheets
in flexbox, it controls the alignment of items on the cross axis.
... in grid layout, it controls the alignment of items on the block axis within their grid area.

<color> - CSS: Cascading Style Sheets
infobackground background color for tooltip controls.
... infotext text color for tooltip controls.

font - CSS: Cascading Style Sheets
system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.).
... small-caption the system font used for labeling small controls.

Developer guides
user input and controls modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
... this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.

HTML attribute: multiple - HTML: Hypertext Markup Language
/option> <option>happy@woodworkers.com</option> <option>sleepy@woodworkers.com</option> <option>bashful@woodworkers.com</option> <option>sneezy@woodworkers.com</option> <option>dopey@woodworkers.com</option> <option>doc@woodworkers.com</option> </select> </p> <p> <input type="submit" value="submit"> </p> </form> note the difference in appearance between the two form controls.
... recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls.

HTML attribute: readonly - HTML: Hypertext Markup Language
note: only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
... attribute interactions the difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

<form> - HTML: Hypertext Markup Language
the html <form> element represents a document section containing interactive controls for submitting information.
... (in previous versions of html, character encodings could also be delimited by commas.) autocapitalize a nonstandard attribute used by ios safari that controls how textual form elements should be automatically capitalized.

<input type="checkbox"> - HTML: Hypertext Markup Language
where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
...(only the htmlinputelement’s checked idl attribute is updated.) note: unlike other input controls, a checkboxes value is only included in the submitted data if the checkbox is currently checked.

<input type="date"> - HTML: Hypertext Markup Language
as an example, the date picker on firefox for android looks like this: unsupporting browsers gracefully degrade to a text input, but this creates problems in consistency of user interface (the presented controls are different) and data handling.
... span { position: relative; } span::after { right: -18px; position: absolute; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } at the moment, the best way to deal with dates in forms in a cross-browser way is to have the user enter the day, month, and year in separate controls, or to use a javascript library such as jquery date picker.

<input type="radio"> - HTML: Hypertext Markup Language
where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected.
...by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls.

<input type="time"> - HTML: Hypertext Markup Language
12-hour 24-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel.
...; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with times in forms in a cross-browser way, for the time being, is to get the user to enter the hours and minutes (and seconds if required) in separate controls (<select> elements are popular; see below for an example), or use javascript libraries such as the jquery timepicker plugin.

<input type="week"> - HTML: Hypertext Markup Language
mobile platforms such as android and ios make really good use of such input types, providing specialist ui controls that make it really easy to select values in a touchscreen environment.
... the best way to deal with week/years in forms in a cross-browser way at the moment is to get the user to enter the week number and year in separate controls (<select> elements being popular; see below for an example), or use javascript libraries such as jquery date picker.

Standard metadata names - HTML: Hypertext Markup Language
referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header.
... the browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars.

<output>: The Output element - HTML: Hypertext Markup Language
the two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.
...assistive technology will thereby announce the results of ui interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
if the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error.
... <video controls> <source src="foo.webm" type="video/webm"> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov" type="video/quicktime"> i'm sorry; your browser doesn't support html5 video.

Using Feature Policy - HTTP
the primary difference between the http header and the allow attribute is that the allow attribute only controls features within an iframe.
... the header controls features in the response and any embedded content within the page.

Feature-Policy: xr-spatial-tracking - HTTP
the http feature-policy header xr-spatial-tracking directive controls whether the current document is allowed to use the webxr device api.
... this policy controls whether navigator.xr.requestsession() can return xrsession that requires spatial tracking and whether user agent can indicate support for sessions supporting spatial tracking via navigator.xr.issessionsupported() and devicechange event on navigator.xr object.

MathML attribute reference - MathML
unimplemented location <mscarries> unimplemented longdivstyle <mlongdiv> controls the style of the long division layout.
... scriptlevel <mstyle> controls mostly the font-size.

The building blocks of responsive design - Progressive web apps (PWAs)
if you wish, you can point to multiple video files via <source> attributes, each with their own source and mime type: <video controls> <source src="videos/720/crystal720.mp4" type="video/mp4"> <source src="videos/720/crystal720.webm" type="video/webm"> </video> but you can go one step further.
...so for example: <video controls> <source src="videos/320/crystal320.mp4" type="video/mp4" media="all and (max-width: 480px)"> <source src="videos/320/crystal320.webm" type="video/webm" media="all and (max-width: 480px)"> <source src="videos/720/crystal720.mp4" type="video/mp4" media="all and (min-width: 481px)"> <source src="videos/720/crystal720.webm" type="video/webm" media="all and (min-width: 481px)"> </video> this allows your site to serve different video files based on the available space, in order to optimize the user's experience.

d - SVG: Scalable Vector Graphics
h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier curve cubic bézier curves are smooth curve definitions using four points: starting point (current point) (po = {xo, yo}) end point (pn = {xn, yn}) start control point (pcs = {xcs, ycs}) (controls curvature near the start of the curve) end control point (pce = {xce, yce}) (controls curvature near the end of the curve) after drawing, the end point (pn) becomes the current point for the next command (po′).
...ertex points --> <circle cx="10" cy="90" r="1.5"/> <circle cx="50" cy="10" r="1.5"/> <circle cx="90" cy="90" r="1.5"/> </g> <use xlink:href="#controlpoints" x="100" /> </svg> quadratic bézier curve quadratic bézier curves are smooth curve definitions using three points: starting point (current point) po = {xo, yo} end point pn = {xn, yn} control point pc = {xc, yc} (controls curvature) after drawing, the end point (pn) becomes the current point for the next command (po′).

textLength - SVG: Scalable Vector Graphics
css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg.
... html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.

Using shadow DOM - Web Components
think for example of a <video> element, with the default browser controls exposed.
... all you see in the dom is the <video> element, but it contains a series of buttons and other controls inside its shadow dom.

page-worker - Archive of obsolete content
the boolean key script controls if scripts from the page are allowed to run.

ui/toolbar - Archive of obsolete content
you can supply three sorts of ui components: action buttons toggle buttons frames this add-on builds part of the user interface for a music player using action buttons for the controls and a frame to display art and the currently playing song: var { actionbutton } = require('sdk/ui/button/action'); var { toolbar } = require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); va...

Extension Etiquette - Archive of obsolete content
xpcom contract ids, for instance, should always begin with an @, followed by a domain name that the author controls, e.g., "@example.com/foo/bar;1" it is important that the prefix that you use be unlikely to conflict with other code, and that it be indicative of the name of your add-on.

Inline options - Archive of obsolete content
the title attribute is used as a label for the controls.

Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design.

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
other than what we have stated before, you should take into account the controls at the bottom of the customize toolbars dialog.

Adding sidebars - Archive of obsolete content
sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls.

Custom XUL Elements with XBL - Archive of obsolete content
many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements.

JavaScript Object Management - Archive of obsolete content
/** * controls the browser overlay for the hello world extension.

Observer Notifications - Archive of obsolete content
/** * controls the browser overlay for the hello world extension.

MMgc - Archive of obsolete content
1 items - poolobject.cpp:29 abcparser.cpp:948 … class avmplus::string - 13.2% - 1602 kb 15675 items, avg 104b 65.6% - 1051 kb - 14397 items - stringobject.cpp:46 avmcore.cpp:2300 … 20.4% - 326 kb - 10439 items - avmcore.cpp:2300 abcparser.cpp:1077 … 6.5% - 103 kb - 3311 items - avmcore.cpp:2300 abcparser.cpp:1077 … other profiling tools the gcstats flag on the gc object controls verbose output.

Makefile - .mk files - Archive of obsolete content
makefile description client.mk top level makefile which controls the overall build config/android-common.m config/autoconf.mk config/rules.mk targets (export, deps, libs, tools) and generic build rules config/static-checking-config.mk config/version.mk makefile description config/myconfig.mk user defined build configuration values config/myrules.mk user defined makefile rules for building $(topsrcdir)/$(moz_build_app)/app-config.mk application specific build configuration ...

Notes on HTML Reflow - Archive of obsolete content
the reflow reason controls how a frame reacts during a reflow, and is one of the following: initial, for the very first time that the frame hierarchy is flowed.

Source code directories overview - Archive of obsolete content
widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes.

Using content preferences - Archive of obsolete content
browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls.

Visualizing an audio spectrum - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="song.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels = audio.mozchannels; ra...

Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.

Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc.

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.

Dehydra Function Reference - Archive of obsolete content
strict boolean: controls js strict mode werror boolean: turns js warnings into errors gczeal int: this is a write-only parameter to set turn on frequent garbage collection.

Priority Content - Archive of obsolete content
dependant on: updating dhtml web pages for next generation browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.

Using XPInstall to Install Plugins - Archive of obsolete content
in particular, like many ocx files (activex controls) it installs to a special directory within c:\winnt\system32\, called c:\winnt\system32\myplugin.

chromemargin - Archive of obsolete content
« xul reference home chromemargin type: margin string controls the amount of chrome that should be visible on each side of the window.

panel.consumeoutsideclicks - Archive of obsolete content
« xul reference home consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.

primary - Archive of obsolete content
the attribute also controls whether the column picker allows the user to deselect this column.

Panels - Archive of obsolete content
you may wish to also place a cancel or close button within the panel, especially if the panel is larger with a lot of controls within it.

Popup Guide - Archive of obsolete content
it is useful when you wish to display some controls temporarily over the existing ui.

Accesskey display rules - Archive of obsolete content
each controls of xul can have an accesskey which is specified by accesskey attribute or accesskey property (see accesskey attribute document for the detail).

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
this property controls whether an element can be focused.

Adding HTML Elements - Archive of obsolete content
you can also add labels to controls either by using the html label element, or you can simply put the text inside another html block element (such as p or div) as in the example below.

Focus and Selection - Archive of obsolete content
this property controls whether an element can be focused.

Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.

XUL Structure - Archive of obsolete content
for example, while the form controls on an html page are accessible via the document.forms property, this property isn't available for xul documents, since xul doesn't have forms in the html sense.

XUL Tutorial - Archive of obsolete content
introduction introduction xul structure the chrome url manifest files simple elements creating a window adding buttons adding labels and images input controls numeric controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handle...

XUL Reference - Archive of obsolete content
triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- toolbars toolbar toolbarbutton toolbargrippy toolbaritem toolbarpallete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow browser tabbrowser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification n...

Accessibility/XUL Accessibility Reference - Archive of obsolete content
although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do.

The Implementation of the Application Object Model - Archive of obsolete content
xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus.

XUL Coding Style Guidelines - Archive of obsolete content
it could contain xul specific element types for ui controls, html4 markups for content data, and even javascript for user event handling.

panel - Archive of obsolete content
consumeoutsideclicks type: boolean controls whether or not the event that caused the popup to be automatically dismissed (or "rolled up") should be consumed or be dispatched as a normal event.

treecol - Archive of obsolete content
the attribute also controls whether the column picker allows the user to deselect this column.

Windows and menus in XULRunner - Archive of obsolete content
this time i want to add some of the things common to a desktop application user interface: windows and dialogs menus and toolbars os common dialogs controls or widgets windows each window or dialog should be created in its own xul file.

calICalendarView - Archive of obsolete content
this link allows the calicalendarview to have a way of creating, modifying, and deleting events based on user interaction with the dom nodes it controls, often without requiring any other user interaction.

Mozilla release FAQ - Archive of obsolete content
you could tackle: porting mozilla to the os you use work on moving #ifdef platform to #ifdef feature/bug if you're on unix, port mozilla to the toolkit you prefer modularize/clean up apis fix bugs work on the expermental features (mail/news, aurora, nglayout) add new things: make opendoc and ole nglayout controls write new skins (see themes.org) add preference interfaces for the hidden features there's plenty to do..

Using the W3C DOM - Archive of obsolete content
nputname"].value inputname.value document.forms["formname"].inputname.value or document.forms["formname"].elements["inputname"].value formctrlname document.forms["formname"].formctrlname or document.forms["formname"].elements["formctrlname"] document.forms(0) document.forms[0] more on accessing forms and form elements: referencing forms and form controls by comp.lang.javascript newsgroup faq notes dom 2 specification on accessing forms and form elements referencing forms and form elements correctly, javascript best practices, by matt kruse for accessing a group of elements, the dom specification also includes getelementsbytagname, which returns a nodelist of all the elements with the given tag name in the order they appear in the document: va...

-ms-accelerator - Archive of obsolete content
it enables users to hide navigation indicators for menu items and controls until the alt key is pressed.

::-ms-clear - Archive of obsolete content
the clear button is only shown on focused, non-empty text controls.

ActiveXObject - Archive of obsolete content
for example, for the local intranet zone, you typically need to change a custom setting to "initialize and script activex controls not marked as safe for scripting." to identify members of an automation object that you can use in your code, you may need to use a com object browser, such as the ole/com object viewer, if no reference documentation is available for the automation object.

XForms API Reference - Archive of obsolete content
specification interfaces nsixforms...uielement interfaces implemented by the js part of a control nsixforms...accessors interface exposing states about the bound instance node for a given control frozen interfaces nsixformsmodelelement the model interface experimental interfaces nsixformsdelegate the delegate interface for xforms:custom_controls nsixformsaccessors the accessors interface for xforms:custom_controls nsixformsnsmodelelement custom extension(s) to the nsixformsmodelelement interface nsixformsnsinstanceelement custom extension(s) to the instance element ...

XForms Input Element - Archive of obsolete content
it controls the display of the label relative to the checkbox.

XForms Label Element - Archive of obsolete content
ui behavior accesskey support - if the accesskey attribute is specified on labeled xforms controls or on the label element itself then the label text for the control will contain an indicator as to what the access key is in a standard way.

XForms Repeat Element - Archive of obsolete content
however, it can influence the layout of generated controls depending on its appearance attribute.

XForms Switch Module - Archive of obsolete content
form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered.

XForms - Archive of obsolete content
xforms custom controls custom controls lets the form author "skin" each xforms control through xbl, and create f.x.

Displaying a graphic with audio samples - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript spectrum example</title> </head> <body> <audio id="audio-element" src="revolve.ogg" controls="true" style="width: 512px;"> </audio> <div><canvas id="fft" width="512" height="200"></canvas></div> <img id="mozlogo" style="display:none" src="mozilla2.png"></img> <script> var canvas = document.getelementbyid('fft'), ctx = canvas.getcontext('2d'), channels, rate, framebufferlength, fft; function loadedmetadata() { channels ...

Game distribution - Game development
it's also nice to provide desktop controls for your games even if you're mostly targeting mobile.

WebVR — Virtual Reality for the Web - Game development
see the vreffect and vrcontrols functions available on the three.js github to help you implement and handle webvr with three.js.

Bounce off the walls - Game development
in the fourth chapter we'll look at implementing a controllable paddle — see paddle and keyboard controls.

Create the Canvas and draw on it - Game development
the body contains <canvas> and <script> elements — we will render the game inside the first one and write the javascript code that controls it in the second one.

Track the score and win - Game development
in the next lesson you will broaden the game's appeal by adding mouse controls.

2D breakout game using pure JavaScript - Game development
lesson details all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and keyboard controls game over build the brick field collision detection track the score and win mouse controls finishing up starting with pure javascript is the best way to get a solid knowledge of web game development.

Bounce off the walls - Game development
compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps this is starting to look more like a game now, but we can't control it in any way — it's high time we introduced the player paddle and controls.

2D breakout game using Phaser - Game development
lesson details all the lessons — and the different versions of the mdn breakout game we are building together — are available on github: initialize the framework scaling load the assets and print them on screen move the ball physics bounce off the walls player paddle and controls game over build the brickfield collision detection the score win the game extra lives animations and tweens buttons randomizing gameplay as a note on learning paths — starting with pure javascript is the best way to get a solid knowledge of web game development.

2D maze game with device orientation - Game development
handleorientation is the function bound to the event responsible for the device orientation api, providing the motion controls when the game is running on a mobile device with appropriate hardware.

Visual typescript game engine - Game development
| | ├── resources.ts | | | ├── sound.ts | | | ├── system.ts | | | ├── view-port.ts | | | ├── visual-render.ts | | ├── interface/ | | | ├── drawi.ts | | | ├── global.ts | | | ├── visual-components.ts | | ├── multiplatform/ | | | ├── mobile/ | | | | ├── player-controls.ts | | | ├── global-event.ts | | ├── types/ | | | ├── global.ts | | ├── engine-config.ts | | ├── ioc.ts | | ├── starter.ts | ├── icon/ ...

Gecko FAQ - Gecko Redirect 1
layout component tracks content layout bugs that may be related to a variety of specifications html 4.0 elements, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 complia...

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css (cascading style sheets) is a declarative language that controls how webpages look in the browser.

Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
this code is executed by the victims and lets the attackers bypass access controls and impersonate users.

Domain - MDN Web Docs Glossary: Definitions of Web-related terms
a domain is an authority within the internet that controls its own resources.

Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, script-src allows developers to allow trusted sources of script to execute on a page, while font-src controls the sources of web fonts.

RTSP: Real-time streaming protocol - MDN Web Docs Glossary: Definitions of Web-related terms
real-time streaming protocol (rtsp) is a network protocol that controls how the streaming of a media should occur between a server and a client.

Accessibility - Learn web development
wai-aria basics following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.

Debugging CSS - Learn web development
in this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses.

Pseudo-classes and pseudo-elements - Learn web development
:focus — only applies if the user focuses the element using keyboard controls.

Fundamental text and font styling - Learn web development
eight: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p { } </textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </div> </div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); const reset = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = docume...

Styling lists - Learn web development
</li> <li>the shiny rod</li> <li>the goblin statue</li> </ol> </li> </ul></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssi...

What are browser developer tools? - Learn web development
in safari, the controls are not so clearly presented, but you should see the html if you haven't selected something else to appear in the window.

What will your website look like? - Learn web development
you can also use the controls on the right to further filter the results.

Use JavaScript within a webpage - Learn web development
let users tab through all controls (e.g., links and form input) in a logical order.

Creating hyperlinks - Learn web development
note: a link title is only revealed on mouse hover, which means that people relying on keyboard controls or touchscreens to navigate web pages will have difficulty accessing title information.

Getting started with HTML - Learn web development
</textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'open sans light',helvetica,arial,sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('c...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
the game will have two players, one of whom controls the game using the a key, and the other with the l key.

Client-side storage - Learn web development
const video = document.createelement('video'); video.controls = true; const source1 = document.createelement('source'); source1.src = mp4url; source1.type = 'video/mp4'; const source2 = document.createelement('source'); source2.src = webmurl; source2.type = 'video/webm'; ...

Fetching data from the server - Learn web development
by default, the site displays all the products, but you can use the form controls in the left hand column to filter them by category, or search term, or both.

Client-side web APIs - Learn web development
this article shows you how to do common tasks such as creating custom playback controls.

Introduction to the server side - Learn web development
the site you are on right now controls access to content: articles are visible to everyone, but only users who have logged in can edit them.

Componentizing our Svelte app - Learn web development
we also use todo.id to create unique ids for the new input controls and labels.

Introduction to automated testing - Learn web development
you'll find that you can enter urls into the address bar, and use the other controls like you'd expect on a real device.

Handling common HTML and CSS problems - Learn web development
for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this e...

Mozilla's Section 508 Compliance
(e) when bitmap images are used to identify controls, status indicators, or other programmatic elements, the meaning assigned to those images shall be consistent throughout an application's performance.

Android-specific test suites
if an issue is found within the code, a warning will be identified and put into the correct category that the suite controls — this could be malicious, correctness, or just bad practice.

Obsolete Build Caveats and Tips
features that depend on this sdk include: windows vista parental controls file associations and application registration on vista and above ability to display the uac shield icon in the ui thunderbird windows search integration text services framework support there are two ways to obtain it: download the windows vista sdk from the microsoft download center.

Developer guide
task-graph generation what controls the jobs that run on a push to version control?

Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.

Index
172 security best practices for firefox front-end engineers best practices, developing firefox, developing mozilla, firefox, front-end, mozilla, performance this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.

Firefox
always keep in mind the side effects your changes may have, from blocking other tasks, to interfering with other user interface elements.privacythis document lists privacy-related documentation.security best practices for firefox front-end engineersthis article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.site identity buttonthe site identity button is a feature in firefox that gives users more information about the sites they visit.

Embedding the editor
it is likely that we'd use xbl to implement this type of widget, as is the plan for other form controls.

Introduction to Layout in Mozilla
invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze form controls - rods, bryner style resolution and rule tree - dbaron views, widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow key data structures detailed walk-through incrementalism q & a?

CustomizableUI.jsm
flows: false }; for (var p in props) { toolbaritem.setattribute(p, props[p]); } toolbaritem.appendchild(image); return toolbaritem; } }); when you want to remove this widget run this code: customizableui.destroywidget('navigator-throbber-id-within-customizableui-object'); custom type - involved the browser uses type custom for its zoom controls and edit controls in the panel.

Localization content best practices
menu and control labels the labels on controls and menu titles, menu option strings, and so forth should not end in periods (in english).

Initial setup
a solid, unicode-based, text editor here are some suggestions: windows: notepad++ or notepad2 gnu/linux: vim, gedit or kate mac os x: textwrangler gnu make make is a tool which controls the generation of executables.

Mozilla Quirks Mode Behavior
prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other browser (bug 783213).

DMD
this controls how records are sorted.

Profiling with Xperf
for 64-bit windows 7 or vista, you'll need to do a registry tweak and then restart to enable stack walking: reg add "hklm\system\currentcontrolset\control\session manager\memory management" -v disablepagingexecutive -d 0x1 -t reg_dword -f symbol server setup with the latest versions of the windows performance toolkit, you can modify the symbol path directly from within the program via the trace menu.

accessibility.tabfocus
the preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.

browser.altClickSave
the preference browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.

browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.

browser.pagethumbnails.capturing_disabled
the preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.

browser.search.context.loadInBackground
browser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.

browser.urlbar.formatting.enabled
the preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.

browser.urlbar.trimURLs
the preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.

javascript.options.showInConsole
the preference javascript.options.showinconsole controls whether errors or warnings in chrome code are shown in the error console.

javascript.options.strict
this preference controls whether javascript warnings are logged to the javascript console.

nglayout.debug.disable xul fastload
the preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.

reader.parse-on-load.force-enabled
the preference reader.parse-on-load.force-enabled controls if the reader mode used in firefox mobile should be enabled independent of the memory available in the device.

ui.alertNotificationOrigin
ui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in.

view_source.syntax_highlight
the preference view_source.syntax_highlight controls whether markup in the view source view is syntax highlighted.

A guide to searching crash reports
they apply to the "crash reports" tab of any search results, and are not related to grouping.) the "facet on" field is the one that controls grouping.

Introduction to NSPR
in nspr, a mutual exclusion lock (or mutex) of type prlock controls locking, and associated condition variables of type prcondvar communicate changes in state among threads.

Locks
lock type lock functions in nspr, a mutex of type prlock controls locking, and associated condition variables communicate changes in state among threads.

Logging
these controls are platform dependent.

NSPR LOG MODULES
these controls should be set in the nspr_log_modules environment variable at execution time to affect nspr's log service for your application.

Named Shared Memory
set permissions and or access controls at create and attach time to ensure you get the desired security.

PRLogModuleInfo
the prlogmoduleinfo structure controls logging from within your application.

PR_SetConcurrency
description setting concurrency controls the number of virtual processors that nspr uses to implement its m x n threading model.

Threads
controlling thread priorities for an overview of the way nspr controls thread priorities, see setting thread priorities.

NSS FAQ
export controls on encryption software, see the mozilla crypto faq.

NSS 3.12.6 release notes
nss_ssl_require_safe_negotiation values: 1: requiresafenegotiation = true unset: requiresafenegotiation = false controls whether safe renegotiation indication is required for initial handshake.

NSS 3.46 release notes
bugs fixed in nss 3.46 bug 1572164 - don't unnecessarily free session in nsc_wrapkey bug 1574220 - improve controls after errors in tstcln, selfserv and vfyserv cmds bug 1550636 - upgrade sqlite in nss to a 2019 version bug 1572593 - reset advertised extensions in ssl_constructextensions bug 1415118 - nss build with ./build.sh --enable-libpkix fails bug 1539788 - add length checks for cryptographic primitives (cve-2019-17006) bug 1542077 - mp_set_ulong and mp_set_int should return errors on bad values bu...

NSS_3.12.3_release_notes.html
this environment variable controls softoken's response to that error.

JSObjectOps.newObjectMap
it creates a jsobjectmap that completely controls the new object's behavior.

JS_GetGCParameter
jsgc_high_frequency_low_limit / "highfrequencylowlimit" controls for dynamic heap growth.

SpiderMonkey 1.8
a new gc parameter, jsgc_stackpool_lifespan, controls how eagerly spidermonkey returns unused memory back to the system.

AT Development
xforms references - gecko documentation showing how xforms controls are mapped to at apis.

Querying Places
there is a built-in view that will put results in tree controls, and you can also implement your own.

Creating the Component Code
what we'll be working on the component we'll be working on in this book controls a special mode in your browser that prevents users from leaving the current domain or a set of safe domains.

Preface
this book provides a tutorial about building an xpcom component that controls browsing behavior.

Using XPCOM Components
components is the javascript object that controls the connection to components, and classes is an array of all of the classes you can ask for by contract id.

XPCOM Stream Guide
the spout controls how much water you can get out of the tank at a time.

NS_ConvertASCIItoUTF16
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

NS_ConvertUTF16toUTF8
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

NS_ConvertUTF8toUTF16
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

NS_LossyConvertUTF16toASCII
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsAdoptingCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsAdoptingString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsAutoString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsCAutoString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print...

nsCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsDependentCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsDependentString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsFixedCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsFixedString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsPromiseFlatCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsPromiseFlatString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

nsXPIDLCString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsastring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsastring_internal& astring void assignwithconversion(const prunichar*, print32) - source parame...

nsXPIDLString
@param aeliminateleading controls stripping of leading ws @param aeliminatetrailing controls stripping of trailing ws parameters prbool aeliminateleading prbool aeliminatetrailing assignwithconversion void assignwithconversion(const nsacstring_internal&) - source assign/append/insert with _lossy_ conversion parameters nsacstring_internal& astring void assignwithconversion(const char*, print32) - source parameter...

IAccessible2
if the role is the same for two controls that are adjacent in the tab order, this can be used to detect the new control.

IAccessibleAction
there is no need to implement this method for single action controls since that would be redundant with the standard msaa programming practice of getting the mnemonic from get_acckeyboardshortcut.

imgIEncoder
skipfirstframe=[yes|no] -- default: "no" controls display of the first frame in animations.

nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xulcheckbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullist...

nsIAccessibleRelation
relation_controller_for 0x02 this object is interactive and controls some attribute of a target object.

nsIAlertsService
inprivatebrowsing optional controls the image loading behavior.

nsIAppShellService
aloaddefaultpage obsolete since gecko 1.8 controls whether the window should try to load a default content page on its own.

nsIAsyncStreamCopier
this controls the granularity of the copy operation.

nsICachingChannel
load_only_if_modified 1 << 31 this load flag controls what happens when a document would be loaded from the cache to satisfy a call to asyncopen.

nsIDOMWindow
scrollbars nsidombarprop the object that controls whether or not scrollbars are shown in the window.

getFile
ns_win_controls_dir "cntls" ns_win_printers_dir "prnts" ns_win_personal_dir "pers" ns_win_favorites_dir "favs" ns_win_startup_dir "strt" ns_win_recent_dir "rcnt" ns_win_send_to_dir "sndto" ns_win_bitbucket_dir "buckt" ns_win_startmenu_dir "strt" same thing as ns_os_desktop...

nsIDownloadManager
download_blocked_parental 6 the download has been blocked, either by parental controls or the virus scanner determining that a file is infected and cannot be cleaned.

nsIMarkupDocumentViewer
obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls.

nsIMsgDBViewCommandUpdater
the nsimsgdbviewcommandupdater interface controls changes that occur as the selection changes.

nsINavHistoryResultTreeViewer
method overview nsinavhistoryresultnode nodefortreeindex(in unsigned long aindex); unsigned long treeindexfornode(in nsinavhistoryresultnode anode); attributes attribute type description collapseduplicates boolean controls whether duplicate adjacent elements are collapsed into a single item in the tree.

nsIParserUtils
sanitizerdropforms (1 << 4) flag for sanitizer: drops forms and form controls (excluding <fieldset> and <legend>.

nsIPromptService
on the mac), or closing the window through the os controls.

nsISocketTransportService
void shutdown(); obsolete since gecko 1.8 attributes attribute type description autodialenabled boolean controls whether or not the socket transport service should poke the autodialer on connection failure.

nsIWebBrowserFindInFrames
embedding/components/find/public/nsiwebbrowserfind.idlscriptable controls how find behaves when multiple frames or iframes are present.

nsIXFormsModelElement
refresh() signals the xforms processor to perform a full refresh of form controls bound to instance nodes for the given xforms model.

nsIXULTemplateBuilder
the nsitemplatebuilder interface controls the display of elements using a xul template element and is automatically attached to an element containing a datasources attribute.

XPCOM Interface Reference
ultnodensinavhistoryobservernsinavhistoryquerynsinavhistoryqueryoptionsnsinavhistoryqueryresultnodensinavhistoryresultnsinavhistoryresultnodensinavhistoryresultobservernsinavhistoryresulttreeviewernsinavhistoryresultviewobservernsinavhistoryresultviewernsinavhistoryservicensinavhistoryvisitresultnodensinetworklinkservicensiobservernsiobserverservicensioutputstreamnsioutputstreamcallbacknsiparentalcontrolsservicensiparserutilsnsipasswordnsipasswordmanagernsipermissionnsipermissionmanagernsipipensiplacesimportexportservicensiplacesviewnsipluginhostnsiprefbranch2nsipreflocalizedstringnsiprefservicensiprincipalnsiprinterenumeratornsiprintingpromptnsiprivatebrowsingservicensiprocessnsiprocess2nsiprocessscriptloadernsiprofilensiprofilelocknsiprofileunlockernsiprogramminglanguagensiprogresseventsinknsipr...

XPCOM Interface Reference by grouping
nsicookieacceptdialog nsicookieconsent nsicookiemanager nsicookiemanager2 nsicookiepermission nsicookiepromptservice nsicookieservice nsicookiestorage nsisessionstore crypto nsicryptohash filter nsiparentalcontrolsservice nsipermission nsipermissionmanager nsisecuritycheckedcomponent ssl nsisslerrorlistener stream stream nsipipe nsitraceablechannel nsitransport nsitransporteventsink nsitransportse...

nsMsgViewCommandType
applyfilters 30 apply filters to the selected messages runjunkcontrols 31 run junk mail controls on the selected messages.

Performance
this value controls the number of pages of the file that can be kept in memory at once.

Using COM from js-ctypes
this started out with dynamic data exchange (dde), which was superseded by object linking and embedding (ole) and later by the component object model (com), automation objects, activex controls, and the .net framework.

Streams - Plugins
there is no guarantee that npp_write will receive requests for ranges in the same order as you requested (although this typically is the case; the server controls the order).

3D view - Firefox Developer Tools
controlling the 3d view there are keyboard shortcuts and mouse controls available for the 3d view.

Accessibility Inspector - Firefox Developer Tools
keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels.

Debugging service workers - Firefox Developer Tools
there are a couple of other useful controls on this view, too.

DevTools API - Firefox Developer Tools
a preference name that controls the visiblity of the tool.

Basic operations - Firefox Developer Tools
on the left, you'll see an entry for the new snapshot, including its timestamp, size, and controls to save or clear this snapshot: clearing a snapshot to remove a snapshot, click the "x" icon: saving and loading snapshots if you close the memory tool, all unsaved snapshots will be discarded.

Edit fonts - Firefox Developer Tools
fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics.

Flame Chart - Firefox Developer Tools
there are two main controls you can use to navigate the flame chart: zoom: increase/decrease the selected portion of the complete profile that's displayed in the flame chart 1) mouse wheel up/down in the flame chart.

Animating CSS properties - Firefox Developer Tools
it looks like this: it has two controls: a button to start/stop the animation, and a radio group to choose to animate using margin, or to animate using transform.

Intensive JavaScript - Firefox Developer Tools
there's also a video version of this walkthrough: the demo website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker.

Settings - Firefox Developer Tools
web console enable timestamps controls whether the web console displays timestamps.

Animation - Web APIs
the animation interface of the web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source.

AudioBufferSourceNode.loopEnd - Web APIs
buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart and loopend properties on the fly.

AudioBufferSourceNode.loopStart - Web APIs
buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart, and loopend properties on the fly.

AudioContext.createJavaScriptNode() - Web APIs
it controls the frequency of callbacks asking for a buffer refill.

AudioContext.createMediaElementSource() - Web APIs
so playing/pausing the media can still be done through the media element api and the player controls.

AudioContext.createMediaStreamDestination() - Web APIs
<!doctype html> <html> <head> <title>createmediastreamdestination() demo</title> </head> <body> <h1>createmediastreamdestination() demo</h1> <p>encoding a pure sine wave to an opus file </p> <button>make sine wave</button> <audio controls></audio> <script> var b = document.queryselector("button"); var clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { ...

AudioContext - Web APIs
an audio context controls both the creation of the nodes it contains and the execution of the audio processing, or decoding.

AudioNode.connect() - Web APIs
this example creates an oscillator, then links it to a gain node, so that the gain node controls the volume of the oscillator node.

AudioTrack - Web APIs
properties enabled a boolean value which controls whether or not the audio track's sound is enabled.

BaseAudioContext.createScriptProcessor() - Web APIs
this value controls how frequently the audioprocess event is dispatched and how many sample-frames need to be processed each call.

BaseAudioContext.createStereoPanner() - Web APIs
event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'createstereopanner()' in that specification.

CSSStyleDeclaration.setProperty() - Web APIs
in each case, this is done with the setproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width: 80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-conte...

Manipulating video using canvas - Web APIs
background: black; color:#cccccc; } #c2 { background-image: url(media/foo.png); background-repeat: no-repeat; } div { float: left; border :1px solid #444444; padding:10px; margin: 10px; background:#3b3b3b; } </style> </head> <body> <div> <video id="video" src="media/video.mp4" controls="true" crossorigin="anonymous"/> </div> <div> <canvas id="c1" width="160" height="96"></canvas> <canvas id="c2" width="160" height="96"></canvas> </div> <script type="text/javascript" src="processor.js"></script> </body> </html> the key bits to take away from this are: this document establishes two canvas elements, with the ids c1 and c2.

Basic animations - Web APIs
w = 60, fa = []; window.onkeydown = function (t) { var e = t.key; (e.search("arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "i" != e || (console.log("inc"), fw -= 10), "d" != e && "d" != e || (console.log("dec"), fw += 10) }, init(); output other examples a basic ray-caster a good example of how to do animations using keyboard controls.

Canvas API - Web APIs
the zim framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials.

Channel Messaging API - Web APIs
messageport controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other.

console - Web APIs
each of these results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.

ConvolverNode.normalize - Web APIs
the normalize property of the convolvernode interface is a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not.

ConvolverNode - Web APIs
convolvernode.normalize a boolean that controls whether the impulse response from the buffer will be scaled by an equal-power normalization when the buffer attribute is set, or not.

CustomElementRegistry.define() - Web APIs
options optional object that controls how the element is defined.

DataTransfer.dropEffect - Web APIs
the datatransfer.dropeffect property controls the feedback (typically visual) the user is given during a drag and drop operation.

Document: DOMContentLoaded event - Web APIs
function dosomething() { console.info('dom loaded'); } if (document.readystate === 'loading') { // loading hasn't finished yet document.addeventlistener('domcontentloaded', dosomething); } else { // `domcontentloaded` has already fired dosomething(); } live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-ar...

Document.designMode - Web APIs
document.designmode controls whether the entire document is editable.

Document.importNode() - Web APIs
deep optional a boolean which controls whether to include the entire dom subtree of the externalnode in the import.

Document: readystatechange event - Web APIs
bubbles no cancelable no interface event event handler property onreadystatechange examples live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js ...

Document.requestStorageAccess() - Web APIs
dom.storage_access.max_concurrent_auto_grants controls the threshold number of storage access grants at which users will begin to receive prompts.

Element: error event - Web APIs
examples live example html <div class="controls"> <button id="img-error" type="button">generate image error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify...

Element.requestFullscreen() - Web APIs
currently, the only option is navigationui, which controls whether or not to show navigation ui while the element is in full-screen mode.

FormData() - Web APIs
er name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type="submit" value="submit!"> </form> note: only successful form controls are included in a formdata object, i.e.

FullscreenOptions.navigationUI - Web APIs
"show" the browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived size of the screen) will be clamped to leave room for this user interface.

Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.

Gamepad.axes - Web APIs
the gamepad.axes property of the gamepad interface returns an array representing the controls with axes present on the device (e.g.

Gamepad.id - Web APIs
this information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.

GlobalEventHandlers.onplay - Web APIs
example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video.

HTMLCanvasElement.height - Web APIs
this is one of the two properties, the other being htmlcanvaselement.width, that controls the size of the canvas.

HTMLCanvasElement.width - Web APIs
this is one of the two properties, the other being htmlcanvaselement.height, that controls the size of the canvas.

HTMLElement - Web APIs
htmlelement.properties read only returns a htmlpropertiescollection… htmlelement.spellcheck is a boolean that controls spell-checking.

HTMLFieldSetElement - Web APIs
htmlfieldsetelement.formread only an htmlformcontrolscollection or htmlcollection referencing the containing form element, if this element is in a form.

HTMLFormElement.reportValidity() - Web APIs
the htmlformelement.reportvalidity() method returns true if the element's child controls satisfy their validation constraints.

HTMLImageElement.complete - Web APIs
let lightboxelem = document.queryselector("#lightbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabl...

HTMLInputElement.stepDown() - Web APIs
if the value before invoking the stepdown() method is invalid, for example, if it doesn't match the constraints set by the step attribute, invoking the stepdown() method will return a value that does match the form controls constraints.

HTMLInputElement.stepUp() - Web APIs
if the value before invoking the stepup() method is invalid—for example, if it doesn't match the constraints set by the step attribute—invoking the stepup() method will return a value that does match the form controls constraints.

HTMLMediaElement.autoplay - Web APIs
<video id="video" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> </video> *** disable autoplay (recommended) *** false is the default value document.queryselector('#video').autoplay = false; specifications specification status comment html living standardthe definition of 'htmlmediaelement.aut...

HTMLMediaElement: loadstart event - Web APIs
bubbles no cancelable no interface event event handler property onloadstart examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video ...

HTMLMediaElement.loop - Web APIs
the htmlmediaelement.loop property reflects the loop html attribute, which controls whether the media element should start over when it reaches the end.

HTMLMediaElement.playbackRate - Web APIs
this is used to implement user controls for fast forward, slow motion, and so forth.

HTMLMediaElement: progress event - Web APIs
bubbles no cancelable no interface event event handler property onprogress examples live example html <div class="example"> <button type="button">load video</button> <video controls width="250"></video> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css .event-log-contents { width: 18rem; height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "button log" "video log"; } button { grid-area: button; width: 10rem; margin: .5rem 0; } video { g...

HTMLMedia​Element​.textTracks - Web APIs
examples we start with a <video> that has several <track> children <video controls poster="/images/sample.gif"> <source src="sample.mp4" type="video/mp4"> <source src="sample.ogv" type="video/ogv"> <track kind="captions" src="samplecaptions.vtt" srclang="en"> <track kind="descriptions" src="sampledescriptions.vtt" srclang="en"> <track kind="chapters" src="samplechapters.vtt" srclang="en"> <track kind="subtitles" src="samplesubtitles_de.vtt" srclang="de"> <track ki...

HTMLScriptElement - Web APIs
for scripts from other origins, this controls if error information will be exposed.

HTMLVideoElement - Web APIs
htmlvideoelement.mszoom controls whether the video frame is trimmed to fit the video display.

The HTML DOM API - Web APIs
formdataevent htmlformcontrolscollection htmloptionscollection radionodelist validitystate canvas and image interfaces these interfaces represent objects used by the canvas api as well as the <img> element and <picture> elements.

Intersection Observer API - Web APIs
but this example leaves room for adding configuration controls to adjust the granularity, for example.

MediaDevices.getUserMedia() - Web APIs
security there are a number of ways security management and controls in a user agent can cause getusermedia() to return a security-related error.

MediaElementAudioSourceNode - Web APIs
so playing/pausing the media can still be done through the media element api and the player controls.

MediaPositionState.duration - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.

MediaPositionState.playbackRate - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.

MediaPositionState.position - Web APIs
for example, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.

MediaRecorder.ondataavailable - Web APIs
var chunks = []; mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaRecorder.onstop - Web APIs
mediarecorder.onstop = function(e) { console.log("data available after mediarecorder.stop() called."); var audio = document.createelement('audio'); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); var audiourl = window.url.createobjecturl(blob); audio.src = audiourl; console.log("recorder stopped"); } mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } ...

MediaRecorder - Web APIs
le after mediarecorder.stop() called."); var clipname = prompt('enter a name for your sound clip'); var clipcontainer = document.createelement('article'); var cliplabel = document.createelement('p'); var audio = document.createelement('audio'); var deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.innerhtml = "delete"; cliplabel.innerhtml = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); audio.controls = true; var blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; var aud...

MediaSession.setActionHandler() - Web APIs
these actions let a web app receive notifications when the user engages a device's built-in physical or onscreen media controls, such as play, stop, or seek buttons.

MediaSession - Web APIs
for example, a smartphone might have a standard panel in its lock screen that provides controls for media.

msPlayToSource - Web APIs
example <video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay /> <script type="text/javascript"> // step 1: obtain playtomanager object for app’s current view.

Navigator - Web APIs
navigator.mediasession returns mediasession object which can be used to provide metadata that can be used by the browser to present information about the currently-playing media to the user, such as in a global media controls ui.

NavigatorPlugins.javaEnabled() - Web APIs
syntax result = window.navigator.javaenabled() example if (window.navigator.javaenabled()) { // browser has java } notes the return value for this method indicates whether the preference that controls java is on or off - not whether the browser offers java support in general.

PannerNode.setVelocity() - Web APIs
as the vector controls both the direction of travel and its velocity, the three parameters x, y and z are expressed in meters per second.

PaymentRequest.show() - Web APIs
other reasons a securityerror may be thrown are at the discretion of the user agent, and may include situations such as too many calls to show() being made in a short time or show() being called while payment requests are blocked by parental controls.

Payment Request API - Web APIs
accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything.

RTCIceCandidate.type - Web APIs
if (candidate.type == "host") { showhostcontrols(); } else { hidehostcontrols(); } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.type' in that specification.

ReadableStream.ReadableStream() - Web APIs
type optional this property controls what type of readable stream is being dealt with.

Request.cache - Web APIs
it controls how the request will interact with the browser's http cache.

Screen.mozEnabled - Web APIs
this boolean attribute controls the device's screen.

Screen - Web APIs
screen.mozbrightness controls the brightness of a device's screen.

ServiceWorkerRegistration.active - Web APIs
an active worker controls a serviceworkerclient if the client's url falls within the scope of the registration (the scope option set when serviceworkercontainer.register is first called.) note: this feature is available in web workers.

SourceBuffer.appendWindowEnd - Web APIs
the appendwindowend property of the sourcebuffer interface controls the timestamp for the end of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.

SourceBuffer.appendWindowStart - Web APIs
the appendwindowstart property of the sourcebuffer interface controls the timestamp for the start of the append window, a timestamp range that can be used to filter what media data is appended to the sourcebuffer.

SourceBuffer.mode - Web APIs
the mode property of the sourcebuffer interface controls whether media segments can be appended to the sourcebuffer in any order, or in a strict sequence.

SourceBuffer.timestampOffset - Web APIs
the timestampoffset property of the sourcebuffer interface controls the offset applied to timestamps inside media segments that are appended to the sourcebuffer.

SpeechRecognition.continuous - Web APIs
the continuous property of the speechrecognition interface controls whether continuous results are returned for each recognition, or only a single result.

SpeechRecognition.interimResults - Web APIs
the interimresults property of the speechrecognition interface controls whether interim results should be returned (true) or not (false.) interim results are results that are not yet final (e.g.

StereoPannerNode.pan - Web APIs
event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'pan' in that specification.

StereoPannerNode - Web APIs
event handler function to increase panning to the right and left // when the slider is moved pancontrol.oninput = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'stereopannernode' in that specification.

TextTrack.mode - Web APIs
safari additionally requires the default boolean attribute to be set to true when implementing your own video player controls in order for the subtitles cues to be shown.

TextTrack - Web APIs
the texttrack interface—part of the api for handling webvtt (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element.

VideoTrack.selected - Web APIs
the videotrack property selected controls whether or not a particular video track is active.

VideoTrack - Web APIs
properties selected a boolean value which controls whether or not the video track is active.

Visual Viewport API - Web APIs
for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device?

WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmask() method of the webgl api controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.

WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method of the webgl api controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.

Using textures in WebGL - Web APIs
view the complete code | open this demo on a new page cross-domain textures loading of webgl textures is subject to cross-domain access controls.

Using DTMF with WebRTC - Web APIs
note that this example is "cheating" by generating both peers in one code stream, rather than having each be a truly separate entity.</p> <audio id="audio" autoplay controls></audio><br/> <button name="dial" id="dial">dial</button> <div class="log"></div> javascript let's take a look at the javascript code next.

Web Video Text Tracks Format (WebVTT) - Web APIs
<video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> within the webvtt file itself you can also define the style directly in the webvtt file.

Fundamentals of WebXR - Web APIs
in webxr, the primary select and squeeze actions are directly supported using events, while other controls are available through a special webxr-specific implementation of the gamepad object.

Lighting a WebXR setting - Web APIs
a tapering rate parameter defines how quickly the brightness of the light falls off at the edges of the cone of light, and, as with point lights, an attenuation parameter controls how the light fades over distance.

WebXR permissions and security - Web APIs
introduction the webxr device api is subject to a number of permission and security controls.

Rendering and the WebXR frame animation callback - Web APIs
after interpreting inputs from the controls (both xr-affliated and otherwise), you need to apply those changes to the scene in order to simulate the user's movement.

Starting up and shutting down a WebXR session - Web APIs
detecting when the available set of webxr input controls changes webxr maintains a list of input controls which is specific to the webxr system.

Using the Web Animations API - Web APIs
here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; transform: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her transform’s rotation over 3 seconds at a constan...

Web Animations API - Web APIs
web animations interfaces animation provides playback controls and a timeline for an animation node or source.

Web Audio API best practices - Web APIs
this can be achieved by play/stop and volume/mute controls.

Migrating from webkitAudioContext - Web APIs
tial distance model // mew standard audiocontext code: var panner = context.createpanner(); panner.distancemodel = "linear"; // linear distance model panner.distancemodel = "inverse"; // inverse distance model panner.distancemodel = "exponential"; // exponential distance model gain control moved to its own node type the web audio standard now controls all gain using the gainnode.

Background audio processing using AudioWorklet - Web APIs
slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output.

Web Audio API - Web APIs
an audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding.

Using the Web Storage API - Web APIs
the landing page provides controls that can be used to customize the color, font, and decorative image: when you choose different options, the page is instantly updated; in addition, your choices are stored in localstorage, so that when you leave the page and load it again, later on, your choices are remembered.

Web Storage API - Web APIs
the landing page provides controls that can be used to customize the colour, font and decorative image.

Window: error event - Web APIs
examples live example html <div class="controls"> <button id="script-error" type="button">generate script error</button> <img class="bad-img" /> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; jus...

Window: load event - Web APIs
cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } .event-log { grid-ar...

XMLHttpRequest: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; mar...

XMLHttpRequest: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = document.qu...

XMLHttpRequest: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuc...

XMLHttpRequest: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: ...

XMLHttpRequest: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = d...

XMLHttpRequest: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <input class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <input class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <input class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } input { width: 11rem; margin: .5rem; } js const xhrbuttonsucces...

XRBoundedReferenceSpace.boundsGeometry - Web APIs
this boundary is typically configured by the user, using the software that controls their xr hardware.

XRInputSource.handedness - Web APIs
this may indicate, for example, an input source which isn't hand-held, such as controls built into a headset or an input device attached to the head or body.

XRPose - Web APIs
if any component of the transform is computed or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software.

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input devices.

XRReferenceSpace - Web APIs
*/ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the xr device.

Web APIs
gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetae...

Using the alert role - Accessibility
if an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an "ok" button that discards the alert) the alertdialog role should be used instead.

Using the status role - Accessibility
if another part of the page controls what appears in the status, the relationship should be made explicit via the aria-controls attribute.

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

ARIA: tabpanel role - Accessibility
<div role="tablist"> <div role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id" tabindex="0">tab label</div> accessibility concerns optionally, warn of any potential accessibility concerns that exist with using this property, and how to work around them.

ARIA: application role - Accessibility
the at will read any semantics like links, headings, form controls, tables, lists, or images.

ARIA: row role - Accessibility
if the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author should reference the container by using the aria-controls attribute.

ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls.

WAI-ARIA Roles - Accessibility
to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable interactive controls.

Web applications and ARIA FAQ - Accessibility
aria provides additional semantics to describe the role, state, and functionality of many familiar user interface controls, such as menus, sliders, trees, and dialogs.

An overview of accessible web applications and widgets - Accessibility
designed to fill the gap between standard html tags and the desktop-style controls found in dynamic web applications, aria provides roles and states that describe the behavior of most familiar ui widgets.

Color contrast - Accessibility
atios: type of content minimum ratio (aa rating) enhanced ratio (aaa rating) body text 4.5 : 1 7 : 1 large-scale text (120-150% larger than body text) 3 : 1 4.5 : 1 active user interface components and graphical objects such as icons and graphs 3 : 1 not defined these ratios do not apply to "incidental" text, such as inactive controls, logotypes, or purely decorative text.

Robust - Accessibility
when scripting custom components, you will need to use wai-aria roles and other features to make sure your controls will be interpreted and are able to be used as intended, e.g.

Text labels and names - Accessibility
without the legend, they would have to navigate around the individual form controls in the group to infer an idea of the overall purpose, which could result in confusion.

Accessibility
wai-aria basics following on from the previous article, sometimes making complex ui controls that involve unsemantic html and dynamic javascript-updated content can be difficult.

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the -webkit-overflow-scrolling css property controls whether or not touch devices use momentum-based scrolling for a given element.

-webkit-touch-callout - CSS: Cascading Style Sheets
the -webkit-touch-callout css property controls the display of the default callout shown when you touch and hold a touch target.

::-webkit-inner-spin-button - CSS: Cascading Style Sheets
changing the cursor in the spin controls in this example, the css cursor is changed to pointer whenever the cursor is positioned over the inner part of the input's spin controls.

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

@font-face - CSS: Cascading Style Sheets
font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless http access controls are used to relax this restriction.

@keyframes - CSS: Cascading Style Sheets
the @keyframes css at-rule controls the intermediate steps in a css animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

orientation - CSS: Cascading Style Sheets
the orientation css descriptor controls the orientation of a document defined by @viewport.

user-zoom - CSS: Cascading Style Sheets
the user-zoom css descriptor controls whether or not the user can change the zoom factor of a document defined by @viewport.

viewport-fit - CSS: Cascading Style Sheets
the viewport-fit css @viewport descriptor controls how a document's viewport fills the screen.

Box alignment in Flexbox - CSS: Cascading Style Sheets
the justify-content property controls how that leftover space is used.

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
for the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.” this value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of.

Typical use cases of Flexbox - CSS: Cascading Style Sheets
form controls flexbox is particularly useful when it comes to styling form controls.

Flow Layout and Overflow - CSS: Cascading Style Sheets
the property that controls how overflow behaves is the overflow property which has an initial value of visible.

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
the underlying source is what controls things like text to speech, and the tab order of the document.

CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of css that provides the rendering model and formatting controls related to the display of ruby annotation.

Replaced elements - CSS: Cascading Style Sheets
however, other form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "widgets").

Viewport concepts - CSS: Cascading Style Sheets
to tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following: <meta name="viewport" content="width=device-width"> the width property controls the size of the viewport.

column-fill - CSS: Cascading Style Sheets
the column-fill css property controls how an element's contents are balanced when broken into columns.

<filter-function> - CSS: Cascading Style Sheets
updating the controls updates the filter effect in real time, allowing you to investigate the effects of different filters.

font-feature-settings - CSS: Cascading Style Sheets
the font-feature-settings css property controls advanced typographic features in opentype fonts.

font-language-override - CSS: Cascading Style Sheets
the font-language-override css property controls the use of language-specific glyphs in a typeface.

font-smooth - CSS: Cascading Style Sheets
the font-smooth css property controls the application of anti-aliasing when fonts are rendered.

font-synthesis - CSS: Cascading Style Sheets
the font-synthesis css property controls which missing typefaces, bold or italic, may be synthesized by the browser.

font-variant-alternates - CSS: Cascading Style Sheets
the font-variant-alternates css property controls the usage of alternate glyphs.

font-variant-caps - CSS: Cascading Style Sheets
the font-variant-caps css property controls the use of alternate glyphs for capital letters.

font-variant-east-asian - CSS: Cascading Style Sheets
the font-variant-east-asian css property controls the use of alternate glyphs for east asian scripts, like japanese and chinese.

font-variant-ligatures - CSS: Cascading Style Sheets
the font-variant-ligatures css property controls which ligatures and contextual forms are used in textual content of the elements it applies to.

font-variant-position - CSS: Cascading Style Sheets
the font-variant-position css property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.

grid-auto-flow - CSS: Cascading Style Sheets
the grid-auto-flow css property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

ime-mode - CSS: Cascading Style Sheets
the ime-mode css property controls the state of the input method editor (ime) for text fields.

Inheritance - CSS: Cascading Style Sheets
in css, inheritance controls what happens when no value is specified for a property on an element.

min() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and input another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.

text-decoration-skip - CSS: Cascading Style Sheets
it controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

text-size-adjust - CSS: Cascading Style Sheets
the text-size-adjust css property controls the text inflation algorithm used on some smartphones and tablets.

user-select - CSS: Cascading Style Sheets
the user-select css property controls whether the user can select text.

Demos of open web technologies
eractive) blobular (interactive) video embedded in svg (or use the local download) summer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source...

Live streaming web audio and video - Developer guides
rtsp real time streaming protocol (rtsp) controls media sessions between endpoints and is often used together with real-time transport protocol (rtp) and with real-time control protocol (rtcp) for media stream delivery.

Web Audio playbackRate explained - Developer guides
next we set playbackrate to 0.5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javasc...

Content categories - Developer guides
some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is present <input>, if the type attribute is not in the hidden state <menu>, if the type attribute is in the toolbar state <object>, if the usemap attribute is present <video>, if the controls attribute is present palpable content content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive.

HTML5 Parser - Developer guides
it controls how your html source code is turned into web pages and, as such, changes to it are rare.

HTML5 - Developer guides
fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displayed.

The HTML autocomplete attribute - HTML: Hypertext Markup Language
note: the autocomplete attribute also controls whether firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads.

HTML attribute: required - HTML: Hypertext Markup Language
in addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required.

HTML attribute: step - HTML: Hypertext Markup Language
recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls.

<button>: The Button element - HTML: Hypertext Markup Language
reset: the button resets all the controls to their initial values, like <input type="reset">.

<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
the html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

<input type="button"> - HTML: Hypertext Markup Language
the top two controls allow you to choose the color and size of the drawing pen.

<input type="month"> - HTML: Hypertext Markup Language
n { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the best way to deal with dates in forms in a cross-browser way (until all of the major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<select> elements being popular; see below for an implementation), or use javascript libraries such as the jquery date picker plugin.

<input type="number"> - HTML: Hypertext Markup Language
you'll have to resort to css to change the size of these controls.

<input type="password"> - HTML: Hypertext Markup Language
<label for="pin">pin:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8"> selecting text as with other textual entry controls, you can use the select() method to select all the text in the password field.

<input type="search"> - HTML: Hypertext Markup Language
ttern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.

<input type="text"> - HTML: Hypertext Markup Language
ttern a regular expression the input's contents must match in order to be valid placeholder an exemplar value to display in the input field whenever it is empty readonly a boolean attribute indicating whether or not the contents of the input should be read-only size a number indicating how many characters wide the input field should be spellcheck controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used list the values of the list attribute is the id of a <datalist> element located in the same document.