HTMLFormControlsCollection - Web APIs
it represents the lists returned by the htmlformelement interface's elements property and the htmlfieldsetelement interface's elements property. this interface replaces one method from htmlcollection, on which it is based. ...
...="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties...
...note that this version of nameditem() hide the one inherited from htmlcollection. ...
...hes the specified name, or null if no nodes match. note that this version of nameditem() hide the one inherited from htmlcollection. like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value"). specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection' in that specification. living standard no change since the last snapshot, html5. html5the definition of 'htmlformcontrolscollection' in that specification. recommendation in this snapshot of html living standard, the htmlformcontrolscollections is defined for the first time. ...

Unconventional controls - Game development
previous overview: control mechanisms having different control mechanisms in your game helps reach broader audiences. implementing mobile and desktop controls is recommended is a must, and gamepad controls add that extra experience. but imagine going even further — in this article we will explore various unconventional ways to control your web game, some more unconventional than others. tv remote playing games on a tv screen doesn't always have to be done through consoles. there's already a gamepad api working on the desktop computers, so we can imitate the experience, but we can go even further. ...
...more unconventional than others. tv remote playing games on a tv screen doesn't always have to be done through consoles. there's already a gamepad api working on the desktop computers, so we can imitate the experience, but we can go even further. modern smart tvs can handle html5 games, because they have a built-in browser that can be used as a gaming platform. smart tvs are shipped with remote controls, which can be used to control your games if you know how. the earliest demo of captain rogers: battle at andromeda was adjusted to work on a huge tv. interestingly enough, the first captain rogers game (asteroid belt of sirius) was optimized for low-end, small-screen, cheap smartphones running firefox os, so you can see the difference three years can make — you can read the whole story in our ...
...imized for low-end, small-screen, cheap smartphones running firefox os, so you can see the difference three years can make — you can read the whole story in our building games for firefox os tv hacks post. using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys. captain rogers had the keyboard controls implemented already: this.cursors = this.input.keyboard.createcursorkeys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote. how do you know the codes for the other remote keys? you can check them by printing the res...

Test your skills: HTML5 controls - Learn web development
est is to assess whether you've understood our the html5 input types article. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...
... implement a basic slider control to go along with the provided label. give it a minimum value of 1, maximum value of 30, and initial value of 10. ...
...stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for html5 controls 1 skill test". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. ...

User input and controls - Developer guides
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. relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. 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. once you decided the input mechanisms, you can...
...yboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea. the following is a set of recommendations and best practices for using such tools in open web apps. decide what input mechanism you’re using keyboard keyboard input can be controlled by your app. 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. note: have a look at the events reference and keyboardevent guide to find out more abo...
... be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. the events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. note: pointer events are not widely supported yet, but a pointer.js polyfill is available on mozilla github. 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. this is the code to request pointer lock on an element: element.requestpointerlock(); note: for a full tutorial and reference, read our pointer_lock_api page. ...

XUL controls - Archive of obsolete content
for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. ...
...08/08/24"/> datepicker reference <description> the description element is used for descriptive text. <description> select a time for the event to start </description> more information about the description element. description reference <groupbox> a groupbox displays a labelled box around other user interface controls. <groupbox> <caption label="network"/> </groupbox> more information about the groupbox element. groupbox reference related elements: caption <filefield> allows the user to select a file. <filefield/> filefield reference <image> an image specified by a url. <image src="start.png"/> ...

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. the good thing about using phaser is that it offers helper variables and functions for easier and faster development, but it's entirely up to you which approach you to choose. pure javascript approach we could implement touch events on o...
...virtual buttons by default. this is placed 30 pixels from the top and left edges of the screen and is 80 pixels wide. the stick being pressed can be handled during the gameplay in the update function like so: if(this.stick.isdown) { // move the player } we can adjust the player's velocity based on the current angle of the stick and move him appropriately. summary that covers adding touch controls for mobile; in the next article we'll see how to add keyboard and mouse support. overview: control mechanisms next ...

HTMLFormControlsCollection.namedItem() - Web APIs
note that this version of nameditem() hides the one inherited from htmlcollection. like that one, in javascript, using the array bracket syntax with a string, like collection["value"] is equivalent to collection.nameditem("value"). syntax var item = collection.nameditem(str); var item = collection[str]; parameters str is a domstring return value item is a radionodelist , element, or null. ...
...str is a domstring return value item is a radionodelist , element, or null. 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. ...

XForms Custom Controls Examples - Archive of obsolete content
introduction here is a collection of misc. custom control examples. please feel free to add your own examples. a full example showing a complete form can be found on xforms:custom_controls. output showing images <binding id="output-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> output showing xhtml <binding id="output-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidget-ou...

RFE to the Custom Controls Interfaces - Archive of obsolete content
introduction this page contains requests for enhancement to the custom control interfaces. you can refer to custom controls page to get familiar with custom controls mechanism. in short, we have the following interfaces: nsixformsaccessors - serves to get/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. this means that the bound node is not allowed to contain el...

Implementing controls using the Gamepad API - Game development
this article looks at implementing an effective, cross-browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers. it features a case study game — hungry fridge, created by enclave games. 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. eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the browser. now in the era of html5, we finally have the gamepad api, which gives us the ability to play browser-based games using gamepad controllers without any plugins. the gamepad api achieves this by providing an int...

Mouse controls - Game development
« previousnext » this is the 9th step out of 10 of the gamedev canvas tutorial. you can find the source code as it should look after completing this lesson at gamedev-canvas-workshop/lesson9.html. the game itself is actually finished, so let's work on polishing it up. we have already added keyboard controls, but we could easily add mouse controls too. listening for mouse movement listening for mouse movement is even easier than listening for key presses: all we need is the listener for the mousemove event. add the following line in the same place as the other event listeners, just below the keyup event: document.addeventlistener("mousemove", mousemovehandler, false); anchoring the paddle movement to the mouse movement we can update the paddle position based on the pointer coor...

Paddle and keyboard controls - Game development
ing just below your drawball() function: function drawpaddle() { ctx.beginpath(); ctx.rect(paddlex, canvas.height-paddleheight, paddlewidth, paddleheight); ctx.fillstyle = "#0095dd"; ctx.fill(); ctx.closepath(); } allowing the user to control the paddle we can draw the paddle wherever we want, but it should respond to the user's actions. it's time to implement some keyboard controls. we will need the following: two variables for storing information on whether the left or right control button is pressed. two event listeners for keydown and keyup events. we want to run some code to handle the paddle movement when the buttons are pressed. two functions handling the keydown and keyup events the code that will be run when the buttons are pressed. the ability to move the pa...

HTMLMediaElement.controls - Web APIs
the htmlmediaelement.controls property reflects the controls html attribute, which controls whether user interface controls for playing the media item will be displayed. syntax var ctrls = video.controls; audio.controls = true; value a boolean. a value of true means controls will be displayed. example var obj = document.createelement('video'); obj.controls = true; specifications specification status comment html living standardthe definition of 'htmlmediaelement.controls' in that specification. living standard no change from html5 html5the definition of 'htmlmediaelement.controls' in that specification. recommendation initial definition. ...

Index - Web APIs
's basically an average between the current buffer and the last buffer the analysernode processed, and results in a much smoother set of value changes over time. 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. 63 animation() api, animation, animations, constructor, experimental, reference, web animations api the animation() constructor of the web animations api returns a new animation object instance. 64 animation.cancel() api, animation, method, reference, web animations, cancel, waapi, web animations api the web...
...event of the audioscheduledsourcenode interface is fired when the source node has stopped playing. 186 audiotrack audio, audiotrack, html, html dom, interface, media, reference, track the audiotrack interface represents a single audio track from one of the html media elements, <audio> or <video>. 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. if the track is disabled by setting enabled to false, the track is muted and does not produce audio. 188 audiotrack.id api, audio, audio track, audiotrack, html dom, interface, media, property, read-onl...
... the property should take on. in addition, you can specify the value as a simple long integer value, in which case the user agent does its best to match the value once all other more stringent constraints are met. 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. 663 convolvernode api, convolvernode, interface, reference, web audio api the convolvernode interface is an audionode that performs a linear convolution on a given audiobuffer, often used to achieve a reverb effect. a convolvernode always has exactly one input and one output. 664 convolvernode() api, audio, construct...
...And 30 more matches

Video and Audio APIs - Learn web development
previous overview: client-side web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc. this article shows you how to do common tasks such as creating custom playback controls. ...
...vascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use browser apis to control video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. 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 interesti...
..."rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. ...
...And 27 more matches

Video player styling basics - Developer guides
the updated, styled example on github, and view it live. preliminary modifications from the original example this section summarises the modifications that were made to the original video player example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. ...
...ons that were made to the original video player example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
... example to make the styling task easier, before the bulk of the work was started. html markup there are a few changes that were made to the html markup shown in the previous article. the custom video controls and <progress> element are now contained within <div> elements, rather than residing inside unordered list items. ...
...And 27 more matches

HTTP Index - HTTP
he same-origin policy which can mitigate speculative side channel attacks as well as cross-site script inclusion attacks. cross-origin resource policy complements cross-origin read blocking (corb), which is a mechanism to prevent some cross-origin reads by default. 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. 21 cors errors cors, errors, http, https, messages, same-origin, security, console, troubleshooting cross...
...s, such as "x-custom-information" or any of the standard but non-basic header names (which are always allowed). 37 feature policy feature policy, feature-policy, http, reference, security, header feature policy allows web developers to selectively enable, disable, and modify the behavior of certain features and apis in the browser. it is similar to content security policy but controls features instead of security behavior. 38 using feature policy feature policy, feature-policy, http, reference, security, header feature policy allows you to control which origins can use which features, both in the top-level page and in embedded frames. essentially, you write a policy, which is an allowed list of origins for each feature. for every feature controlled by feat...
...ponse. 68 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting website. it allows web developers to have more control over the data stored locally by a browser for their origins. 69 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes. if the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done. 70 content-disposition http, reference, header in a multipart/form-data body, the http content-disposition general header is a header that can be u...
...And 23 more matches

Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers. 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. note: you can see the example running live, or check out the source code on github. html markup to start off with, let's take a look at the html that makes up the player. the video first of all the <video> element is de...
...urce code on github. html markup to start off with, let's take a look at the html that makes up the player. the video first of all the <video> element is defined, contained within a <figure> element that acts as the video container. to anyone familiar with html5 markup and the <video> element, there should be nothing here that surprises you. ...
... a poster image is defined for the video, and the preload attribute is set to metadata, which informs the browser that it sho...
...And 18 more matches

Index - Archive of obsolete content
ackage provides the ability to package multiple installable bundles which can then be downloaded and installed by a user, or provided pre-packaged with an application or by an external program. every multiple item package must provide an install.rdf file (not old-style install.js!) and has the same requirements as an extension except as noted below. 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. 256 overlay extensions add-ons, extensions, landing no summary! 257 firef...
...assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab b...
...butes, xul reference no summary! 1151 wraparound xul attributes, xul reference no summary! 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. developers have been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). 1153 deprecated and defunct markup reference, xul {many ...
...And 14 more matches

TCP/IP Security - Archive of obsolete content
ackets across networks. internet protocol (ip) is the fundamental network layer protocol for tcp/ip. other commonly used protocols at the network layer are internet control message protocol (icmp) and internet group management protocol (igmp). data link layer. this layer handles communications on the physical network components. the best-known data link layer protocol is ethernet. ...
... for example, if an application needs to protect sensitive data sent across networks, the application may need to be modified to provide this protection. ...
...l. as previously explained, data is passed from the highest to the lowest layer, with each layer adding more information. because of this, a security control at a higher layer cannot provide protection for lower layers, because the lower layers perform functions of which the higher layers are not aware. security controls that are available at each layer include: application layer. separate controls must be established for each application. ...
...And 14 more matches

Accessible multimedia - Learn web development
ng of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. 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). this article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give ...
...to there for the full details. in short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users. ...
...etails. in short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users. ...
...And 13 more matches

Windows Media in Netscape - Archive of obsolete content
provides working examples. this article deals uniquely with netscape 7.1 running on the windows operating system. detecting the right browser like internet explorer, netscape 7.1 and later versions can play windows media files using the popular windows media player activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. ...
...layer activex control. this control is widely used to provide inline media support for web pages that provide sound, video and other media. 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. the windows media 9 series sdk documentation for netscape browsers says that versions of netscape (including 6.2 and 7.0) support the embedding of the windows media player control ...
...g javascript objects which is useful for client-side detection detection using the user agent string which is useful for server side detection. an advantage of the client-side approach is that it is also possible to detect if windows media player is installed. client-side detection using javascript objects internet explorer implements the activexobject object to create new instances of activex controls. netscape 7.1 introduces geckoactivexobject which can be used in a similar way to create instances of the windows media player. the following javascript illustrates one approach using object detection of activexobject and geckoactivexobject to determine if the windows media activex control is supported and available for use. javascript will dynamically write out what browser you are running, and ...
...And 12 more matches

UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a checkbox only when it is selected. in this article, we will explore in detail the different ui pseudo-classes available to us in modern browsers for styling forms in different states. prerequisites: basic computer literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements. ...
...ld be familiar to you now. more recently, the css selector level 3 and css basic ui level 3 added more pseudo-classes related to html forms that provide several other useful targetting conditions that you can take advantage of. 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. :enabled and :disabled, and :read-only and :read-write: target enabled or disabled form controls (e.g. with the disabled html attribute set), and read-write or read-only form controls (e.g. with the readonly html attri...
...bviously useful. some of the others are aimed at solving very specific niche problems, or simply not very well supported in browsers yet. the ones listed above all have pretty good browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience. note: a number of the pseudo-classes discussed here are concerned with styling form controls based on their validation state (is their data valid, or not?) you'll learn much more about setting and controlling validation constraints in our next article — client-side form validation — but for now we'll keep things simple with regards to form validation, so it doesn't confuse things. styling inputs based on whether they are required or not one of the most basic concepts with regards ...
...And 12 more matches

Feature-Policy - HTTP
n top-level browsing contexts and all nested browsing contexts (iframes). 'self': the feature is allowed by default in top-level browsing contexts and in nested browsing contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. ...
...ng contexts (iframes) in the same origin. the feature is not allowed in cross-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. 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. when this policy is disabled and there were no user gestures, the promise returned by htmlmediaelement.p...
...vice through the ambientlightsensor interface. autoplay controls whether the current document is allowed to autoplay media requested through the htmlmediaelement interface. when this policy is disabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexception. the autoplay attribute on <audio> and <video> elements will be ignored. battery controls whether the use of the battery status api is allowed. when this policy is disabled, the promise returned by navigator.getbattery() will reject with a notallowederror domexception. camera controls whether the current document is allowed to use video input devices. when this policy is disabled, the promise returned by getusermedia() will reject with a notallowederror domexception. display-captur...
...And 12 more matches

Advanced form styling - Learn web development
e, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css. these include: elements involved in creating dropdown widgets, including <select>, <option>, <optgroup> and <datalist>. ...
...up> and <datalist>. <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. unfortunately, the behavior of this property's original implementations was very different across browsers, making it not very usable. newer impl...
...r compatibility. if you look at the reference page you'll see a lot of different possible values listed for -webkit-appearance, however by far the most helpful value, and probably the only one you'll use, is none. this stops any control you apply it to from using system-level styling, as much as possible, and lets you build up the styles yourself using css. ...
...And 11 more matches

Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the html you'll need to create and structure your web forms. 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. prerequisites: basic computer literacy, and a basic understanding of html and css. ...
......
...but this has changed. ...
...And 11 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 10 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
//github.com/mdn/interactive-examples and send us a pull request. the above example shows simple usage of the <audio> element. 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. the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don't support the element. attributes this element's attributes include the global attributes. autoplay a boolean attribute: if specified, the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. note: si...
...an be an unpleasant experience for users, so should be avoided when possible. if you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). however, this can be useful when creating media elements whose source will be set at a later time, under user control. see our autoplay guide for additional information about how to properly use autoplay. 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. crossorigin this enumerated attribute indicates whether to use cors to fetch the related audio file. cors-enabled resources can be reused in the <canvas> element without being tainted. the allowed values are: anonymous sends a cr...
...the spec advises it to be set to metadata. usage notes: the autoplay attribute has precedence over preload. if autoplay is specified, the browser would obviously need to start downloading the audio for playback. the browser is not forced by the specification to follow the value of this attribute; it is a mere hint. src the url of the audio to embed. this is subject to http access controls. this is optional; you may instead use the <source> element within the audio block to specify the audio to embed. events event name fired when audioprocess the input buffer of a scriptprocessornode is ready to be processed. canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without h...
...And 10 more matches

Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support mp4...
...mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support mp4...
... if the <audio> element is not supported then <audio> and <source> will be ignored. however any supported text or elements that you define within <audio> will be displayed or acted upon. so the ideal place to create a fallback or inform of incompatibility is before the closing </audio> tag. in this case, we've provided a simple paragraph including a link to download the audio directly. ...
...And 9 more matches

WAI-ARIA basics - Learn web development
wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. here we'll show how to use it at a basic level to improve accessiblity. prerequisites: basic computer literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course. ...
...ain navigation programmatically. the initial solution was to add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page. 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. as a result, developers quite often rely on javascript libraries that ge...
...ickers 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. as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean. enter wai-aria wai-aria (web accessibility ...
...And 8 more matches

Handling common accessibility problems - Learn web development
he focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused. 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). note that different browsers may have different keyboard control options available. most modern browsers follow the tab pattern described above (you can also do shift + tab to move backwards through the focusable elements), but some browsers have their own idiosyncracies: fir...
...to move backwards through the focusable elements), but some browsers have their own idiosyncracies: firefox for the mac doesn't do tabbing by default. to turn it on, you have to go to preferences > advanced > general, then uncheck "always use the cursor keys to navigate within pages". next, you have to open your mac's system preferences app, then go to keyboard > shortcuts, then select the all controls radio button. safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage checkbox. important: you should perform this kind of test on any new page you write — make sure the functionality can be accessed by the keyboard. this example highlights the importance of...
...rd accessibility. ...
...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...
...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-image: 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:...
...And 8 more matches

Index - HTTP
ponse. 20 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting website. it allows web developers to have more control over the data stored locally by a browser for their origins. 21 connection http, headers, reference, web the connection general header controls whether or not the network connection stays open after the current transaction finishes. if the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done. 22 content-disposition http, reference, header in a multipart/form-data body, the http content-disposition general header is a header that can be u...
...licy experimental, feature policy, feature-policy, http, reference, header the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds. 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. when this policy is enabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexception. the autoplay attribute on <audio> and <video> elements will be ignored. 65 feature-policy: camera directive, feature policy, feature-p...
...mediaelement interface. when this policy is enabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexception. the autoplay attribute on <audio> and <video> elements will be ignored. ...
...And 8 more matches

Index - Game development
ion monitors. 28 efficient animation for web games animation, games, javascript this article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. we touch on css transitions and css animations, and javascript loops involving window.requestanimationframe. 29 implementing controls using the gamepad api controls, gamepad api, gamepads, games, javascript, controllers the gamepad api is very easy to develop with. now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. you can play the full version of the hungry fridge game directly in your browser, install it from the firefox marketplace or check the source cod...
... with. now it's easier than ever to deliver a console-like experience to the browser without the need for any plugins. you can play the full version of the hungry fridge game directly in your browser, install it from the firefox marketplace or check the source code of the demo along with all the other resources on the gamepad api content kit. 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. in this series of articles we will show you how you can appro...
... various platforms and devices. streamlining cross device differences creates multiple challenges, not least when providing appropriate controls for different contexts. in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads. ...
...And 7 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
d!) * still supported in the safari technology preview, but not in a generally released browser. 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. note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid. pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media...
...hidden * now standard. note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid. pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ...
... note: if there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid. pseudo-elements for web-compatibility reasons, blink, webkit, and gecko browsers treat all pseudo-elements starting with ::-webkit- as valid. ...
...And 7 more matches

The HTML5 input types - Learn web development
previous overview: forms next in the previous article we looked at the <input> element, covering the original values of the type attribute available since the early days of html. 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. prerequisites: basic computer literacy, and a basic understanding of html. objective: to understand the newer input type values available to create native form controls, and how to implement them using html. note: most of the features discussed in this article have wide support across browsers. we'll note any exceptions. if you want more detail on browser support, you should consult our html forms element re...
...features discussed in this article have wide support across browsers. we'll note any exceptions. if you want more detail on browser support, you should consult our html forms element reference, and in particular our extensive <input> types reference. because html form control appearance may be quite different from a designer's specifications, web developers sometimes build their own custom form controls. we cover this in an advanced tutorial: how to build custom form widgets. e-mail address field this type of field is set using the value email for the type attribute: <input type="email" id="email" name="email"> when this type is used, the user is required to type a valid email address into the field. any other content causes the browser to display an error when the form is submitted. you can...
... as http:) is entered, or if the url is otherwise malformed. on devices with dynamic keyboards, the default keyboard will often display some or all of the colon, period, and forward slash as default keys. see below for an example (taken on firefox for android): note: just because the url is well-formed doesn't necessarily mean that it refers to a location that actually exists! numeric field controls for entering numbers can be created with an <input> type of number. this control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control. on devices with dynamic keyboards, the numeric keyboard is generally displayed. the following screenshot (from firefox for android) provides an exam...
...And 6 more matches

Index - Learn web development
powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. however, for historical and technical reasons it's not always obvious how to use them to their full potential. 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. 309 advanced form styling advanced, css, example, forms, guide, html, web while there are still difficulties using css with html forms, there are ways to get around many of the problems. there are no clean, universal solutions, but modern browsers offer new possibilities. for now, the best solution is to learn more abo...
... advanced form styling advanced, css, example, forms, guide, html, web while there are still difficulties using css with html forms, there are ways to get around many of the problems. there are no clean, universal solutions, but modern browsers offer new possibilities. 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. in the next section, we'll take a look at the newer values of the type attribute that were added in html5. 311 css proper...
...due to the complexity of css and html forms, these tables can't be considered a perfect reference. however, they will give you good insight into what can and can't be done, which will help you learn how to do things. ...
...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. set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. ...
...sages to the system console. set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true. ...
...s 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. ...
...And 6 more matches

ARIA: tab role - Accessibility
the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. ...
...the common user experience pattern is a group of visual tabs above, or to the side of, a content area, and selecting a different tab changes the content and makes the selected tab more prominent than the other tabs. ...
...ld of an element with the tablist role, or have their id part of the aria-owns property of a tablist. this combination identifies to assistive technology that the element is part of a group of related elements. some assistive technology will provide a count of the number of tab role elements inside a tablist, and inform users of which tab they currently have targeted. they should contain the aria-controls property identifying an element with the tabpanel role. when an element with the tabpanel role has focus, or a child of it has focus, that indicates that the connected element with the tab role is the active tab in a tablist. when working with elements with the tab role, when they are selected or active, they should have their aria-selected attribute set to true, otherwise it should be set to fa...
...And 6 more matches

Audio and Video Delivery - Developer guides
detection (usually a choice of two, as stated above). if the browser doesn't support playback of any of the provided formats natively, either present a still image or use a fallback technology to present the video. identify how you want to play/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. ...
..."> <!-- 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 playback. note: the preload attribute may be ignored by some mobile browsers. ...
...o, the autoplay feature can be controversial when misused. it's strongly recommended that you read the autoplay guide for media and web audio apis to learn how to use autoplay wisely.. for further info see <video> element and creating a cross-browser video player. audio and video fallback you can create a more comprehensive fallback using flash. using flashmediaelement.swf is one way. ...
...And 6 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the <input> element is one of the most powerful and complex in all of html due to the sheer number of combinations of input types and attributes. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...aviors when used on a given input type—are instead documented on those types' pages. this element includes the global attributes. those with extra importance as it relates to <input> are highlighted. ...
...ription accept file hint for expected file type in file upload controls alt image alt attribute for the image type. ...
...And 6 more matches

Index - Archive of obsolete content
assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab b...
...ributes, xul reference no summary! 420 wraparound xul attributes, xul reference no summary! 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. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). 422 deprecated and defunct markup reference, xul {many e...
...vascript firefox, gecko, guide, internationalization, javascript, mozilla, xpcom, xul gecko 1.8, as used in firefox 1.5 and other applications, added support for non-ascii characters in javascript files loaded from xul files. 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. in fact, most of mozilla's windows (and dialogs) will be described using this mechanism. xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built. 439 list of commands x...
...And 5 more matches

Your first form - Learn web development
we'll expand on each of these subtopics in more detail later on in the module. prerequisites: basic computer literacy, and a basic understanding of html. ...
...nteraction between a user and a web site or application. forms allow users to enter data, which is generally sent to a web server for processing and storage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature). ...
...rage (see sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a ui feature). 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. ...
...And 5 more matches

Web forms — Working with user data - Learn web development
powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. however, for historical and technical reasons it's not always obvious how to use them to their full potential. 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. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should at least work through our introduction to html. at this point you should find the introductory guides easy to un...
...oking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should at least work through our introduction to html. 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. therefore, before you look at the other sections listed below we'd recommend that you go away and learn some css and javascript first. the abo...
...ery first experience of creating a web form, including designing a simple form, implementing it using the right html elements, adding some very simple styling via css, and how data is sent to a server. how to structure a web form with the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form. ...
...And 5 more matches

Video and audio content - Learn web development
vps even usually offer ready-made code for embedding video/audio in your webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. ...
...asily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it works in exactly the same way. 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. at a minimum, the interface must include a way to start and stop the media, and to adjust the volume. the paragraph inside the <vide...
...mats the desktop version does. on top of that, both desktop and mobile browsers may be designed to offload handling of media playback (either for all media or only for specific types it can't handle internally). this means media support is partly dependent on what software the user has installed. so how do we do this? 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. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> here we've taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. in this case the browser wi...
...And 5 more matches

Inputs and input sources - Web APIs
targeting method it uses, xrspaces that can be used to draw the targeting ray and to find the targeted object or location as well as to draw objects in the user's hands, and profile strings specifying the preferred way to represent the controller in the user's viewing area as well as how the input operates. 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. see facing and targeting for further information. selecting using the main "select" button or other input on the controller to choose the targeted direction (or the object at which it points), or to otherwise engage an actio...
...y mode the targeting ray mode is a string found in the targetraymode property. it describes the technique used to determine the targeting ray and how it should be shown to the user if presented visually. when the targeting ray mode is gaze, the ray's origin is at the viewer and simply aims in the direction the user is facing. 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. the target ray should extend outward from between the eyes in a direction perpendicular to the viewer's face. more flexible is the tracked-pointer mode, in which the ray's origin is at a handheld controller or hand tracking system's origin ...
...to be closer to us than the origin. as a result, the values of x and y are both negative, while z is positive. mapping a grip space to the world origin when the controller is positioned below and to the left of the world origin, and closer to us than the world origin is. 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. if the input device only has the primary movement sensors, a squeeze control, and a button, it may not have a gamepad record. if, however, the gamepad is present, you can use it to identify and poll the buttons and axes available on the controller. while the gamepad record is defined by the gamepad api specification, it's not actually managed by the gamep...
...And 5 more matches

ARIA Test Cases - Accessibility
ems where draggable items are denoted and targets being indicated as such. all drag and drop operations screen readers traditionally perform within the operating system are hit and miss games that are performed on pixel locations. 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. results: 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 - ...
... zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - toolbar example to test aria live region and toolbar dojo nightly build expected at behavior: (mz) upon initial focus, if the toolbar has a label, screen reader should speak it, followed by the role and the label and role of the current toolbar item. 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. markup used: notes: results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - ...
... (al) optional but desired: the screen reader should announce updates to a live...
...And 5 more matches

Operable - Accessibility
ble and its guidelines and success criteria, see principle 2: operable — user interface components and navigation must be operable. guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core website functionality available via a keyboard in addition to other means (e.g. ...
...available from a keyboard this guideline covers the necessity of making core website functionality available via a keyboard in addition to other means (e.g. 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. freehand drawing). built-in controls should be used where possible (e.g. ...
....g. 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. freehand drawing). built-in controls should be used where possible (e.g. tabbing through form controls), and you should only build in custom functionality where needed. see ui controls and building keyboard accessibility back in 2.1.2 no keyboard trap (a) when entering a section of functionality using the keyboard, you should be able to get out of that section again using *only* the keyboard. for example, if you press enter/return on a focused button to open an options window, ...
...And 5 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
ve-examples and send us a pull request. the above example shows simple usage of the <video> element. 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. the content inside the opening and closing <video></video> tags is shown as a fallback in browsers that don't support the element. attributes like all other html elements, this element supports the global attributes. autoplay a boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data. note: sites...
...muted attribute is present. autopictureinpicture a boolean attribute which if true indicates that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application. buffered an attribute you can read to determine the time ranges of the buffered media. this attribute contains a timeranges object. 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. when the controls attribute is specified). the a...
... the time indicated by the currenttime attribute has been updated. volumechange the volume has changed. waiting playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="myvideo.mp4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file types and the guide to the codecs supported for video. also available is a guide to audio codecs that can be used with ...
...And 5 more matches

Mozilla XForms User Interface - Archive of obsolete content
introduction this article is a quick reference of the xforms user interface elements. 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. currently xforms can be hosted by xhtml and xul in seamonkey and firefox. later we have plans to support xforms hosted by svg. the xforms specs define two kinds of xforms ui elements, called 'form controls' and 'xforms user interface'. ...
...cument how xforms elements will be presented in mozilla since the xforms specifications give only a hint of how controls might be rendered. currently xforms can be hosted by xhtml and xul in seamonkey and firefox. later we have plans to support xforms hosted by svg. 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. the set of "xforms user interface" elements exist to aid form authors in combining host language markup and xforms markup together in order to build user interfaces. some of the 'form controls' can have multiple appearances and thus may be rendered in multiple ways. we use the data type of the instance node that the form control is bound to as a...
... has a type of xsd:date, we output the date value as plain text. an output bound to a date and also having @appearance='full' will display as a calendar. this article uses several notations. if you see fx 3.0 only, that means that the control will only be available for firefox 3.0 (gecko 1.9). there are several possible reasons for this restriction. the first is that the changes required for such controls could not be safely made to firefox 1.5 or firefox 2.0. the second is that the control is introduced in xforms 1.1 and we don't feel adding the enhancement would be prudent until the 1.1 spec is more stable. for instance, when the spec reaches 'recommendation'-level status. if you see xhtml/xul then it means the control is available when xforms is hosted in either xhtml or xul. similarly, if you ...
...And 4 more matches

Client-side form validation - Learn web development
this article leads you through basic concepts and examples of client-side form validation. prerequisites: computer literacy, a reasonable understanding of html, css, and javascript. objective: to understand what client-side form validation is, why it's important, and how to apply various techniques to implement it. ...
...dation generally doesn't require much javascript. built-in form validation has better performance than javascript, but it is not as customizable as javascript validation. javascript validation is coded using javascript. this validation is completely customizable, but you need to create it all (or use a library). 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. this is done by using validation attributes on form elements. we've seen many of these earlier in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and ...
...in the above example we've not included a step attribute, so the value defaults to 1. this means that floats, like 3.2, will also show as invalid. full example here is a full example to show usage of html's built-in validation features. first, some html: <form> <p> <fieldset> <legend>do you have a driver's license?<abbr title="thi...
...And 4 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. you can access a particular form control in the returned collection by using either an index or the element's name or id. prior to html 5, the returned object was an htmlcollection, on which htmlformcontrolscollection is based. note: similarly, you can get a list of all of the forms contained within a given document using the document's forms property. syntax nodelist = htmlformelement.elements value an htmlformcontrolscollection containing all non-image controls in the form. ...
...this is called tree order. ...
...this is called tree order. ...
...And 4 more matches

HTMLFormElement - Web APIs
dth="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, htmlelement. 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.name a domstring reflecting the value of the form's name html attribute, containing the name of the form. htmlformelement.method a domstring reflecting the value of the form's method html attribute, indicating the http met...
...ransmit the form to the server. only specified values can be set. the two properties are synonyms. htmlformelement.acceptcharset a domstring reflecting the value of the form's accept-charset html attribute, representing the character encoding that the server accepts. 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. htmlformelement.novalidate a boolean reflecting the value of the form's novalidate html attribute, indicating whether the form should not be validated. named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g. a form with an input named acti...
... named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g. a form with an input named action will have its action property return that input instead of the form's action html attribute). methods this interface also inherits methods from its parent, htmlelement. checkvalidity() returns true if the element's child controls are subject to constraint validation and satisfy those contraints; returns false if some controls do not satisfy their constraints. fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. it is up to the programmer to decide how to respond to false. reportvalidity() returns true if the element's child ...
...And 4 more matches

Adding captions and subtitles to HTML5 video - Developer guides
illustrating how subtitles work! html markup as mentioned above, we need to make use of the new html5 <track> element to add our subtitle files to the html5 video. ...
...ontents are in. the default attribute is set on the english <track> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. ...
...on the english <track> element, indicating to the browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection. in addition to adding the <track> elements, we have also added a new button to control the subtitles menu that we will build. ...
...And 4 more matches

Requests For Enhancement - Archive of obsolete content
t you are promoting is to vote for the bug that is related with the feature request (if there is no bug yet then please feel free to file it). then you can give a vote by clicking on the 'vote' link on the bug page. the xforms team looks at votes to help determine which bug is more important for our xforms users. rfe categories xforms api this section contains rfe to the xforms api. 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%. now we need to start teaching xforms to web newcomers before they are brainwashed into believing that the only way to build cool web apps is to do dom surgery with javascript! dan mccreary. one of the outstanding features of xforms is that it can w...
... to do dom surgery with javascript! dan mccreary. one of the outstanding features of xforms is that it can work with any xml host language. natively, the mozilla xforms implementation supports xforms elements being hosted in xhtml and xul documents. but a form author is not restricted to only those xml languages that gecko knows. ...
...s. a lot of the xforms capabilities are reachable by using our custom controls interfaces. our custom control interfaces allows for the exchange of data between any xml element and and an xforms model. this means that an author can write powerful mozilla-based applications by using xforms. if previously you was forced to use ajax for this then now xforms makes this for you automatically. custom controls interfaces this section contains rfe to the custom control interfaces. if you find that you can't create a custom control due to limitations in our interfaces or the functionality of our controls, then this is the right place to pass along your requirements. ...
...And 3 more matches

Implementing game control mechanisms - Game development
in this series of articles we will show you how you can approach building a game that can be played using touchscreen smartphones, mouse and keyboard, and also less common mechanisms such as gamepads. case study we'll be using the captain rogers: battle at andromeda demo as an example. ...
...ere. the game's folders look like this: as you can see there are folders for images, javascript files, fonts and sound effects. the src folder contains the javascript files split as a separate states — boot.js, preloader.js, mainmenu.js and game.js — these are loaded into the index file in this exact order. 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. every state has its own default methods: preload(), create(), and update(). the first one is needed for preloading required assets, create() is executed once the state had started, and update() is executed on every frame. for example, you can define a button in the create() function: create: function() { // ... ...
...e javascript. it will be explained in the given articles themselves below, but you can play with it already, and use the code however you want for learning purposes. ...
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ...
...n elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ...
...ractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. 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. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example...
...And 3 more matches

HTML: A good basis for accessibility - Learn web development
new html5 section elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ...
...n elements for an idea of what screen reader support is like). note: in addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. ...
...ractive layout, your content should make logical sense in its source order — you can always place it where you want using css later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense. 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. later articles on wai-aria and multimedia will look at other aspects of ui accessibility. one key aspect of the accessibility of ui controls is that by default, browsers allow them to be manipulated by the keyboard. you can try this out using our native-keyboard-accessibility.html example...
...And 3 more matches

How to structure a web form - Learn web development
tween label and widget. if there is no label, or if the form control is neither implicitly or explicitly associated with a label, and a screenreader will read out something like "edit text blank", which isn't very helpful at all. labels are clickable, too! another advantage of properly set up labels is that you can click or tap the label to activate the corresponding widget. 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. for example, clicking on the "i like cherry" label text in the example below will toggle the selected state of the taste_cherry checkbox: <f...
...arate <section> element, with <fieldset> elements to contain radio buttons. active learning: building a form structure let's put these ideas into practice and build a slightly more involved form — a payment form. this form will contain a number of control types that you may not yet understand. don't worry about this for now; you'll find out how they work in the next article (basic native form controls). for now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why. to start with, make a local copy of our blank template file and the css for our payment form in a new directory on your computer. apply the css to the html by adding the following line inside the html <head>: ...
...uired">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> the second <section> of our form is the payment information. we have three distinct controls along with their labels, each contained inside a <p>. the first is a drop-down menu (<select>) for selecting credit card type. the second is an <input> element of type tel, for entering a credit card number; while we could have used the number type, we don't want the number's spinner ui. the last one is an <input> element of type date, for entering the expiration date of the card; this one will c...
...And 3 more matches

Movement, orientation, and motion: A WebXR example - Web APIs
ed() directly if we wish to programmatically end the webxr session. in either case, the label of the button is updated to indicate that a click will start a session, and then, if there is a pending request for an animation frame, we cancel it by calling cancelanimationframe once that's done, the value of xrsession is changed to null to indicate that we're done with the session. 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. moving using the keyboard in order to allow the user to move through the 3d world even if they don't have a webxr device with the inputs to perform movement through space, our handler for keydown events, handlekeydown(), responds by updating offs...
...ted objects given the amount of time that's elapsed since the last frame, and then to render each of the views specified by the viewer's xrpose. ...
... eye: ${view.eye}`); gl.canvas.width = viewport.width * pose.views.length; gl.canvas.height = viewport.height; drawscene(gl, view, programinfo, buffers, texture, deltatime); } } } the first thing we do is call requestanimationframe() to request that drawframe() be called again for the next frame to be rendered. 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. remember that, as always, the world's objects are moved and reoriented, not the viewer. the returned reference space makes it easy for us to do just that. with the new reference space in...
...And 3 more matches

Advanced techniques: Creating and sequencing audio - Web APIs
— the web audio api was built to be built upon. if you are about to embark on building something more complex, tone.js would be a good place to start. however, we want to demonstrate how to build such a demo from first principles, as a learning exercise. note: you can find the source code on github as step-sequencer; see the step-sequencer running live also. 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". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. each voic...
...to play/stop the sequencer, and adjust the bpm (beats per minute) to speed up or slow down the "music". there are four different sounds, or voices, which can be played. each voice has four buttons, which represent four beats in one bar of music. when they are enabled the note will sound. when the instrument plays, it will move across this set of beats and loop the bar. 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. the techniques we are using are: name of voice technique associated web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random no...
...o.connect(amp.gain); osc.connect(amp).connect(audioctx.destination); lfo.start(); osc.start(); osc.stop(audioctx.currenttime + pulsetime); note: we also don't have to use the default wave types for either of these oscillators we're creating — we could use a wavetable and the periodic wave method as we did before. there is a multitude of possibilities with just a minimum of nodes. pulse user controls for the ui controls, let's expose both frequencies of our oscillators, allowing them to be controlled via range inputs. one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="880" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20...
...And 3 more matches

Web audio spatialization basics - Web APIs
ve you everything you need. 3d boombox demo to demonstrate 3d spatialization we've created a modified version of the boombox demo we created in our basic using the web audio api guide. see the 3d spatialization demo live (and see the source code also). 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. when we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. this is done by setting the different properties of the pannernode object instance in relation to that movement, to emulate spacialization. note: the experie...
...l-off factor (rollofffactor) — how quickly does the volume reduce as the panner moves away from the listener. the default value is 1; let's make that a bit bigger to exaggerate our movements. const rolloff = 10; now we can start setting our position and orientation of our boombox. this is a lot like how we did it with our listener. these are also the parameters we're going to change when the controls on our interface are used. const positionx = posx; const positiony = posy; const positionz = posz; const orientationx = 0.0; const orientationy = 0.0; const orientationz = -1.0; note the minus value on our z orientation — this sets the boombox to face us. a positive value would set the sound source facing away from us. let's use the relevant constructor for creating our panner node and pas...
...ny, positionz: positionz, orientationx: orientationx, orientationy: orientationy, orientationz: orientationz, refdistance: refdistance, maxdistance: maxdistance, rollofffactor: rolloff, coneinnerangle: innercone, coneouterangle: outercone, coneoutergain: outergain }) moving the boombox now we're going to move our boombox around our 'room'. we've got some controls set up to do this. we can move it left and right, up and down, and back and forth; we can also rotate it. the sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us. we need to set up a few things for the interface. first, we'll g...
...And 3 more matches

Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
practical tips for developers and how mozilla does it contents this document is for developers working to support msaa in an application in order to make it accessible with 3rd party assistive technologies, as well as for hackers wishing to be involved in mozilla's msaa support specifically. if you're implementing controls/widgets, you should also see the accessible toolkit checklist. if you're interested in more about gecko's msaa implementation, read gecko info for windows accessibility vendors to learn how msaa clients can utilize gecko's msaa support. intro: what is msaa? msaa is the microsoft active accessibility (msaa) api, used on windows operating systems to support assistive technologies for users with disabilities. third party assistive technology, such as screen readers, ...
...re. the docs on msdn are useful as well. mostly myth: msaa is too expensive to implement reality: *too* expensive is relative, and depends on how important accessibility is for your project. this document's deciding which msaa features to support section attempts to lower the cost by showing which parts of msaa are not very important to work on. you only need to support msaa on the non-standard controls in your app. so, it's not too bad. mostly myth: microsoft is abandoning msaa in longhorn reality: microsoft's accessibility strategy is changing to a new api in longhorn. msaa will still be supported through an emulation layer, but that will probably be a very slow solution. we'll have to wait and see how good the msaa support in longhorn is, before we can call this one. msaa decision-making g...
...microsoft is abandoning msaa in longhorn reality: microsoft's accessibility strategy is changing to a new api in longhorn. msaa will still be supported through an emulation layer, but that will probably be a very slow solution. we'll have to wait and see how good the msaa support in longhorn is, before we can call this one. 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. msaa is the only way to let all at's know what your code is doing. don't use msaa if you're not running on a windows platform ... hope that one was obvious. don't use msaa if you're only windows target for accessibility is longhorn. don't use msaa if you're not going to take it all the way via testing with...
...And 3 more matches

HTML documentation index - HTML: Hypertext Markup Language
lobal attribute provides a hint for generating a keyboard shortcut for the current element. the attribute value must consist of a single printable character (which includes accented and other characters that can be generated by the keyboard). 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. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.gete...
...ven piece of content with a machine-readable translation. if the content is time- or date-related, the <time> element must be used. 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. 87 <dd>: the description details element definition, description details, element, html, html grouping content, reference, web, dd, description list, details the html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>). 88 <del>: the deleted text element deleted text, element, html, html edits,...
...ins, reference, web, embed the html <embed> element embeds external content at the specified point in the document. this content is provided by an external application or other source of interactive content such as a browser plug-in. 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. 100 <figcaption>: the figure caption element element, html, html grouping content, reference the html <figcaption> or figure caption element represents a caption or legend describing the rest of the contents of its parent <figure> element. 101 <figure>: the figure with optional caption element element, html, html g...
...And 3 more matches

Adding windows and dialogs - Archive of obsolete content
e easy to dismiss. your dialogs shouldn't have fixed dimensions because of potential localization problems. dialogs are sized to their contents and will generally work fine. however, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. the window.sizetocontent function is what you need in this case. ...
... appropriately. the window.sizetocontent function is what you need in this case. input controls most additional xul windows and dialogs in extensions are some kind of input form. let's look into the most commonly used form elements and how to use them in your xul windows. 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. it's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped toge...
...ou don't want the borders to appear. see the firefox preferences window for an example of this: sections are defined using groupbox elements, but their style is quite different from the default. attribute persistence user actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. if the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. you need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened. most xul elements support the persist attribute, which has this exact function. you set the persist attribute with a space-separated list of attribute names, indicating which attribute values must be persisted ac...
...And 2 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. assistive technologies could only see the generic html markup used to build the control; they had no way of knowing that a particular collection of div and span elements should be treated as a single cohesive control (such as a tab bar or a treeview). by implementing dhtml accessibility techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview). firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarati...
...ity techniques, web developers can declare that generic html elements are really acting as specific gui controls (such as a treeitem within a treeview). firefox 1.5 is the first browser to support dhtml accessibility; it maps the declarations within the html page to the underlying accessibility architecture so that assistive technologies can "read" a web page and know how to present these complex controls to the end user. this has all been well-documented for some time. however, it is less well-known that the same dhtml accessibility techniques can be applied to xul, mozilla's xml markup language for building user interfaces. ...
...plex controls to the end user. this has all been well-documented for some time. however, it is less well-known that the same dhtml accessibility techniques can be applied to xul, mozilla's xml markup language for building user interfaces. (the firefox interface itself is built in xul, as well as the graphical interface presented by firefox extensions.) xul itself has a much richer set of built-in controls than html. there is generally no need to build your own xul tab bar or treeview. firefox ships with a tabbox element and a tree element, and these elements are fully accessible out-of-the-box. however, if you are building custom controls in xul, you may need to use dhtml accessibility techniques to ensure that your custom controls are equally accessible. a super-simple spreadsheet download stage...
...And 2 more matches

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 ...
... unsupported 7.10.4 context() unsupported 7.11.1 choose() unsupported 7.11.2 event() supported 7.12 extension functions unsupported not a compliance requirement for an xforms processor 8. ...
...And 2 more matches

Index - MDN Web Docs Glossary: Definitions of Web-related terms
to detect and mitigate certain types of website related attacks like xss and data injections. 54 csrf glossary, security csrf (cross-site request forgery) is an attack that impersonates a trusted user and sends a website unwanted commands. 55 css css, codingscripting, glossary, web, l10n:priority css (cascading style sheets) is a declarative language that controls how webpages look in the browser. 56 css object model (cssom) css, cssom, dom, glossary, web performance the css object model (cssom) is a map of all css selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. the cssom is very similar to the document object model (dom). both of them are ...
...f your flex-direction is either row or row-reverse then the cross axis runs down the columns. 95 cross-site scripting cross site scripting, dom, glossary, security, xss, exploit cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code. this code is executed by the victims and lets the attackers bypass access controls and impersonate users. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. 96 cryptanalysis cryptography, glossary, privacy, security cryptanalysis is the branch of cryptography that studies how to break codes and cryptosystems. cryptanalysis creates techniques to break ciphers, in particular by methods more e...
...fications. 117 document directive csp, directive, document, glossary, http, security csp document directives are used in a content-security-policy header and govern the properties of a document or worker environment to which a policy applies. 118 domain browser, domain, glossary, infrastructure, networking a domain is an authority within the internet that controls its own resources. its "domain name" is a way to address this authority as part of the hierarchy in a url - usually the most memorable part of it, for instance a brand name. 119 domain name domain name, glossary, protocol, webmechanics a domain name is a website's address on the internet. domain names are used in urls to identify to which server belong a specific webpage. the...
...And 2 more matches

Mobile accessibility - Learn web development
n to enable visually impaired users to use them successfully. modern mobile browsers tend to have good support for wai-aria, too. to make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices. 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). user input — make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum). responsive design — make sure layouts work on mobile, conserve image download sizes, and think about the provision of images for high-resolution scree...
...een android versions and even between different phone models. some phone manufacturers (e.g. samsung) don't even have talkback in newer phones, and instead opted for their own screen reader. when you've found the talkback menu, press the slider switch to turn talkback on. follow any additional on-screen prompts that you are presented with. when talkback is turned on, your android device's basic controls will be a bit different. for example: single-tapping an app will select it, and the device will read out what the app is. swiping left and right will move between apps, or buttons/controls if you are in a control bar. the device will read out each option. double-tapping anywhere will open the app/select the option. you can also "explore by touch" — hold your finger down on the screen and ...
...nd right to cycle between the different options. once you've selected the option you want, double-click to choose that option. for details on all the options available under the global and local context menus, see use global and local context menus. browsing web pages you can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc. for example, with talkback turned on: open your web browser. activate the url bar. enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. to enter the text of the url: select the url bar by swiping left/right till you get to it, and then double-tapping. hold your finger down on the virtual keyboard until y...
...And 2 more matches

Gecko info for Windows accessibility vendors
d the w3c dom. gecko also handles the users keystrokes and mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. embedded clients (support msaa) embedded clients use gecko only in the content window, at the moment for html and generic xml only. they typically use standard windows controls for their user interface -- the area outside of the client content window, plus the context menu. mfcembed testing client: this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine. k-meleon: a light, ultra-fast and more advanced (fully configurable) gecko-based web browser available on the windows platform ...
...ed (fully configurable) gecko-based web browser available on the windows platform xul-based clients (support msaa) xul-based clients make full use of the gecko architecture, not only for html content, as well as for menus, dialogs and the entire user interface via an xml language called xul (extensible user-interface language). none of the user interface contains standard windows controls -- not even the menus! this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). firefox (please use version 1.1 alpha builds or later) thunderbird (please use version 1.1 alpha builds or later) mozilla seamonkey (please use 1.8 alpha builds or later) how to find the content window and load the doc...
...ts are always returned via vt_dispatch. enum { navrelation_label_for = 0x1002 }; enum { navrelation_description_for = 0x100f }; these two relations can be used on object to determine what form control is being labelled or desribed. enum { navrelation_labelled_by = 0x1003 }; enum { navrelation_described_by = 0x100e }; these two relations are they inverse; they can be used on form controls. if the form control has an accname, you can get the iaccessible that it was labelled by in order to get more formatting information. it is also useful to check for a description. note that the label and description relations may be used to prevent redundant information from being presented by the screen reader, since the label and description can occur both on their own, and in the name or d...
...And 2 more matches

NSS environment variables
.12.5 nss_hash_alg_support string specifies agorithms allowed to be used in certain applications, such as in signatures on certificates and crls. see documentation at this link. 3.12.3 nss_output_file string (filename) output file path name for the pkcs #11 module logger. default is stdout. 3.7 nss_sdb_use_cache string ("no","yes","auto") controls whether nss uses a local cache of sql database contents. default is "auto". see the source for more information. 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. "0" disables it, "1" enables it. it is also known as 1/n-1 record splitting. default is "1". nss_ssl_enable_renegotiation string ([0|...
...lue should only be used during the transition period when few servers have been upgraded. [2|r|r]: ssl_renegotiate_requires_xtn (default) only allows renegotiation if the peer's hello bears the tls renegotiation_info extension. this is the safe renegotiation. 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. in other words a connection will be dropped at initial handshake if a server or client do not support safe renegotiation. the default setting for this option is false. 3.12.5 nss_ssl_server_cache_mutex_timeout integer (seconds) timeout time to detect dead or hung process in multi-process ssl server. def...
...s ssl server. default is 30 seconds. 3.4 nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process. beginning in nss 3.12.3, softoken will detect this error. this environment variable controls softoken's response to that error. if set to to "1" or unset, softoken will trigger an assertion failure in debug builds, and will report an error in non-debug builds. if set to "disabled", softoken will ignore forks, and behave as it did in older versions. if set to any other non-empty value, softoken will report an error in both debug and non-debug builds. 3.12.
...And 2 more matches

Gecko Roles
resents a document window. a document window is always contained within an application window. role_pane represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. role_chart represents a graphical image used to represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. role_t...
...o represent data. role_dialog represents a dialog box or message box. role_border represents a window border. role_grouping logically groups other objects. role_separator used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. 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_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_table represents a table...
...n item in an outline or tree structure. role_pagetab represents a page tab, it is a child of a page tab list. role_propertypage represents a property sheet. role_indicator represents an indicator, such as a pointer graphic, that points to the current item. role_graphic represents a picture. role_statictext represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. role_text_leaf represents selectable text that allows edits or is designated read-only. role_pushbutton represents a push button control. role_checkbutton represents a check box control. role_radiobutton represents an option button, also called a radio button. it is one of a group of mutua...
...And 2 more matches

nsIAccessibleRole
document window is always contained within an application window. it is used for role="document". role_pane 16 represents a pane within a frame or document window. users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls. it is used for the first child of a or iframe. role_chart 17 represents a graphical image used to represent data. role_dialog 18 represents a dialog box or message box. it is used for xul:dialog, role="dialog". role_border 19 represents a window border. role_grouping 20 logically groups other objects. there is not always a parent-child relationship between the grouping object and the obj...
...relationship between the grouping object and the objects it contains. it is used for html:textfield, xul:groupbox, role="group". role_separator 21 used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window. it is used for xul:separator, html:hr, role="separator". 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. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of informati...
...ole="treeitem". also refer to role_pagetablist. role_propertypage 38 represents a property sheet. it is used for xul:tabpanel, role="tabpanel". role_indicator 39 represents an indicator, such as a pointer graphic, that points to the current item. role_graphic 40 represents a picture. is is used for xul:image, html:img. role_statictext 41 represents read-only text, such as labels for other controls or instructions in a dialog box. static text cannot be modified or selected. is is used for xul:label, xul:description, html:label, role="label", or xforms:output. role_text_leaf 42 represents selectable text that allows edits or is designated read-only. role_pushbutton 43 represents a push button control. it is used for xul:button, html:button, role="button", xforms:trigger, xforms:submit. ...
...And 2 more matches

Basic form hints - Accessibility
without a direct association between the control and its label, the screen reader has no way of knowing which label is the correct one. the example below shows a simple form with labels. note that each <input> element has an id, and each <label> element has a for attribute, indicating the id of the associated <input>. ...
...wai-aria, the accessible rich internet applications specification from the w3c's web accessibility initiative, provides the aria-labelledby attribute for these cases. the example below shows a radio button group implemented using an unordered list. note that on line 3, the <ul> element sets the aria-labelledby attribute to ...
...aria provides the aria-describedby attribute to directly associate the description with the control. the example below shows a <button> element that is described by a sentence in a separate <div> element. the aria-describedby attribute on the <button> references the id of the <div>. <button aria-describedby="descriptio...
...And 2 more matches

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...
...idth: 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 .property { 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 !im...
...And 2 more matches

Audio and video manipulation - Developer guides
he source video and the output greyscale frames. ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add display: none to the style for the <video> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames. 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. var processor = { timercallback: func...
...to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed. note that the playbackrate property works with both <audio> and <video>, but in both cases, it changes the playback speed but not the pitch. to manipulate the audio's pitch you need to use the web audio api. see the audiobuffersourcenode.playbackrate property. ...
...e playback speed but not the pitch. to manipulate the audio's pitch you need to use the web audio api. see the audiobuffersourcenode.playbackrate property. ...
...And 2 more matches

disabled - HTML: Hypertext Markup Language
the boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. the user can neither edit nor focus on the control, nor it's form control descendants. if the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones. the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. this boolean disabled attribute indicates that the user cannot interact with the control or it's descendant controls. if this attribute is not specified, the control inherits its sett...
...the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not have the attribute, then the control is enabled. if declared on an <optgroup>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selectable. note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>. when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class. this boolean attribute prevents the user from interacting with the button. if this attrib...
...led from a containing element, for example <fieldset>; if there is no containing element with the disabled attribute set, then the button is enabled. firefox will, unlike other browsers, persist the dynamic disabled state of a <button> across page loads. use the autocomplete attribute to control this feature. 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. because a disabled field cannot have it's value changed, required does not have any effect on inputs with the disabled attribute also specified. additionally, since the elements become immutable, most oth...
...And 2 more matches

HTTP headers - HTTP
odified after the given date. this ensures the coherence of a new fragment of a specific range with previous ones, or to implement an optimistic concurrency control system when modifying existing documents. vary determines how to match request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server. 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. content negotiation accept informs the server about the types of data that can be sent back. accept-charset which character encodings the client understands. accept-encoding the encoding algorithm, usually a compression algorithm, tha...
...the encoding algorithm, usually a compression algorithm, that can be used on the resource sent back. accept-language informs the server about the human language the server is expected to send back. this is a hint and is not necessarily under the full control of the user: the server should always pay attention not to override an explicit user choice (like selecting a language from a dropdown). controls expect indicates expectations that need to be fulfilled by the server to properly handle the request. max-forwards cookies cookie contains stored http cookies previously sent by the server with the set-cookie header. set-cookie send cookies from the server to the user-agent. cookie2 contains an http cookie previously sent by the server with the set-cookie2 header, but has been ob...
...cer. x-forwarded-proto identifies the protocol (http or https) that a client used to connect to your proxy or load balancer. via added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers. redirects location indicates the url to redirect a page to. request context from contains an internet email address for a human user who controls the requesting user agent. host specifies the domain name of the server (for virtual hosting), and (optionally) the tcp port number on which the server is listening. referer the address of the previous web page from which a link to the currently requested page was followed. referrer-policy governs which referrer information sent in the referer header should be included with requests made. ...
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
specified on any svg element to apply css styling effects. 19 accent-height deprecated, needsexample, svg, svg attribute the accent-height attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. 20 accumulate needscompattable, needsexample, svg, svg attribute this attribute controls whether or not the animation is cumulative. 21 additive needscompattable, needsexample, svg, svg attribute no summary! 22 alignment-baseline svg, svg attribute the alignment-baseline attribute specifies how an object is aligned with respect to its parent. this property specifies which baseline of this element is to be aligned with the corresponding baseli...
...the baseline with the same name as the computed value of the alignment-baseline property. 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. 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. 25 arabic-form deprecated, svg, svg attribute the arabic-form attribute indicates which of the four possible forms an arabic glyph represents. 26 ascent deprecated, needsexample, svg, svg attribute the ascent attribute defines the maximum unaccented heigh...
...g and set the spacing between them to a specific length (typically, zero). 119 keypoints svg, svg attribute the keypoints attribute indicates the simple duration of an animation. 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. this attribute is ignored unless the calcmode attribute is set to spline. if there are any errors in the keysplines specification (bad values, too many or too few values), the animation will not occur. 121 keytimes svg, svg attribute the keytimes attribute represents a list of time values used to control the pacing of the animation. each time in the lis...
...And 2 more matches

Mozilla Crypto FAQ - Archive of obsolete content
se information", and "netscape communicator key database format", the results of independent attempts to describe the format of the netscape communicator 4.x key and certificate database (with which the psm key and certificate database format is compatible). information for mozilla contributors i want to mirror the mozilla ftp site. do i need to do anything with regard to u.s. encryption export controls? no, you do not. as long as you are simply mirroring the mozilla site as is, you do not need to provide any notification to the bureau of export administration or nsa. if you are outside the u.s. you do not need to provide such notification in any case, but you may need to take other actions to comply with laws and regulations in your own country concerning encryption technologies. as a mirror ...
...cryption source code", and 740.17(g), "reporting requirements". for the statement by the bureau of export administration on notification requirements for mirror sites, see the section "notification requirements" in the bernstein advisory opinion contained in the letter dated february 17, 2000, from james lewis of bxa to cindy cohn, counsel for daniel bernstein. further information on u.s. export controls on encryption software what are the relevant u.s. government laws and regulations governing export from the u.s. of encryption software? the export administration regulations, the export administration act of 1979, and related u.s. presidential executive orders address export of encryption software from the u.s. the main u.s. government regulations governing the export from the u.s. of cryptog...
...ear), along with all other export-controlled commercial products. at that time encryption hardware, software, and technology was transferred from the u.s. munitions list to the commerce control list (ccl) of the ear. for more information see the document "principal statutory authority for the export administration regulations", which contains a copy of executive order 13026. haven't u.s. export controls on encryption software already been ruled unconstitutional? yes in a specific case, but the decision may yet be overruled. also, the case itself may be declared moot in light of the new u.s. encryption export regulations. for several years professor daniel bernstein (currently at the university of illinois at chicago) has pursued a lawsuit against the u.s. government essentially claiming that u...
...5, part 2, entry 5d002 (note on "functional capacity") and 15 cfr part 734, paragraphs 734.3(b)(2) and (b)(3) and accompanying note (printed form vs. electronic form). see also the request for an advisory opinion made to the bureau of export administration by bernstein's lawyers and the resulting advisory opinion issued by bxa in response to that request. where can i learn more about u.s. export controls on encryption software? for more information on u.s. export control of encryption software and related topics, see the following online references: the itar, ear and encryption export archive maintained by the electronic freedom foundation (eff). the cryptography policy page maintained by the electronic privacy information center (epic). the encryption page maintained by the center for demo...

CSS and JavaScript accessibility best practices - Learn web development
image shows the highlight in both firefox (a dotted outline) and chrome (a blue outline): you can be creative with link styles, as long as you keep giving users feedback when they interact with the links. 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. form elements elements to allow users to input data into websites: <div> <label for="name">enter your name</label> <input type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also). most of the css you'll write for forms will be for sizing the elements, lining up labels and inputs, and getting them looking neat and tidy. ...
...ed on a <canvas> element, which has no facility at this time to provide text alternatives or other information for severely visually impaired users to make use of. 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. the problem with too much javascript the problem often comes when people rely on javascript too much. sometimes you'll see a website where everything has been done with javascript — the html has been generated by javascript, the css has been generated by javascript, ...
...t again, a large part of it is using built-in browser functionality where possible. good example uses of unobtrusive javascript include: providing client-side form validation, which alerts users to problems with their form entries quickly, without having to wait for the server to check the data. if it isn't available, the form will still work, but validation might be slower. 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). as an example, we've written a quick and dirty client-side form validation example — see form-validation.html (also see the demo live). here you'll s...
...ions are implemented in client-side javascript using event handlers, which allow us to run functions in response to certain events happening. some events can have accessibility issues. the main example you'll come across is mouse-specific events like mouseover, mouseout, dblclick, etc. functionality that runs in response to these events will not be accessible using other mechanisms, like keyboard controls. to mitigate such problems, you should double up these events with similar events that can be activated by other means (so-called device-independent event handlers) — focus and blur would provide accessibility for keyboard users. let's look at an example that highlights when this could be useful. maybe we want to provide a thumbnail image that shows a larger version of the image when it is mo...

HTML Cheatsheet - Learn web development
e date legibly for the user, such as: published on 23-05-2020 text displayed in code format <p>this text is in normal format.</p> <code>this text is in code format.</code> <pre>this text is in predefined format.</pre> this text is in normal format. this text is in code format. this text is in predefined format. ...
...ibly for the user, such as: published on 23-05-2020 text displayed in code format <p>this text is in normal format.</p> <code>this text is in code format.</code> <pre>this text is in predefined format.</pre> this text is in normal format. this text is in code format. this text is in predefined format. ...
...n normal format. this text is in code format. this text is in predefined format. 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. ...
... block elements "block elements," on the other hand, take up the entire width of a webpage. ...

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. pagetablist page_tab_list page_tab_list tablist a pane or frame in the current window pane n/a region or group ? the most common content type in most documents. a paragraph generally encloses distinct portions of content that are not otherwise specified with other block level structure element types such as heading, table...
... adjust in increments from min to max values slider slider slider slider <input type=range> a system sound sound n/a n/a n/a no default semantics in html, but semantics and other accessibility features may be provided with aria. see also div n/a n/a n/a <span> span kind of like a dial, but controls the value in a related field spinbutton n/a n/a spinbutton uneditable text statictext label label see aria-readonly the text nodes of html elements are uneditable by default, apart from <input type=text>, or those with a contenteditable attribute entire status bar. in aria, a type of live region whose content is advisory in...
...number of columns within a table, grid, or treegrid. n/a n/a aria-colindex defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. n/a n/a aria-colspan identifies the element (or elements) whose contents or presence are controlled by the current element. n/a n/a aria-controls indicates the element that represents the current item within a container or set of related elements. n/a n/a aria-current identifies the element (or elements) that describes the object. n/a n/a aria-describedby identifies the element that provides a detailed, extended description for the object. n...
..., such as menu or dialog, that can be triggered by an element. supported for anything that's not a menu is poor n/a n/a aria-haspopup the item can get the keyboard focus focusable focusable focusable tabindex attribute with value of 0 or more the item has focus for text input. for other kinds of keyboard operation, e.g. 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... n/a horizontal horizontal aria-orientation=horizontal indicates whether the element...

Software accessibility: Where are we today?
consistent keyboard support and hotkeys many people can't use a mouse. extremely consistent keystroke support is a very important consideration. blind testers have knack for finding ways to improve keystroke support in almost any given piece of software. testing with people that have disabilities generally benefits everyone. use the accessible toolkit checklist to make sure your ui controls adhere to standards. a major limitation - the lack of context the solutions developed by these accessibility vendors have greatly increased the employment and personal fulfillment opportunities of hundreds of thousands of persons with disabilities, and the importance of their work cannot be diminished. however, all these solutions fell short of providing people with disabilities with a working e...
...re a number of potential "gotchas" when developing xul ui. please follow the practical techniques put forth listed in the accessible xul authoring guidelines. these guidelines cover many possible scenarios. if you take a little time to learn them, they will become an unconscious improvement to your design and engineering technique. ...
...engineers can provide context simply by creating an nsiaccessible for each custom control. the infrastructure to do this is straightforward. ...
...ady support proper keyboard accessibility, so let's not regress in that area. make sure that every new ui control that's developed provides the correct keyboard support. follow the accessible toolkit checklist whenever using xbl to create a new widget. 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. engineers can provide context simply by creating an nsiaccessible for each custom control. the infrastructure to do this is straightforward. other developers no matter what kind of work you do, the basis of accessibility is the need to understand that every user is different. after that, the exact techniques may change depending on the engineering environment. see see als...

Mozilla’s UAAG evaluation report
ad access 6.3 programmatic access to non-html/xml content. (p1) ni still working on active accessibility support for other kinds of content 6.4 programmatic operation. (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. (p1) g uses active accessibility to generate change events to assistive technology 6.6 conventional keyboard apis. (p1) c uses standard keyboard api, works with a number of assistive technologies 6.7...
...routines, because they aren't flexible enough (don't support css) 7.2 respect input configuration conventions. (p1) vg mozilla implements standard keyboard bindings there are a few missing pieces, such as support in xul comboboxes (menulist) for selecting items by typing alphanumeric keystrokes 7.3 operating environment conventions. (p2) g mozilla uses non-native controls. it does, however, support the look and feel of widgets on various operating systems, when the classic theme is selected (on by default). 7.4 input configuration indications. (p2) g menus indicate accesskey and accelerator configurations accelerators not show in button tooltips guideline 8. implement specifications that benefit accessibility. checkpoint title...
...g css 2: vg dom 1.0: vg guideline 9. provide navigation mechanisms. checkpoint title status notes/plans 9.1 provide content focus. (p1) c provides a content focus 9.2 provide user interface focus. (p1) c provides a user interface focus 9.3 move content focus. (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. (p1) ni see bug 36539 9.5 no events on focus change. (p2) p can turn off scripting, but then no event processing is available 9.6 show event handlers. (p2) p can view eve...
...istory. (p1) ni see bug 36539 9.5 no events on focus change. (p2) p can turn off scripting, but then no event processing is available 9.6 show event handlers. (p2) p can view event handlers through source view or dom inspector (tasks, tools, dom inspector) 9.7 move content focus optimally. (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. (p2) vg provides forward and reverse text search capability from the element with the current focus/selection, with and without case sensitivity very slow on larger documents. needs improvement. 9.9 structured n...

Using the Browser API
me.tld" mozbrowser remote> warning: this last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. if you don't use it, you run the risk of your application being compromised by a malicious web site. it is implied for webextensions, which always run in a separate content process from web content. aside from the iframe, there are some basic controls: <button> elements, a simple <form> to implement the browser controls, and a search bar. the search bar also contains buttons, as well as a form to type search requests into. you can see the full html listing here. the javascript implementation to wire up the functionality required by our simple browser, we've written some basic javascript (see the full javascript listing.) wiring up the back ...
...n while the page is loading (each with a different icon displayed). 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". when the mozbrowserloadend event fires, the latest page request has finished loading, and at this point we want to change the icon back to the reload icon (in this case we are just using a capital "r"). not...
... the latest page request has finished loading, and at this point we want to change the icon back to the reload icon (in this case we are just using a capital "r"). notice that this is also where we call the canmovebwd() and canmovefwd() functions we discussed earlier — it makes sense to update the status of the back and forward buttons after each page reload. 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. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). back to the stop/reload button — updating the icon is nice, ...
...we switch the class values on the element to toggle the show/hide. if searchactive is true, meaning that a search has been done, we want to disable the search as we hide the search options — we disable the buttons, make searchactive false, clear the entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/h...

BiquadFilterNode.type - Web APIs
tenuated; frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, the larger the frequency band. not used lowshelf standard second-order lowshelf filer. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, i...
...ion; frequencies lower than it are unchanged. the lower limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. peaking frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged. the middle of the frequency range getting a boost or an attenuation. controls the width of the frequency band. the greater the q value, the larger the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. ...
...the q value, the larger the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. the center of the range of frequencies. ...
...the larger this parameter is, the sharper and larger the transition will be. not used example the following example shows basic usage of an audiocontext to create a biquad filter node. for a complete working example, check out our voice-change-o-matic demo (look at the source code too). ...

BiquadFilterNode - Web APIs
frequencies above it pass through. the cutoff frequency. indicates how peaked the frequency is around the cutoff. the greater the value, the greater the peak. not used bandpass standard second-order bandpass filter. frequencies outside the given range of frequencies are attenuated; the frequencies inside it pass through. the center of the range of frequencies. controls the width of the frequency band. the greater the q value, the smaller the frequency band. not used lowshelf standard second-order lowshelf filter. frequencies lower than the frequency get a boost, or an attenuation; frequencies over it are unchanged. the upper limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if n...
...uencies lower than it are unchanged. the lower limit of the frequencies getting a boost or an attenuation. not used the boost, in db, to be applied; if negative, it will be an attenuation. peaking frequencies inside the range get a boost or an attenuation; frequencies outside it are unchanged. the middle of the frequency range getting a boost or an attenuation. controls the width of the frequency band. the greater the q value, the smaller the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenu...
...lue, the smaller the frequency band. the boost, in db, to be applied; if negative, it will be an attenuation. notch standard notch filter, also called a band-stop or band-rejection filter. it is the opposite of a bandpass filter: frequencies outside the give range of frequencies pass through; frequencies inside it are attenuated. the center of the range of frequencies. ...
...the larger this parameter is, the sharper and larger the transition will be. not used methods inherits methods from its parent, audionode. ...

Using the Gamepad API - Web APIs
id: a string containing some information about the controller. this is not strictly specified, but in firefox it will contain three pieces of information separated by dashes (-): two 4-digit hexadecimal strings containing the usb vendor and product id of the controller, and the name of the controller as provided by the driver. ...
... connected: a boolean indicating whether the gamepad is still connected to the system. ...
...urrently connected to the system. this can be used to distinguish multiple controllers. note that disconnecting a device and then connecting a new device may reuse the previous index. mapping: a string indicating whether the browser has remapped the controls on the device to a known layout. currently there is only one supported known layout — the standard gamepad. if the browser is able to map controls on the device to that layout the mapping property will be set to the string standard. connected: a boolean indicating whether the gamepad is still connected to the system. if this is so the value is true; if not, it is false. buttons: an array of gamepadbutton objects representing the buttons present on the device. each gamepadbutton has a pressed and a value property: the pressed propert...
... whether the button is currently pressed (true) or unpressed (false). the value property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. the values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed. axes: an array representing the controls with axes present on the device (e.g. analog thumb sticks). each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0). timestamp: this returns a domhighrestimestamp representing the last time the data for this gamepad was updated, allowing developers to determine if the axes and button data ha...

SourceBuffer - Web APIs
this is a timestamp range that can be used to filter what media data is appended to the sourcebuffer. coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. sourcebuffer.audiotracks read o...
...idth="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. this is a timestamp range that can be used to filter what media data is appended to the sourcebuffer. coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. sourcebuffer.audiotracks read only a list of the audio tracks currently contained inside the sourcebuffer. sourcebuffe...
...ata is appended to the sourcebuffer. coded media frames with timestamps within this range will be appended, whereas those outside the range will be filtered out. sourcebuffer.audiotracks read only a list of the audio tracks currently contained inside the sourcebuffer. sourcebuffer.buffered read only returns the time ranges that are currently buffered in the sourcebuffer. ...
... sourcebuffer.trackdefaults specifies the default values to use if kind, label, and/or language information is not available in the initialization segment of the media to be appended to the sourcebuffer. ...

Controlling multiple parameters with ConstantSourceNode - Web APIs
nique in action. in this simple example, we create three oscillatornodes. two of them have adjustable gain, controlled using a shared input control. the other oscillator has a fixed volume. html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of type range to control the volume of two of the three oscillators. ...
...left"> <div id="playbutton" class="button"> ▶️ </div> </div> <div class="right"> <span>volume: </span> <input type="range" min="0.0" max="1.0" step="0.01" value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-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-...
...(see controlling the linked oscillators to see the very short changevolume() method). next, the gainnode gainnode1 is created to handle the volume for the non-linked oscillator (oscnode1). we set that gain to 0.5. 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. once all the gain nodes are created, we create the constantsourcenode, constantnode. we connect its output to the gain audioparam on both gainnode2 and gainnode3, and we start the constant node running by calling its start() method; now it's sending the value 0.5 to the two gain nodes' values, and any change to constantnode.offset will automatically set the gain of both gainnode2 and gainnode3 ...
...tartoscillators() to start the oscillators playing their tones. that code is covered under starting the oscillators below. 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. all we have to do is set the value of the constantsourcenode's offset parameter. that value becomes the node's constant output value, which is fed into all of its outputs, which are, as set above, gainnode2 and gainnode3. while this is an extremely simple example, imagine having a 32 oscillator synthesizer with multiple linked parameters in play across a number of patched...

Keyboard-navigable JavaScript widgets - Accessibility
elds, and tab panels. these widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. this document describes techniques to make javascript widgets accessible with the keyboard. using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links, form controls) get focused. with the tabindex global attribute, authors can make other elements focusable, too. when set to 0, the element becomes focusable by keyboard and script. when set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order. the order in which elements gain focus when using a keyboard, is the source order by default. in exceptional circumst...
...ave to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex. 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.). follows the platform convention of the element. negative (i.e. tabindex="-1") yes no; author must focus the element with focus() in response to arrow or other key presses. zero (i.e. tabindex="0") yes in tab order relative to element's position in document (note that interactive elements like <a> have this behavior by default, they don't need the at...
... (note that interactive elements like <a> have this behavior by default, they don't need the attribute). positive (e.g. tabindex="33") yes tabindex value determines where this element is positioned in the tab order: smaller values will position elements earlier in the tab order than larger values (for example, tabindex="7" will be positioned before tabindex="11"). non-native controls native html elements that are interactive, like <a>, <input> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards. authors can also make a <div> or <span> keyboard accessible by adding a tabindex of 0. this is particularly useful for components that use interactive elements that do not exist in html. grouping contro...
...note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys. managing focus inside groups when a user tabs away from a widget and returns, focus should return to the specific element that had focus, for example, the tree item or grid cell. ...

Perceivable - Accessibility
ssibility). see other text alternative mechanisms for the argument against longdesc. multimedia content (i.e., audio or video) should at least have a descriptive identification available, such as a caption or similar. see text alternatives for static caption options, and audio transcripts, video text tracks, and other multimedia content for other alternatives. ui controls such as form elements and buttons should have text labels that describe their purpose. buttons are simple—you should make sure the button text describes the function of the button (e.g., <button>upload image</button>). for more information on other ui controls, see ui controls. implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology...
... to associate (e.g., describes it and is sat right next to it). this should mean that the full meaning can still be inferred even if you can't see the image. lists. if the order of list items is important, use an ordered list (<ol>). 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. 1.3.2 meaningful content sequence (a) a sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. the order should be made obvious by use of correct semantic elements (e.g., headings, paragraphs), with css being used to create any unusual layout styles, irrespective of the markup. aga...
...o determine for any content, even if it is visually presented in an unusual way. the order should be made obvious by use of correct semantic elements (e.g., headings, paragraphs), with css being used to create any unusual layout styles, irrespective of the markup. again, refer to html: a good basis for accessibility. 1.3.3 sensory characteristics (a) instructions for operating controls or understanding content do not rely on a single sense. this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. so, for example: "click the round button to continue" the button should be clearly labelled so that it is obvious that it is the button you need to press. if there are multiple buttons, make sure they ...
... practical resource 1.4.1 use of color (a) color should not be solely relied upon to convey information. for example, in forms, you should never mark required fields purely with a color (like red). instead (or as well as), something like an asterisk with a label of "required" would be more appropriate. see color and color contrast and multiple labels. 1.4.2 audio controls (a) for any audio that plays for longer than three seconds, provide accessible controls to play and pause the audio/video, and mute/adjust volume. use native <button>s to provide accessible keyboard controls, as shown in video player styling basics. 1.4.3 minimum contrast (aa) the color contrast between background and foreground content should be at a minimum level to ensur...

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...
...oat: 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; margin: 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) { #con...
... } #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...

Index - Developer guides
r and show how to add captions and subtitles to it, using the webvtt format and the <track> element. 8 creating a cross-browser video player apps, html5, video, full screen this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers. 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 t...
...on'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. often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. this is a...
... open font format (woff) fonts, needsmobilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. ...
...relevant apis and events include touch events, pointer lock api, screen orientation api, fullscreen api, drag & drop and more. ...

HTML attribute reference - HTML: Hypertext Markup Language
ture-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. 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. autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded. autoplay <audio>, <video> the audio or video should play as soon as possible. background <body>, <table>, <td>, <th> specifies the url of an ...
...pan attribute defines the number of columns a cell should span. content <meta> a value associated with http-equiv or name depending on the context. contenteditable global attribute indicates whether the element's content is editable. contextmenu global attribute defines the id of a <menu> element which will serve as the element's context menu. controls <audio>, <video> indicates whether the browser should show playback controls to the user. coords <area> a set of values specifying the coordinates of the hot-spot region. crossorigin <audio>, <img>, <link>, <script>, <video> how the element handles cross-origin requests csp <iframe> specifies the content security policy that an embedded documen...
... dropzone global attribute indicates that the element accepts the dropping of content onto it. enctype <form> defines the content type of the form data when the method is post. enterkeyhint <textarea>, contenteditable the enterkeyhint specifies what action label (or icon) to present for the enter key on virtual keyboards. 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). for <label>, <output> describes elements which belongs to this one. form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> indicates the form that is the owner of the element. forma...
...hat they fetch. intrinsicsize <img> this attribute tells the browser to ignore the actual intrinsic size of the image and pretend it’s the size specified in the attribute. inputmode <textarea>, contenteditable provides a hint as to the type of data that might be entered by the user while editing the element or its contents. 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). ismap <img> indicates that the image is part of a server-side image map. itemprop global attribute keytype <keygen> specifies the type of key generated. kind <track> specifies the kind of text track. label <op...

<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. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. the control's ui varies in general from browser to browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile browsers having usable implementations. in other browsers, these degrade gracefully to simple <input type="text"> controls. the control is intended to simply represent a local date and time, not necessarily the us...
... this purpose. 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. if the value entered into the element is later than this timestamp, the element fails constraint validation. if the value of the max attribute isn't a valid string which follows the format yyyy-mm-ddthh:mm, then the element has no maximum value. this value must specify a date string later than or equal to the one specified ...
...g the datetime-local input type doesn't provide is a way to set the time zone and/or locale of the date/time control. this was available in the datetime input type, but this type is now obsolete, having been removed from the spec. the main reasons why this was removed are a lack of implementation in browsers, and concerns over the user interface/experience. it is easier to just have a control (or controls) for setting the date/time and then deal with the locale in a separate control. for example, if you are creating a system where the user is likely to already be logged in, with their locale already set, you could provide the timezone in a hidden input type. for example: <input type="hidden" id="timezone" name="timezone" value="-08:00"> on the other hand, if you were required to allow the user ...
... the y2k38 problem (often server-side) javascript uses double precision floating points to store dates, as with all numbers, meaning that javascript code will not suffer from the y2k38 problem unless integer coercion/bit-hacks are used b...

Web video codec guide - Web media technologies
tional site, small business web site where videos are used to demonstrate products (but not where the videos themselves are a product), and so forth. a webm container using the vp8 codec for video and the opus codec for audio. these are all open, royalty-free formats which are generally well-supported, although only in quite recent browsers, which is why a fallback is a good idea. <video controls src="filename.webm"></video> an mp4 container and the avc (h.264) video codec, ideally with aac as your audio codec. this is because the mp4 container with avc and aac codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. make sure you verify your compliance with the license requirements, however. <vide...
...rc="filename.webm"></video> an mp4 container and the avc (h.264) video codec, ideally with aac as your audio codec. this is because the mp4 container with avc and aac codecs within is a broadly-supported combination—by every major browser, in fact—and the quality is typically good for most use cases. make sure you verify your compliance with the license requirements, however. <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. recommendations for high-quality video presentation if your mission is to present video at the highest possible quality, you will probab...
...io. if you're able to use the high or professional profile when encoding av1, at a high level like 6.3, you can get very high bit rates at 4k or 8k resolution, while maintaining excellent video quality. encoding your audio using opus's fullband profile at a 48 khz sample rate maximizes the audio bandwidth captured, capturing nearly the entire frequency range that's within human hearing. <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. at a high bit rate, this provides excellent graphics quality with remarkable color reproduction. in addition, you can optionally include hdr metadata to provide high ...
...he main 4:4:4 profile at up to 16 bits per component. at a high bit rate, this provides excellent graphics quality with remarkable color reproduction. in addition, you can optionally include hdr metadata to provide high dynamic range video. for audio, use the aac codec at a high sample rate (at least 48 khz but ideally 96khz) and encoded with complex encoding rather than fast encoding. <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. the reason for this is simple: video is huge. lossless compression is by definition less effective than...

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
xul documents that are opened within inline frames, use the page element as the root element. apart from having a different intended purpose than the window element, it is functionally no different. root elements for dialog windows dialog use the dialog element when creating options dialogs, confirmation dialogs, etc. 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. for example, windows places the ok button on the left and the cancel button on the right, while mac os x has the opposite layout. this is what firefox itself uses for bookmark properties and other dialogs. buttons used in dialog windows a dialog element will display some number of buttons at its bottom. as s...
...se event handlers, but xul also offers the oncommand special event handler to deal with actions that often have specific meanings, such as selection by a left-click (or right-click on systems set up as left-handed) on the mouse or selection by the enter key. listing 10 shows an example of the oncommand event handler in use. apart from menuitem elements, it can be used with buttons and other input controls. <menuitem label="open project page" oncommand="loaduri(this.value)" value="http://mozilla.org/"/> listing 10: the oncommand event handler because the gecko engine implements dom level 2 event handlers, you can define dynamic event listeners such as the one in listing 11. var item = document.getelementbyid('menu-item-custom'); function handlecommandevent(aevent) { alert('ok'); item...
... the type of button used for the list all tabs button at the right edge of the tab bar. - menu-button-type toolbar buttons specifying type="menu-button" results in a special button that combines features of both a normal toolbar button and one with type="menu", so that clicking the button itself does issue a command event. this is the type of button used for the back and forward buttons. input controls xul includes a number of input control elements that are very similar to html's form-related elements. labels use the label element for individual text labels, such as descriptive text. the value of the value attribute is the text that will be displayed. the control attribute takes as its value an id reference to another xul element with that id; clicking that label or giving it focus can be u...

Adding Events and Commands - Archive of obsolete content
ou can listen to, and which you use depend on the situation. elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. these are some notable events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you...
...epresents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the main way to interact with a control element. onselect. fired when the selection in a tree or listbox changes. onclick. triggered when the user clicks on the element, including right clicks. you shouldn't normally use this event to trigger actions on input controls such as buttons. use oncommand instead. onfocus and onblur. used when an element receives or loses focus when the user is navigating with the keyboard. you can combine these with -moz-user-focus to add custom focus behavior to elements that normally wouldn't have it. drag and drop. drag and drop operations involve several events. since drag and drop is a complicated thing to manage, there are s...
... custom events and how they can be used to effect communication between web content and xul can be found in the interaction between privileged and non-privileged pages code snippets, which describe and provide examples of this sort of communication. broadcasters keeping a consistent ui is another important aspect of extension behavior. 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. it's common that you need to change several elements at the same time, and this can be difficult to manage through javascript. the broadcaster element can help you out in these cases. first you need to add a broadcaster element to your xul code, as a child of a broadcasterset element. <broadcasterset id="...

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

Layout System Overview - Archive of obsolete content
user expects that the modifications they make to the document will appear immediately, not seconds later. this is especially critical when the user is typing into the document: it would be quite unusable if typing a character at the end of a document in the html editor caused the entire document to be reformatted - it would be too slow, at least on low-end machines. thus the html editor and text controls put considerable performance requirements on the layout system's handling of dynamic content manipulation. the fundamentals of frames: block and line there are many types of frames that are designed to model various formatting requirements of different html and xml elements. css2 defines several (block, inline, list-item, marker, run-in, compact, and various table types) and the standard html for...
...ut considerable performance requirements on the layout system's handling of dynamic content manipulation. the fundamentals of frames: block and line there are many types of frames that are designed to model various formatting requirements of different html and xml elements. 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. the most essential frame types are block and inline, and these correspond to the most important layout concepts, the block and line. a block is a rectangular region that is composed of one or more lines. a line is a single row of text or other presentational elements. all layout happens in the context of a block, and all of the co...
...t currently have no frames. (note: the original architecture of the layout system included the creation of frames for elements with no display. this changed somewhere along the line, but there is no indication of why the change was made. 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. this is presumably related to the fact that layout is responsible for form submission, but this is a design flaw that is being corrected by moving form submission into the content world. these collections of forms and form controls should be removed eventually. css frame constructor the frame constructor is responsible for resolving style values for content elements and creatin...

Introducing the Audio API extension - Archive of obsolete content
zsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this information is needed later to decode the audio data stream. ...
...nnel signal: channel1-sample1 channel2-sample1 channel1-sample2 channel2-sample2 channel1-sample3 channel2-sample3. ...
...olatency = false; } processing an audio stream since the mozaudioavailable event and the mozwriteaudio() method both use float32array values, it is possible to take the output of one audio stream and pass it directly (or process first and then pass) to a second. the first audio stream needs to be muted so that only the second audio element is heard. <audio id="a1" src="song.ogg" controls> </audio> <script> var a1 = document.getelementbyid('a1'), a2 = new audio(), buffers = []; function loadedmetadata() { // mute a1 audio. a1.volume = 0; // setup a2 to be identical to a1, and play through there. a2.mozsetup(a1.mozchannels, a1.mozsamplerate); } function audioavailable(event) { // write the current framebuffer var framebuffer = event.framebuffer; writeaudio(f...

Tuning Pageload - Archive of obsolete content
g to happen. if the parser gets a large chunk of data, it will try to parse it all, building the corresponding content model. since layout and painting happen asynchronously, while the parser is working there is no layout or painting. 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. the parser is interrupted at least every content.max.tokenizing.time microseconds, if it can be interrupted at all; bug 76722 may have more details on this part. content.switch.threshold determines how often we switch content sink modes. there are two modes. in mode a we interrupt the parser every content.max.tokenizing.time microseconds. in mode b w...
...should be in mode a or mode b. the decision is based on whether there were any user events on the relevant widget in the last content.switch.threshold microseconds. as in, if the user is moving the mouse or typing in that window, we'll be more responsive; if there is no user activity, we will aim for less parser interruption and less responsiveness but lower overall load time. content.notify.* controls the information flow from content sink to rendering model. in particular, the way things work right now is that the parser and content sink construct the dom; then every so often, the content sink lets the rendering model constructor (nscssframeconstructor) know that there are new dom nodes. the reason for this is that nscssframeconstructor is most efficient when doing a bunch of stuff at once i...
...s that the parser and content sink construct the dom; then every so often, the content sink lets the rendering model constructor (nscssframeconstructor) know that there are new dom nodes. the reason for this is that nscssframeconstructor is most efficient when doing a bunch of stuff at once instead of constructing rendering objects for one dom node at a time. 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). once the backoff count is reached, no more rendering model construction till after the whole page is parsed. content.maxtextrun controls the maximum length of data in a textnode. so if you have more than content...

Adding Labels and Images - Archive of obsolete content
cused. example 3 : source view <label value="click here:" control="open-button"/> <button id="open-button" label="open"/> in the example above, clicking the label will cause the button to be focused. description element for descriptive text not associated with any particular control, you can use the description tag. this element is useful for informative text at the top of a dialog or a group of controls for example. as with the label element, you can either use the value attribute for a single line of text or place text or xhtml content inside opening and closing description tags for longer blocks of text. it is more common to use the attribute syntax for labels, and the text content syntax for descriptions. example 4 : source view <description> this longer section of text is displayed. </desc...
...s longer section of text is displayed. </description> you can set the text via script using the textcontent property, as in the following example: <description id="text" width="200"/> document.getelementbyid('text').textcontent = "some lengthy word wrapped text goes here."; internally, both the label element and the description elements are the same. the label element is intended for labels of controls, such as text fields. the control attribute is only supported for labels. the description element is intended for other descriptive text such as informative text at the top of a dialog box. images xul has an element to display images within a window. this element is appropriately named image. note that the tag name is different than html (image instead of img). you can use the src attribute to sp...
... « previousnext » ...

XUL Tutorial - Archive of obsolete content
this tutorial describes xul, the xml user-interface language. this language was created for the mozilla application and is used to describe its user interface. ...
... this tutorial describes xul, the xml user-interface language. this language was created for the mozilla application and is used to describe its user interface. ...
... this tutorial describes xul, the xml user-interface language. this language was created for the mozilla application and is used to describe its user interface. ...

Common Firefox theme issues and solutions - Archive of obsolete content
responsive design view is missing background for unused area the responsive design view tool (tools > web developer > responsive design view) needs background styling for the unused area of the content window. debugger debugger toolbar buttons are missing icons on the debugger (tools > web developer > debugger) the toolbar buttons are missing their icons. miscellaneous issues html 5 media controls html 5 media controls are not styled the html5 video control bar is not styled. please go to mozilla's mission page using both your theme and the default theme and try the video on that page. this issue needs to be corrected in the next version of your theme. html 5 media control bar is missing full screen button the fullscreen icon is missing from the html5 video control bar. to test this go...
...that page. this issue needs to be corrected in the next version of your theme. html 5 media control bar is missing full screen button the fullscreen icon is missing from the html5 video control bar. to test this go to mozilla's mission page. 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'. ruleset ignored due to bad...
... 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'. ruleset ignored due to bad selector. 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. if you are using the extension console² you can easily filter out content related messages to see just chrom...

What is accessibility? - Learn web development
ely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with computers. this kind of disability can also be a result of old age, rather than any specific trauma or condition, and it could also result from hardware limitations — some users might not have a mouse. ...
... in terms of statistics, a significant number of people have mobility impairments. the u.s. ...
... in terms of statistics, a significant number of people have mobility impairments. the u.s. ...

Introduction to web APIs - Learn web development
f you are not an electrician, difficult and dangerous to attempt. image source: overloaded plug socket by the clear communication people, on flickr. 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. note: see also the api glossary entry for further description. apis in client-side javascript client-side javascript, in particular, has many apis available to it — these are not part of the javascript language itself, rather they are built on top of the core javascript language, providing you with extra superpowers to use in your javascript ...
... a complex 3d scene with lighting and textures using webgl. such apis are often combined with apis for creating animation loops (such as window.requestanimationframe()) and others to make constantly updating scenes like cartoons and games. 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). device apis are basically apis for manipulating and retrieving data from moder...
...e objects interact? if you look at our simple web audio example (see it live also), you'll first see the following html: <audio src="outfoxing.mp3"></audio> <button class="paused">play</button> <br> <input type="range" min="0" max="1" step="0.01" value="1" class="volume"> we, first of all, include an <audio> element with which we embed an mp3 into the page. we don't include any default browser controls. next, we include a <button> that we'll use to play and stop the music, and an <input> element of type range, which we'll use to adjust the volume of the track while it's playing. next, let's look at the javascript for this example. we start by creating an audiocontext instance inside which to manipulate our track: const audiocontext = window.audiocontext || window.webkitaudiocontext; const au...

Statistics API
overview each time a garbage collection occurs, spidermonkey keeps track of how long each phase of the collection took, along with some related data. there are several ways to get access to this data: the environment variable moz_gctimer controls text dumping of gc stats. moz_gctimer may be none, stderr, stdout, or a filename. if a filename is given, data is appended to that file. ...
... json api addons can obtain the complete data in json format via an observer. the following adds an observer using the jetpack framework. ...
..., data is appended to that file. when logging to a file is used in combination with multi-process firefox (e10s) it is necessary to set security.sandbox.content.level = 0, otherwise the content process will crash. 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. json api addons can obtain the complete data in json format via an observer. the following adds an observer using the jetpack framework. var prefs = require("api-utils/preferences-service"); components.utils.import('resource://gre/modules/services.jsm'); function observer(subject, topic, json) { var data = json.parse(json); ...

XForms Accessibility
ing option: ac_add_options --enable-extensions=default,xforms,schema-validation how to test there are two approaches to test xforms accessibility. the first is to use and assistive technology such as a screen reader, or an accessibility testing tool, to make sure xforms elements have proper accessible objects. or you may be guided by toolkit checklist to check keyboard navigation for xforms controls. you can try the following link to test xforms accessibility: visual xforms elements in xhtml document at bugzilla.mozilla.org visual xforms elements in xul document at bugzilla.mozilla.org you can see xforms sample tests at mozilla xforms project there are set of tests at beaufour.dk w3c's xforms test at w3.org keyboard navigation issues navigation sequence though xforms spec declare...
...attributes redefines datatype aria attribute. its value is xml schema builit-in datatype of instance node that xforms element is bound to. children mozilla xforms implementation allows form control elements to have child elements. therefore accessible children are formed from any accessible child elements of form control element and from elements that are introduced by its presentation. forms controls module some of form control elements may be represented in few ways by different widgets. this section lists accessible presentations for form control elements. input a key xforms element to show and change the instance data to which it is bound (see the spec, the docs). the follwoing representations input element are accessible: text field - see the docs. checkbox - see the docs datepick...
...rom a list of pre-defined values (see the spec, the docs). it can have the following representations: listbox checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the docs). 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. some of these elements are not accessible itself but they makes accessibility properties for xforms elements that hold them. label specifies the label for the xforms control (see the spec, the docs). every form control other than the output element must contain a label element. the value of label element is used as name of accessible object. help specifies contextual help for...

Index
eference, xpcom interface reference, thunderbird the nsimsgdbview interface handles the display of mail in the threadpane and preview pane of thunderbird and other xpcom based mail cients. 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. 766 nsimsgdatabase interfaces, interfaces:scriptable, message database, messages, needscontent, xpcom, xpcom api reference, xpcom interface reference, thunderbird the nsimsgdatabase interface is an abstract interface used to access the mail database backend. 767 nsimsgfilter interfaces, interfaces:scriptable, xpcom, ...
... isnonblocking no summary! 816 write no summary! 817 writefrom no summary! 818 writesegments no summary! 819 nsioutputstreamcallback interfaces, interfaces:scriptable, streams, xpcom, xpcom interface reference called to indicate that the stream is either writable or closed. 820 nsiparentalcontrolsservice firefox 3, interfaces, interfaces:scriptable, parental controls, xpcom, xpcom api reference, xpcom interface reference implemented by: @mozilla.org/parental-controls-service;1. to create an instance, use: 821 nsiparserutils implemented by: @mozilla.org/parserutils;1 as a service: 822 nsipassword interfaces, login manager, needscontent, xpcom a...
...om interface reference implemented by: @mozilla.org/xre/app-info;1. to get an instance, use: 1112 nsixulsortservice interfaces, interfaces:scriptable, xpcom interface reference, xul used internally for insertion sorting. 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. a template builder, given an input source of data, a template, and a reference point, generates a list of results from the input, and copies part of the template for each result. templates may generate content recursively, using the same template, but with the previ...

BiquadFilterNode() - Web APIs
"allpass". the meaning of the other options depends on the value of this one. the defaults for all are as follows: q: 1 detune: 0 frequency: 350 gain: 0 lowpass: (default) allows frequencies below a cutoff frequency to pass through, and attenuates frequencies above the cutoff. this is a standard second-order resonant lowpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, ...
...s value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. highpass: a highpass filter is the opposite of a lowpass filter. frequencies above the cutoff frequency are passed through, but frequencies below the cutoff are attenuated. it implements a standard second-order resonant highpass filter with 12db/octave rolloff. q: controls how peaked the response will be at the cutoff frequency. a large value makes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above thi...
...akes the response more peaked. please note that for this filter type, this value is not a traditional q, but is a resonance value in decibels. frequency: the cutoff frequency. gain: not used. bandpass: a bandpass filter allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. it implements a second-order bandpass filter. q: controls the width of the band. the width becomes narrower as the q value increases. frequency: the center of the frequency band. gain: not used. lowshelf: the lowshelf filter allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies. it implements a second-order lowshelf filter. q: not used. frequency: the upper limit of the frequences where the boost, o...

Recording a media element - Web APIs
used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't output to their speakers, causing an ugly feedback loop. ...
... below the playback element is a button for downloading the recorded video. ...
... below the playback element is a button for downloading the recorded video. ...

Using the MediaStream Recording API - Web APIs
n css that doesn't look like much initially, but soon starts to make you think "wow, why didn't we have this before? why was css2 layout so awkward?" it allows you do a calculation to determine the computed value of a css unit, mixing different units in the process. for example, in web dictaphone we have three main ui areas, stacked vertically. 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. flexbox could be the answer here, but it's a bit overkill for such a simple layout. instead, the problem was solved by making th...
....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...
...k = function(e) { let evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } let's go through the above code and look at what's happening. first, we display a prompt asking the user to name their clip. next, we create an html structure like the following, inserting it into our clip container, which is an <article> element. <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). we then set the value of the <audio> element's src attribute to the object url, so that when the play button is pressed on the audio player, it will play the blob. finally, w...

Using the Web Speech API - Web APIs
1 inclusive.) the added grammar is available in the list as a speechgrammar object instance. speechrecognitionlist.addfromstring(grammar, 1); we then add the speechgrammarlist to the speech recognition instance by setting it to the value of the speechrecognition.grammars property. 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). speechrecognition.lang: sets the language of the recognition. setting this is good practice, and therefore recommended. speechrecognition.interimresults: defines whether the speech recognition system should return interim results, or just final results. final results are good enough...
... plus a number of closely-related interfaces for representing text to be synthesised (known as utterances), voices to be used for the utterance, etc. again, most oses have some kind of speech synthesis system, which will be used by the api for this task as available. demo to show simple usage of web speech synthesis, we've provided a demo called speak easy synthesis. 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. after you have entered your text, you can press enter/return to hear it spoken. to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser ...
...pping the media.webspeech.synth.enabled flag to true in about:config. firefox os 2.5+ supports it, by default, and without the need for any permissions. chrome for desktop and android have supported it since around version 33, without prefixes. 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. the <select> element is initially empty, but is populated with <option>s via javascript (see later on.) <h1>speech synthesiser</h1> <p>enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p> <form> <input type="text" class="txt"> <div> <label for="rate">rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate"> ...

ARIA live regions - Accessibility
t interactive should be marked as live regions. below is a list of each related aria live region property with a description. aria-live: the aria-live=politeness_setting is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. the default setting is off. this attribute is by far the most important. aria-controls: the aria-controls=[idlist] is used to associate a control with the regions that it controls. regions are identified just like an id in a div, and multiple regions can be associated with a control using a space, e.g. aria-controls="myregionid1 myregionsid2". not known if the aria-controls aspect of live regions is implemented in current ats, or which. needs research. normally, only aria-li...
...off". dropdown box updates useful onscreen information a website specializing in providing information about planets provides a dropdown box. when a planet is selected from the dropdown, a region on the page is updated with information about the selected planet. ...
...tings are: false or true. the default setting is false. aria-relevant: the aria-relevant=[list_of_changes] is used to set what types of changes are relevant to a live region. the possible settings are one or more of: additions, removals, text, all. the default setting is: additions text. aria-labelledby: the aria-labelledby=[idlist] is used to associate a region with its labels, similar to aria-controls but instead associating labels to the region. and label identifiers are separated with a space. aria-describedby: the aria-describedby=[idlist] is used to associate a region with its descriptions, similar to aria-controls but instead associating descriptions to the region and description identifiers are separated with a space. advanced use case: clock as an illustration of aria-atomic, consid...

Using the alertdialog role - Accessibility
marked up as the alert dialog's accessible description (using aria-describedby). unlike regular alerts, an alert dialog must have at least one focusable control and focus must be moved to that control when the alert dialog appears. generally alert dialogs have at least a confirmation, close or cancel button that can be used to move focus to. ...
...ert dialogs can have other interactive controls such as text fields, tabs or checkboxes. which particular control focus should be moved to depends on the purpose of the dialog. the tab order inside the alert dialog must wrap. the difference with regular dialogs is that the alertdialog role should only used when an alert, error, or warning occurs. in other words, when a dialog's information and controls require the user's immediate attention alertdialog should be used instead of dialog. it is up to the developer to make this distinction though. because of its urgent nature, alert dialogs must always be modal. note: this role should only be used for alert messages that have associated interactive controls. ...
...the alert role should be used instead in that case (as the described in the using the alert role technique). possible effects on user agents and assistive technology when the alertdialog role is used, the user agent should do the following: expose the element as a dialog in the operating system's accessibility api. ...

ARIA: button role - Accessibility
e button's label, e.g., "save as…". in addition to the ordinary button widget, role="button" should be included when creating a toggle button or menu button using a non button element. a toggle button is a two-state button that can be either off (not pressed) or on (pressed). the aria-pressed attribute values of true or false identify a button as a toggle button. a menu button is a button that controls a menu and has an aria-haspopup property attribute set to either menu or true. associated aria roles, states, and properties aria-pressed defines the button as a toggle button. the value of aria-pressed describes the state of the button. the values include aria-pressed="false" when a button is not currently pressed, aria-pressed="true" to indicate a button is currently pressed, and aria-pres...
...tate of the button. the values include aria-pressed="false" when a button is not currently pressed, aria-pressed="true" to indicate a button is currently pressed, and aria-pressed="mixed" if the button is considered to be partially pressed. if the attribute is omitted or set to its default value of aria-pressed="undefined", the element does not support being pressed. 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. if the button has aria-expanded="false" set, the grouping is not currently expanded; if the button has aria-expanded="true" set, it is currently expanded; if the button has aria-expanded="undefined" set or the attribute is ommitted, it is not expandable. basic but...
...if the button role is added to an element that is not focusable by itself (such as <span>, <div> or <p>) then, the tabindex attribute has to be used to make the button focusable. warning: be careful when marking up links with the button role. buttons are expected to be triggered using the space or enter key, while links are expected to be triggered using the enter key. in oth...

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...
...nd; } <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-controls-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-appea...

font-variant-numeric - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... these values control the figures used for numbers. two values are possible: lining-nums activating the set of figures where numbers are all lying on the baseline. it corresponds to the opentype values lnum. oldstyle-nums activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. it corresponds to the opentype values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentype values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. it corresponds to the opentype values tnum. <numeric-...
... numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentype values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. it corresponds to the opentype values tnum. <numeric-fraction-values> these values controls the glyphs used to display fractions. two values are possible: diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. it corresponds to the opentype values frac. stacked-fractions activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. it correspon...

Media buffering, seeking, and time ranges - Developer guides
buffered the buffered attribute will tell us which parts of the media has been downloaded. it returns a timeranges object, which will tell us which chunks of media have been downloaded. this is usually contiguous but if the user jumps about while media is buffering, it may contain holes. 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. (learn more about timeranges). a timeranges object consists of the following properties: length: the number of time ranges in ...
...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'; ...
...will give a valid indication of the end of seekable media. if range requests are enabled this value usually becomes the duration of the media almost instantly. it is better perhaps to give an indication of how much media has actually downloaded — this what the browser's native players seem to display. so let's build this. ...

<fieldset>: The Field Set element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. ...
...w attributes, the most notable of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go. attributes this element includes the global attributes. 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>. they won't receive any browsing events, like mouse clicks or focus-related events. by default browsers display such controls grayed out. note that form elements inside the <legend> element won't be disabled. form this attribute takes the value of the id attribute of ...
...uit your page design. examples simple fieldset this example shows a really simple <fieldset> example, with a <legend>, and a single control inside it. <form action="#"> <fieldset> <legend>simple fieldset</legend> <input type="radio" id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it. note how both the controls are disabled due to being inside a disabled <fieldset>. <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <input type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <input type="password" id="pwd" value="wookie"> </di...

<input type="range"> - HTML: Hypertext Markup Language
ets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. the range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is. 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. password length for a password manager's generated passwords. as a rule, if the user is more likely to be interested in the percentage of the distance between minimum ...
... degree, labels. the specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control. range control mockups since browsers have this flexibility, and to date none support all of the features html defines for range controls, here are some mockups to show you what you might get on macos in a browser which supports them. an unadorned range control this is what you get if you don't specify a list attribute, or if the browser doesn't support it. html examples <input type="range"> screenshot live a range control with hash marks this range control i...
.... standards according to the specification, making it vertical requires adding css to change the dimensions of the control so that it's taller than it is wide, like this: css #volume { height: 150px; width: 50px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1"> result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly. transform: rotate(-90deg) you can, however, create a vertical range control by drawing a horizontal range control on its side. the easiest way is to use css: by applying a transform to rotate the element, you can make it vertical. let's take a look. html the html needs to be updated to wrap the <input> in a <div> to let us correct the layout after the transform is performed (since t...

HTML elements reference - HTML: Hypertext Markup Language
guide. element description <button> the html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. <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. ...
...ement represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. <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. ...
... 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. <label> the html <label> element represents a caption for an item in a user interface. ...

Autoplay guide for media and Web Audio APIs - Web media technologies
s autoplay entirely for the document or <iframe> and all nested frames. the http header is: feature-policy: autoplay 'none' using the <iframe>'s allow attribute: <iframe src="mediaplayer.html" allow="autoplay 'none'"> </iframe> best practices tips and recommended best practices to help you make the most of working with autoplay are offered here. 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" contro...
...o 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. browser configuration options browsers may have preferences that control the way autoplay works, or h...
... which indicates whether or not to apply autoplay blocking to the web audio api. the default is true. media.autoplay.default an integer preference which specifies whether per-domain configuration for autoplay support by default is allowed (0), blocked (1), or prompt-on-use (2). the default value is 0. 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. if media.autoplay.default is not set to 0 (autoplay allowed by default), this preference being true allows autoplay of media with audio tracks anyway if the page has been activated by user gestures, and media that isn't audible is not restricted at all. media.block-autoplay-until-in-foreground...

d - SVG: Scalable Vector Graphics
command parameters notes c (x1,y1, x2,y2, x,y)+ draw a cubic bézier curve from the current point to the end point specified by x,y. the start co...
... command parameters notes c (x1,y1, x2,y2, x,y)+ draw a cubic bézier curve from the current point to the end point specified by x,y. the start control point is specified by x1,y1 and the end control point is specified by x2,y2. any su...
... command parameters notes q (x1,y1, x,y)+ draw a quadratic bézier curve from the current point to the end point specified by x,y. the control point is specified by x1,y1. any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit a...

The Essentials of an Extension - Archive of obsolete content
hat we do here is define a single global object: xulschoolchrome. now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions. you can read more about the typeof operator. if you're unfamiliar with javascript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new object(). /** * controls the browser overlay for the hello world extension. */ xulschoolchrome.browseroverlay = { finally, browseroverlay is our object. naming and referencing objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost. we use javadoc style comments on all namespaces, objects and object members. this is a similar standard to the one used in mozilla code, and ...
... using only the keyboard. they are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. 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. the value of the access key is localized because it should match a letter in the label text. you should also be careful to avoid access key repetition. for example, within a menu or submenu, access keys should not be repeated. in a window you have to be more careful picking access keys because there are usually more controls there. you have to ...

In-Depth - Archive of obsolete content
ble. other sites which list mozilla specific css properties xulplanet.com [dead link, 26.03.13] mozilla-prefixed properties on the standard track 26.03.13 -moz-appearance makes a widget look like it's from your operating system. possible are (this is probably an incomplete list): none - (!important may be needed) will override the operating system default. use this when you want one or two controls to look different from the operating systems defaults. button, checkbox-container, checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersorta...
...corner. an example of where this would be used is on tabs. -moz-border-radius-bottomleft the same as -moz-border-radius but only applies to the bottom left corner. an example of where this would be used is on a footer. -moz-border-radius-bottomright the same as -moz-border-radius but only applies to the bottom right corner. an example of where this would be used is on a footer. -moz-box-direction controls which way the items in this box are displayed. normal in english web browsers items are displayed top to bottom and left to right. this will flip it around so items inside of this box will be displayed bottom to top and right to left. this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar. values: normal, reverse -moz-image-region this is usef...

Documentation for BiDi Mozilla - Archive of obsolete content
de. overview of bidi processing bidi text is reordered according to the unicode bidi algorithm (uba). the implementation is based on ibm's international components for unicode (icu), which was chosen after comparing and testing the available open-source implementations. 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). bidi processing for a given html document will only take place if one of the following is true: the page includes a hebrew or arabic character or a hindi digit. this is determined in nstextfragment::setto the page includes a element with the attribute dir=rtl, either explicitly (nsgenerichtmlelement::mapcommonattributesinto), or as a consequence of a...
... (if needed) so that mozilla displays it (from a bidi point of view) as it would be displayed by a visual clipboard viewer. in "logical" mode, the text copied into the clipboard is converted (if needed) so that a logical application will display it (from a bidi point of view) as it is displayed by mozilla. text pasted from the clipboard is treated exactly as if it came from a logical source. 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. some support added for alignment in tables and lists, and fixes for problems with different combinations of dir and align. improvements to lists with hebrew and arabic list-styl...

Introduction to XUL - Archive of obsolete content
in fact, most of mozilla's windows (and dialogs) will be described using this mechanism. xul (pronounced "zool," as if that spelling helped any, and short for "xml user interface language") is our name for the language in which these ui descriptions are built. ...
...d automatically by the xul document loader and therefore not normally used in javascript. xul elements as mentioned above, a xul file is mostly an html file with xml syntax. a xul file may contain nothing but html elements and be completely functional. but xul defines several element types unique to itself, which add functionality to the window. widgets widgets are generally objects like form controls: buttons, text boxes, tree controls and the like. a window can just as easily contain html form elements (using the html namespace) like any html content (though there is no need to put them within a form element). in fact, xul largely uses extant widgets from html, with a few extensions and additions. each widget will define a unique xml syntax for describing itself; see the widget documentation...

Positioning - Archive of obsolete content
, the position can be specified using several attributes placed on the menupopup, panel or tooltip element. these attributes are described below and function the same for all three elements. the position attribute specifies the alignment of the popup with respect to the element that the popup is attached to. 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 context menu, that is, a menu that is attached to an an element using the context attribute and opened via context-clicking the mouse, the position attribut...
...lement with the popup attribute. for a context menu, that is, a menu that is attached to an an element using the context attribute and opened via context-clicking the mouse, the position attribute is ignored. the menu appears at the mouse position offset by a couple of pixels so that the user can close the context menu just by clicking in the same location. for a tooltip, the position attribute controls how the tooltip is anchored to the element with the tooltip attribute. you wouldn't normally use the position attribute on a tooltip; instead you would just want the tooltip to appear at its default position which is near the mouse pointer. for instance: <menupopup id="edititems" position="end_before"> <menuitem label="cut"/> <menuitem label="copy"/> <menuitem label="paste"/> </menupopup...

Box Model Details - Archive of obsolete content
ller than this size but they may grow larger. here the window should appear just over 200 pixels wide. that's enough for the two buttons. because all three elements are flexible, but they don't need any more room, the flexibility adds no extra space. as shown in the image, there are two buttons which expand vertically to fit their container, which in this case is the hbox. the align attribute controls this behavior on a horizontal box. you can also prevent this stretching by placing a maximum height on the elements or, better, on the box itself. if a box has a maximum height, the elements inside it are constrained by this. however, the problem with this is that you need to know how big the element will be beforehand. example 2 : source view <hbox flex="1" align="top"> <button label="left" st...
... make certain elements flexible. the best interface is one that can be displayed at various sizes without problems. the box model may be difficult to understand without trying various various things out for yourself. the following is an outline of both types of boxes: horizontal boxes lay out their elements next to each other horizontally. flexible elements are flexed horizontally. packing controls their horizontal placement of child elements. alignment controls how the row of elements are aligned vertically. vertical boxes lay out their elements vertically in a column. flexible elements are flexed vertically. packing controls the vertical placement of child elements. alignment controls how the column of child elements are aligned horizontally. you can put boxes anywhere in a x...

Element Positioning - Archive of obsolete content
the extra space to appear on the left side instead, so that the buttons stay right aligned in the window. you could accomplish this by placing a spacer inside the box, but that gets messy when you have to do it numerous times. a better way is to use an additional attribute pack on the box. this attribute indicates how to pack the child elements inside the box. for horizontally oriented boxes, it controls the horizonal positioning of the children. for vertically oriented boxes, it controls the vertical positioning of the children. you can use the following values: start this positions elements at the left edge for horizontal boxes and at the top edge for vertical boxes. this is the default value. center this centers the child elements in the box. end this positions elements at the right ed...
... to that of the previous example. box alignment if you resize the window in the happy-sad example above horizontally, the box will grow in width. if you resize the window vertically however, you will note that the buttons grow in height. this is because the flexibility is assumed by default in the other direction. you can control this behavior with the align attribute. for horizontal boxes, it controls the position of the children vertically. for vertical boxes, it controls the position of the children horizontally. the possible values are similar to those for pack. start this aligns elements along the top edge for horizontal boxes and along the left edge for vertical boxes. center this centers the child elements in the box. end this aligns elements along the bottom edge for horizontal ...

More Button Features - Archive of obsolete content
layed on the button. the style attribute functions similar to its html counterpart. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the i...
...f the text. by using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the image on the left or right. you can also use the value vertical to place the image above or below. in this case, the dir attribute controls the placement above or below. the same values are used, where normal means place the image above the text, and reverse means place the image below the text. example 3 : source view <button label="left" image="happy.png"/> <button label="right" image="happy.png" dir="reverse"/> <button label="above" image="happy.png" orient="vertical"/> <button label="below" image="happy.png" orient="vertical"...

XUL accessibility guidelines - Archive of obsolete content
e current value entered into the textbox. the correct label for textbox is actually the same, but we don't want assistive technologies to read or show it twice. we need a way of specifying in the source that the checkbox, editbox, and nearby text labels are all part of a single entity, and that they essentially label each other. 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. put into xul, this looking something like the following. <checkbox id="rememberhistorydays" aria-labelledby="historydaysprelabel historybox historydayspostlabel"> <label id="historydaysprelabel">remember visited pages for the last</label> <t...
... following. <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). however, in all other cases using <label control="[id]"> is enough. testing assistive information testing with a screen reader is in many ways the best test, because both the keyboard navigation and underlying semantics/structure of the ui can be tested at the same time. it is an excellent indicator regarding the a...

listbox - Archive of obsolete content
f rows to display in the list using the rows attribute. additional rows can be viewed using a scroll bar. a listbox is expected to contain listitem elements. all the rows in the listbox are the same height, which is the height of the tallest item in the list. if you wish to create a list with variable height rows, or with non-text content, you should instead use the richlistbox element. see list controls for more information. attributes disabled, disablekeynavigation, preference, rows, seltype, suppressonselect, tabindex, value properties accessibletype, currentindex, currentitem, disabled, disablekeynavigation, itemcount, listboxobject, selectedcount, selectedindex, selecteditem, selecteditems, seltype, suppressonselect, tabindex, value methods additemtoselection, appenditem, clear...
...re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. disablekeynavigation type: boole...

window - Archive of obsolete content
</window> attributes accelerated type: booleanset this attribute to true to allow hardware layer managers to accelerate the window. activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground). moreover this hides separator between titlebar and window contents. this only affects mac os x. chromemargin type: margin string controls the amount of chrome that should be visible on each side of the window. the specified string should contain four numbers, separated by commas, indicating the margin in pixels for the top, right, bottom, and left edges of the window, respectively. this value may be -1 to use the default margin for that side on the current platform, 0 to have no system border (that is, to extend the client area to ...
...to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block". 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. the problem can be solved as follows: <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png" style="display:none"/> or <html:head> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> </html:head> ...

XUL - Archive of obsolete content
t will help you get started with xul, originally from xulplanet. xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. the term xul is sometimes used to refer to the whole mozilla platform (e.g. xul applications are applications using xul and other components of the platform). ...
...ul, originally from xulplanet. xul (xml user interface language) is mozilla's xml-based language for building user interfaces of applications like firefox. the term xul is sometimes used to refer to the whole mozilla platform (e.g. xul applications are applications using xul and other components of the platform). xul controls lists some of the common controls provided by xul. documentation xul tutorial a guided tutorial that will help you get started with xul, originally from xulplanet. xul reference xul elements, attributes, properties, methods, and event handlers. xul controls a quick list of all of the available xul controls. ...

Dialogs in XULRunner - Archive of obsolete content
l, help, extra1, and extra2). buttonlabelaccept label for the accept button; similar attributes exist for the other button types. buttonaccesskeyaccept access key for the accept button; similar attributes exist for the other button types. ondialogaccept javascript to execute if the accept button is pressed; similar attributes exist for the other button types. 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. not too sure if i’ll use the <dialogheader>, but if i did, the single element would be a big time saver over building the header from scratch. common dialogs some of the most frequently used common dialogs are for opening and saving files. for instance, windows has...
...file; alert(thefile.leafname); // --- do something with the file here --- } } xul does not currently support any other common dialogs. that could change in future releases. firefox and thunderbird both support nearly native page setup and print dialogs. however, xul does support elements to make creating wizards a simple task as well. future articles in this series will look at input controls, printing, the clipboard, and xpcom. see also dialog xul tutorial:creating dialogs nsifilepicker xul tutorial:open and save dialogs « previous original document information author: mark finkle last updated date: october 2, 2006 ...

Theme changes in Firefox 3.5 - Archive of obsolete content
arty themes can still draw a gripper for the scrollbar thumb button by applying a centered background image to the scrollbar's thumb button. global/checkbox.css, global/radio.css since bug 394892, radio buttons and checkboxes no longer have a minimum size on mac os x. if your theme uses native checkboxes or radiobuttons (-moz-appearance: radio / checkbox), this can result in distorted controls. you might have to set the width and height of .checkbox-check and .radio-check to 16px to avoid that problem. look at the patch to see what was changed for pinstripe. bug 450944 changed the way window shadow is handled on mac os x. before that change, opaque windows always had a shadow and transparent windows never had a shadow. after that change, transparent windows also have a sh...
...er.xul named browsingmode. the value of this attribute is normal when the private browsing mode is inactive, and private when it's active. this attribute can be used to style different parts of the browser window inside the private browsing mode. see this blog post for an example. 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. greying menus of inactive windows: active windows get attribute 'active="true"'. to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both browser and server contexts that is centered on open source and web standards. 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. let's take a tour through some of the top features of jaxer through code examples. jaxer – server-side ajax via the firefox browser engine on the server although server-side javascript is not a new concept, jaxer implements it in a unique fashion. by taking advantage of current scriptmonkey and ajax capabilities not t...
...ion which is what we'll examine next. jaxer – example application the example application consists of a simple form used to accept comments from public users and was built to cover some of the most useful jaxer features. 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. for more information how to obtain and install these products, refer to the resources section. single page applications the first feature the application demonstrates is the concept of a single page application. since jaxer allows you to define which code is reserved for the server-side, which code stays on the client-side, and which code is shared between the two, i...

Troubleshooting XForms Forms - Archive of obsolete content
xt/xml. check the xhtml 1.0 namespace declaration mozilla xforms is built upon the xhtml 1.0 specification, which is located at http://www.w3.org/1999/xhtml . ...
...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? for an inline instance you most probably need to have <xf:instance xmlns=""> .... 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. if the instance is not in the empty na...

Building up a basic demo with A-Frame - Game development
emo. high level overview the current version of a-frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the browser. it runs on desktop, mobile (ios and android), and oculus rift, gear vr and htc vive. 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. it is based on the entity component system, which is known in the game development world, but it targets web developers with a familiar markup structure, manipulable with javascript. the end result is 3d web experiences, which are vr-enabled by default. environment setup let's start by setting up an environment to create something with a-frame. we'll then build up a d...
...cube> element: <a-sky color="#dddddd"></a-sky> at this point, if you save the code and refresh your browser you can already see the cube on the screen with our custom background: here's the code we have created so far: you can also check it out on github. a-frame takes care of setting up everything you need: a default light source and camera are included, so the cube is visible. 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. specifying a camera a camera entity can be created by adding an <a-came...

Images, media, and form elements - Learn web development
%; } this would however stretch the image, so probably isn't what you'd want to do. form elements form elements can be a tricky issue when it comes to styling with css, and the web forms module contains detailed guides to the trickier aspects of styling form elements, which i will not fully reproduce here. there are a few key basics worth highlighting in this section of the article. 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. there are some additional elements, such as <textarea> for multiline text input, and also elements used to contain and label parts of forms such as <fieldset> and <legend>. html5 also contains attributes that e...
... form elements use different box sizing rules for different widgets. you learned about the box-sizing property in our box model lesson and you can use this knowledge when styling forms to ensure a consistent experience when setting widths and heights on form elements. ...

CSS values and units - Learn web development
which values are accepted on the mdn property reference pages. if the allowed value includes <length-percentage> then you can use a length or a percentage. if the allowed value only includes <length>, it is not possible to use a percentage. numbers some values accept numbers, without any unit added to them. 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). this property accepts a number between 0 (fully transparent) and 1 (fully opaque). in the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque. note: when you use a number in css as a value it should not be surrounded in quotes. color th...
... rgb is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand. 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. if you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. values in between give you different levels of transparency. note: setting an alpha channel on a color has one key difference to using the opacity property we looked at earlier. when you use opacity you make the element and everything inside it opaque, whereas using rgba colors onl...

Flexbox - Learn web development
th some buttons jammed into the top left hand corner. first, take a local copy of this example. now, add the following to the bottom of the example's css: div { display: flex; align-items: center; justify-content: space-around; } refresh the page and you'll see that the buttons are now nicely centered, horizontally and vertically. we've done this via two new properties. align-items controls where the flex items sit on the cross axis. by default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. if the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. this is how our first example got equal height columns by default. the center value that we used...
...he start and end of the cross axis respectively. see align-items for the full details. you can override the align-items behavior for individual flex items by applying the align-self property to them. for example, try adding the following to your css: button:first-child { align-self: flex-end; } have a look at what effect this has, and remove it again when you've finished. justify-content controls where the flex items sit on the main axis. the default value is flex-start, which makes all the items sit at the start of the main axis. you can use flex-end to make them sit at the end. center is also a value for justify-content, and will make the flex items sit in the center of the main axis. the value we've used above, space-around, is useful — it distributes all the items evenly along...

Styling links - Learn web development
lore the default styles: links are underlined. unvisited links are blue. visited links are purple. hovering a link makes the mouse pointer change to a little hand icon. 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. this is because users know and have come to expect this behaviour — if links were styled differently, it would confuse a lot of people. this doesn't...
...="#">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
commended to always set the type attribute on <button> elements. <!-- clicking this button sent "<em>do a</em>" instead of "a" in some cases --> <button type="submit" name="iwantto" value="a"> <em>do a</em> </button> choosing one solution or the other is up to you based on your project's constraints. let go of css one of the big issues with html forms is styling form widgets with css. form controls appearance is browser and operating system specific. for example, the input of color type looks different in safari, chrome and firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker. it's generally a good idea to not alter the default appearance of form control because altering one css property value may alt...
...ery difficult. even if it's still possible to do a few adjustments on text elements (such as sizing or font color), there are always side effects. the best approach remains to not style html form widgets at all. but you can still apply styles to all the surrounding items. 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. you can also investigate some hard techniques such as rebuilding widgets with javascript. but in that case, do not hesitate to charge your client for such foolishness. feature detection and polyfills css and javascript are awesome technologies, but it's important to ensure you don't break legacy browsers. before using features that aren't fully supported in ...

Sending form data - Learn web development
long with the rest of the request, even if the form itself is hosted on an insecure page accessed using http. on the other hand, if the form is hosted on a secure page but you specify an insecure http url with the action attribute, all browsers display a security warning to the user each time they try to send data because the data will not be encrypted. the names and values of the non-file form controls are sent to the server as name=value pairs joined with ampersands. the action value should be a file on the server that can handle the incoming data, including ensuring server-side validation. the server then responds, generally handling the data and loading the url defined by the action attribute, causing a new page load (or a refresh of the existing page, if the action points to the same page).
...t to send files, you need to take three extra steps: set the method attribute to post because file content can't be put inside url parameters. set the value of enctype to multipart/form-data because the data will be split into multiple parts, one for each file plus one for the text data included in the form body (if text is also entered into the form). include one or more <input type="file"> controls to allow your users to select the file(s) that will be uploaded. for example: <form method="post" action="https://www.foo.com" enctype="multipart/form-data"> <div> <label for="file">choose a file</label> <input type="file" id="file" name="myfile"> </div> <div> <button>send the file</button> </div> </form> note: servers can be configured with a size limit for files and htt...

Test your skills: Multimedia and embedding - Learn web development
or further help section at the bottom of this page. multimedia and embedding 1 in this task we want you to embed a simple audio file onto the page. you need to: add the path to the audio file to an appropriate attribute to embed it on the page. the audio is called audio.mp3, and it is in a folder inside the current folder called media. add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support <audio>. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. multimedia and embedding 2 in this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other feature...
...ry updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. multimedia and embedding 2 in this task we want you to mark up a slightly more complex video player, with multiple sources, subtitles, and other features besides. you need to: add an attribute to make browsers display some default controls. add some appropriate fallback text for browsers that don't support <video>. add multiple sources, containing the paths to the video files. the files are called video.mp4 and video.webm, and are in a folder inside the current folder called media. let the browser know in advance what video formats the sources point to, so it can make an informed choice of which one to download ahead of time. g...

Third-party APIs - Learn web development
your key. changing the type of map there are a number of different types of map that can be shown with the mapquest api. to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-style map. try some other values too. the tilelayer reference page shows the different available options, plus a lot more information. ...
...are a number of different types of map that can be shown with the mapquest api. to do this, find the following line: layers: l.mapquest.tilelayer('map') try changing 'map' to 'hybrid' to show a hybrid-style map. try some other values too. the tilelayer reference page shows the different available options, plus a lot more information. adding 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. you can adjust the position by specifyin...

Adding features to our bouncing balls demo - Learn web development
the evil circle's position on every frame, because we will be moving it in some other way, as you'll see below. inside the if() statements, if the tests return true we don't want to update velx/vely; we want to instead change the value of x/y so the evil circle is bounced back onto the screen slightly. adding or subtracting (as appropriate) the evil circle's size property would make sense. 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. the following code block should be put inside the method definition: let _this = this; window.onkeydown = function(e) { if (e.key === 'a') { _this.x -= _this.velx; } else if (e.key === 'd') { _this.x += _this.velx; } ...
...llide with the evil circle to not exist any more (again, how do you think you'd do that?). bringing the evil circle into the program now we've defined the evil circle, we need to actually make it appear in our scene. to do this, you need to make some changes to the loop() function. first of all, create a new evil circle object instance (specifying the necessary parameters), then call its setcontrols() method. you only need to do these two things once, not on every iteration of the loop. at the point where you loop through every ball and call the draw(), update(), and collisiondetect() functions for each one, make it so that these functions are only called if the current ball exists. call the evil ball instance's draw(), checkbounds(), and collisiondetect() methods on every iteration of the...

Multimedia: video - Learn web development
size. if not, there are online tools, such as ffmpeg (discussed in section below), that encode, decode, convert, and perform other optimization functions. optimize <source> order order video source from smallest to largest. 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. the goal is to offer smaller versions ahead of larger versions. with the smallest version, make sur...
...ing audio is smart. <video autoplay="" loop="" muted="true" playsinline="" id="hero-video"> <source src="banner_video.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="web_banner.mp4" type="video/mp4"> </video> this hero-video code (above) is common to conference websites and corporate home pages. it includes a video that is auto-playing, looping, and muted. there are no controls, so there is no way to hear audio. the audio is often empty, but still present, and still using bandwidth. there is no reason to serve audio with video that is always muted. removing audio can save 20% of the bandwidth. depending on your choice of software, you might be able to remove audio during export and compression. if not, a free utility called ffmpeg can do it for you. this is the ffmpeg ...

Mozilla accessibility architecture
feedback and constructive suggestions are encouraged. 1. intro this document is for people who wish to understand the architecture of mozilla's accessibility api module, which provides support for platform accessibility apis. 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. mozilla supports two accessibility apis: microsoft active accessibility (msaa) on windows and accessibility tool kit (atk) on linux and unix. we do not currently support the carbon accessibility model for apple's os x. please note, the documentation for implementing an msaa server has moved. you may also wish to read gecko info for windows acces...
...not in the dom subtree for a node. this is the case for: nshtmlimageaccessible: in msaa an image accessible can have accessible children if it has an image map. the children are the image map areas, which are in a different part of the dom tree. nshtmlcomboboxaccessible: an html combo box doesn't have a dom node or anonymous content for its s textfield, button or list. 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. that is why we don't need to override these traversal methods for nsxulcomboboxaccessible (<menulist>). nsouterdocaccessible: used for elements such as <iframe>, <browser> and <editor>, which spawn an entire new document, but don't actually have any child nodes in th...

Accessibility information for UI designers and developers
ty. 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. this includes form elements like inputs and select boxes, but also buttons. for form elements, it should be clear what kind of input is expected. placeholders are best avoided for this, as they are often too low in contrast...
...f possible, how to correct it. this is specifically important in these cases: the user input is about legal commitments or financial transactions it updates or removes the user's data in a system when recording tests responses in those cases, ensure users can change submissions, automatically check for errors. or provide an opportunity to review the input before submitting it. use default controls controls that are built into browsers come with a lot of accessibility for free. for example, the select element displays an ideal mobile interface on mobile operating systems like android and ios. on desktop with a keyboard, it lets people type a character, say ‘k’, to jump directly to options starting with ‘k’. it is recommended to use native controls, visibly or under the hood. links...

Accessible Toolkit Checklist
ts implemented by the os with a consistent api for each platform. since the individual widgets predominately come from the operating system, they already implement standard keyboard commands and follow the operating system's visual theme. also, assistive technologies already understand native widgets so it is only necessary to implement microsoft active accessibility (msaa) api support for custom controls. however, be aware that the wrapping layer will introduce accessibility bugs, and thus you will need to test extensively and fill in the holes. 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. for example, lists of checkboxes are implemented in windows ...
...atic text and group boxes msaa support radio groups only the selected radio button is in the tab order the other radio buttons can be selected and focused with up/down arrow. 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. msaa support, including checkbox state and statechange event tab panels ctrl+[shift]+tab or ctrl+pgup/pgdn to switch tabs tabs can be focused, and then left/right arrow to switch first click on a tab switches to it, second click focuses it msaa support. note, you can use the accessible description to expose the current tab pos...

A bird's-eye view of the Mozilla framework
pplications, each of which is organized into three basic layers depicted in figure 1. figure 1. user interface (ui) widgets and services the x window system toolkit defines the termwidget as a pre-defined object that encapsulates both the command actions and data associated with a graphical user interface (gui) control. 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. a xul package consists of a xul description of the ui widget cascading style sheets customizing appearance javascript services implementing the ui behavior a package...
...rogramming interface) for accessing and manipulating the content. an application such as the browser may have one or more open documents accessible via dom apis. when an html, xml, svg or other type of document is loaded, the nglayout engine (also known as gecko) parses the contents into a dom tree, and handles the layout and rendering of the document pages. the nglayout engine also parses xul ui controls into a dom tree and handles rendering of the ui. core services modules such as the nglayout engine comprise the core application services available to other core modules, and xul packages core application modules are implemented as a set of one or more xpcom (cross-platform com) objects. xpcom object model before getting into the details of the ui example, it's helpful to have a basic u...

Configuring Build Options
is is not recommended because it may make the file harder to find. this will also help when troubleshooting because people will want to know which build options you have selected and will assume that you have put them in your mozconfig file. mozconfig contains two types of options: options prefixed with mk_add_options are passed to client.mk. the most important of these is moz_objdir, which controls where your application gets built (also known as the object directory). options prefixed with ac_add_options are passed to configure, and affect the build process. building with an objdir this means that the source code and object files are not intermingled in your directory system and you can build multiple applications (e.g., firefox and thunderbird) from the same source tree. if you do not...
...ain downside of this is that each objdir will take up a significant amount of space on disk. parallel compilation note: the build system automatically makes an intelligent guess for how many cpu cores to use when building. the option below is typically not needed. most modern systems have multiple cores or cpus, and they can be optionally used concurrently to make the build faster. the -j flag controls how many parallel builds will run concurrently. you will see (diminishing) returns up to a value approximately 1.5× to 2.0× the number of cores on your system. mk_add_options moz_make_flags="-j4" if your machine is overheating, you might want to try a lower value, e.g. -j1. choose an application the --enable-application=application flag is used to select an application to build. firefox is...

Security best practices for Firefox front-end engineers
this policy includes all dom apis that take a string and parse it into a dom tree. ...
...this policy includes all dom apis that take a string and parse it into a dom tree. ...

mozbrowserloadend
the browser <iframe> content, expressed as an rgb value. can be used to make the theme of the surrounding ui complement the theme of the currently loaded content, for example. example in this example the mozbrowserloadstart and mozbrowserloadend events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate. 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. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). var browser = document.queryselector("iframe"); browser.addeventlistener('mozbrowserloadend',function(e) { stopreload.textcontent = 'r'; ...
...of the site that has just loaded, to provide a more integrated experience. when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159). ...

CustomizableUI.jsm
the code is more advanced. it can be found summarized at this gist: https://gist.github.com/noitidart/10902477 ...
...the code is more advanced. it can be found summarized at this gist: https://gist.github.com/noitidart/10902477 ...

Using the viewport meta tag to control layout on mobile browsers
mma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators. learn more about viewports in different mobile browsers in a tale of two viewports at quirksmode.org. ...
...the maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out. usage of user-scalable=no can cause accessibility issues to users with visual impairments such as low vision. ...

sslfnc.html
nt to authenticate itself. ssl_require_certificate is a server option that requires a client to authenticate itself (only if ssl_request_certificate is also on). if client does not provide certificate, the connection terminates. default state is a third state similar to on, that provides backward compatibility with older netscape server products. ssl_handshake_as_client controls the behavior of pr_accept,. if this option is off, the pr_accept configures the ssl socket to handshake as a server. if it is on, then pr_accept configures the ssl socket to handshake as a client, even though it accepted the connection as a tcp server. ssl_handshake_as_server controls the behavior of pr_connect. if this option is off, then pr_connect configures the ssl socket to hand...
...tificate-based authentication, tamper detection, or encryption. ssl_request_certificate is a server option that requests a client to authenticate itself. ssl_require_certificate is a server option that requires a client to authenticate itself (only if ssl_request_certificate is also on). if client does not provide certificate, the connection terminates. ssl_handshake_as_client controls the behavior of pr_accept,. if this option is off, the pr_accept configures the ssl socket to handshake as a server. if it is on, then pr_accept configures the ssl socket to handshake as a client, even though it accepted the connection as a tcp server. ssl_handshake_as_server controls the behavior of pr_connect. if this option is off, then pr_connect configures the ssl socket to handshake a...

AT APIs Support
mouse clicks. gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it. gecko based applications gecko can be used in two ways to create application: embedded clients embedded clients use gecko only in the content window, at the moment for html and generic xml only. they typically use standard windows controls for their user interface -- the area outside of the client content window, plus the context menu. on windows platform mfcembed testing client - this is a very simple package, great for testing basic html accessibility with your products and the gecko rendering engine (please contact us for a copy). k-meleon - light, ultra-fast and more advanced (fully configurable) gecko-based web bro...
...op. on mac platform camino - web browser for os x xul applications xul applications make full use of the gecko architecture, not only for html content, but also for the entire user interface. widgets such as menus, tab panels, tree views and dialogs are provided via an xml language called xul (extensible user-interface language). none of the user interface contains standard os controls. this is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). developing a xul window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets. examples of xul applications: firefox - web-browser thunderbird - email client seamon...

Building the WebLock UI
omplicated of the two. if the weblock component is being installed in mozilla or another gecko-based browser, then this third section shows you how to create the entry point in the browser for controlling the web locking. 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). client code overview before we get started on the actual user interface, we should establish how the client code is to access the weblock component and use its interfaces to control the web locking of the browser. first of all, it's important to be able to represent the basic state of the lock as soon as it's loaded. like the secure page icon, the weblock icon that appe...
...;"/> </hbox> this snippet introduces a couple of new general layout widgets in xul. the separator that appears at the top of this snippet creates a little divider between widgets like the kind you see in menus that divide sets of functionality available there. 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. in this case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children vertically). notice also that when it's clicked, the button executes a javascript function called addthissite(), which we've already defined in the weblock.js file in client code overview above. we...

Starting WebLock
derives from nsisupports. xpidl has no way to define multiple inheritance - something that all scriptable objects must deal with. interface iweblock : nsisupports the web locking interface the body of the block (the stuff between the curly braces) defines the methods and attributes of our interface. there are basically two functional sets on this interface. the first section of the interface controls whether or not weblock checks to see if a web page can be loaded. if locked, weblock will prevent sites not on the white list from loading. void lock(); void unlock(); this interface does not enforce any policy with respect to how the user enables or disables this feature. this allows maximum flexibility in the implementation. any place in the application can acquire this interface via the...
...rite the implementation code that will actually carry out the web locking functionality. the weblock component implements three interfaces: nsisupports nsiobserver iweblock nsisupports is the base interface that all xpcom objects must implement. the nsiobserver interface is for listening to various events that gecko generates. finally, the iweblock interface is the interface that actually controls the web locking functionality. the first two have already been implemented as part of the generic module code. recall from using xpcom utilities to make things easier that implementing these basic interfaces can be easy and straightforward if you use the macros and other utilities that xpcom provides. declaration macros the class declaration for the weblock class that implements these three int...

NS_ConvertASCIItoUTF16
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

NS_ConvertUTF16toUTF8
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

NS_ConvertUTF8toUTF16
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

NS_LossyConvertUTF16toASCII
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsAdoptingCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsAdoptingString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsAutoString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsCAutoString
e, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...rameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsDependentCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsDependentString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsFixedCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsFixedString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsPromiseFlatCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsPromiseFlatString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsXPIDLCString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

nsXPIDLString
equotes -- if true, causes surrounding quotes to be ignored @return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...
...return this parameters char* aset prbool aeliminateleading prbool aeliminatetrailing prbool aignorequotes compresswhitespace void compresswhitespace(prbool, prbool) - source this method strips whitespace from string. you can control whether whitespace is yanked from start and end of string as well. ...

IAccessibleText
ted text(). provided for use by the ::ia2_event_text_inserted and ::ia2_event_text_updated event handlers. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. 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. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers...
...dtext() returns any removed text(). provided for use by the ia2_event_text_removed/updated event handlers. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. 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. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers...

nsINavHistoryQuery
ost). when domainishost, domain only does exact matching on host names. otherwise, it will return anything whose host name ends in domain. this one is a little different than most. setting it to an empty string is a real query and will match any uri that has no host name (local files and such). set this to null (in c++ use setisvoid) if you don't want domain matching. domainishost boolean this controls the meaning of domain, and whether it is an exact match domainishost = true, or hierarchical (= false). endtime prtime end time range for results (inclusive). endtimereference long one of the constants time_relative_* which indicates how to interpret the corresponding end time value. foldercount long read only: count of folders. hasannotation boolean read only: whether or not, annotation ...
...method nsinavhistoryservice.executequeries(). tagsarenot boolean if true, the results include only items that are not tagged with the specified tags. if false, only tags in the tags list are included in the results. uri nsiuri this is a uri to match, to, for example, find out every time you visited a given uri. use uriisprefix to control whether this is an exact match. uriisprefix boolean controls the interpretation of uri. when unset (default), the uri will request an exact match of the specified uri. when set, any history entry beginning in uri will match. for example http://bar.com/foo will match http://bar.com/foo as well as http://bar.com/foo/baz.gif. constants constant value description time_relative_epoch 0 default value. the time is relative to jan 1 1970 gmt, (this is a no...

Plug-in Basics - Plugins
ange. the basic operations of the browser, such as navigation, history, and opening files, apply to all pages, regardless of the plug-ins in use. using the object element for plug-in display the <object> element is part of the html specification for generic inclusion of special media in a web page. it embeds a variety of object types in an html page, including plug-ins, java components, activex controls, applets, and images. object element attributes determine the type of object to embed, the type and location of the object's implementation (code), and the type and implementation of the object's data. plug-ins were originally designed to work with the embed element rather than the object element (see using the embed element for plug-in display), but the object element itself provides some flexi...
...ween its opening and closing tags. so, for example, though gecko does not support the classid attribute of the object element - which was used for java classes and activex plug-ins embedded in pages - object elements can be nested to support different plug-in implementations. 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. the following examples demonstrate this use of nested object elements with markup more congenial to gecko included as children of the parent object element. example 1: nesting object elements <html> <head> <title>example 1: nesting object elements</title> <style type="text/css"> .myplugin { width: 470px; height: 231px; }...

Network request details - Firefox Developer Tools
the request is to a site that is associated with a known tracker, an icon and a message are shown; otherwise, this field is not shown. response headers the response headers section shows details about the response. for each line in the response headers section, a question mark links to the documentation for that response header, if one is available. a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. note that the keys in the response header are all in lowercase, while the request headers keys are not. http/2 requires that all headers be lowercase; response headers are shown as they are received from the server. (there may be some exceptions, such as x-firefox-spdy, which is added by firefox.) you can copy som...
...: "user-agent", "value": "mozilla/5.0 (windows nt 10.0; win64; x64; rv:68.0) gecko/20100101 firefox/68.0" } ] } } request headers the request headers section shows details about the request headers. for each line in the request headers section, a question mark links to the documentation for that request header, if one is available. a raw toggle button in the section heading controls whether the headers are shown with formatting, or as plain, unformatted text. cookies tab this tab lists full details of any cookies sent with the request or response: as with headers, you can filter the list of cookies displayed. the full list of cookie attributes is shown—see the following screenshot showing response cookies with further attributes shown. the samesite attribute has ...

Toolbox - Firefox Developer Tools
underneath: note: since firefox 62, you can drag and drop tabs in the main toolbar of the toolbox to reorder your tools as you wish (bug 1226272). docking mode by default, the toolbox appears docked to the bottom of the browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the toolbar. toolbar the toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window. node picker on the far left there's a button to activate the node picker. this lets you select a page element for inspection. see "selecting elements". toolbox-hosted tools then there is an array of labeled buttons which enables you to switch between the different tools hosted by the toolbox. the array may inc...
... main pane the content of the main pane in the w...

AudioContext.createMediaStreamSource() - Web APIs
in this example, we grab a media (audio + video) stream from navigator.getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode. next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. 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! note: you can see this example running live, or view the source. var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - ...
... specifications specification status comment web audio apithe definition of 'audiocontext.createmediastreamsource()' in that specification. working draft ...

CSSStyleDeclaration.setProperty() - Web APIs
o the selector .box p, which indicates it is the one we want. if so, we store a reference to this cssstylerule object in a variable. we then use three functions to generate random values for the properties in question, and update the rule with these values. ...
...r', 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-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: bold; font-size: 40px; height: 150px; line-height: 150px; backgroun...

Document: DOMContentLoaded event - Web APIs
aded may fire before your script has a chance to run, so it is wise to check before adding a listener. ...
...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-area: log; } .event-log-contents { resize: none; } label, button { display: block; } #reload { height: 2rem; } js const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.

Document.execCommand() - Web APIs
itable text regions. see differences in markup generation for more details. delete deletes the current selection. enableabsolutepositioneditor enables or disables the grabber that allows absolutely-positioned elements to be moved around. the grabber is disabled by default since firefox 64 (bug 1490641). enableinlinetableediting enables or disables the table row/column insertion and deletion controls. the controls are disabled by default since firefox 64 (bug 1490641). enableobjectresizing enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects. the handles are disabled by default since firefox 64 (bug 1490641). fontname changes the font name for the selection or at the insertion point. this requires a font name string (like...
...not supported by internet explorer.) increasefontsize adds a <big> tag around the selection or at the insertion point. (not supported by internet explorer.) indent indents the line containing the selection or insertion point. in firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented. insertbronreturn controls whether the enter key inserts a <br> element, or splits the current block element into two. (not supported by internet explorer.) inserthorizontalrule inserts a <hr> element at the insertion point, or replaces the selection with it. inserthtml inserts an html string at the insertion point (deletes selection). requires a valid html string as a value argument. (not supported by internet explore...

Document: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a document has changed. ...
...face 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 const log = document.queryselector('.event-log-contents'); const reload = document.queryselector('#reload'); reload.addeventlistener('click', () => { log.

Element: error event - Web APIs
used. for example, if a script has an execution error or an image can't be found or is invalid. bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
...r an event instance otherwise. ...

Element.onfullscreenchange - Web APIs
out of full-screen mode. example this example establishes a fullscreenchange event handler, handlefullscreenchange(). this function determines which element it was called on by checking the value of event.target, then compares the document's fullscreenelement value to the element to see if they're the same node. 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. function togglefullscreen() { let elem = document.queryselector("video"); elem.onfullscreenchange = handlefullscreenchange; if (!document.fullscreenelement) { elem.requestfullscreen().then({}).catch(err =>...
... living standard initial definition. ...

Gamepad.mapping - Web APIs
syntax readonly attribute domstring mapping; example var gp = navigator.getgamepads()[0]; console.log(gp.mapping); value a string. ...
... syntax readonly attribute domstring mapping; example var gp = navigator.getgamepads()[0]; console.log(gp.mapping); value a string. ...

Gamepad - Web APIs
l gamepad or other controller, allowing access to information such as button presses, axis positions, and id. a gamepad object can be returned in one of two ways: via the gamepad property of the gamepadconnected and gamepaddisconnected events, or by grabbing any position in the array returned by the navigator.getgamepads() method. properties gamepad.axes read only an array representing the controls with axes present on the device (e.g. analog thumb sticks). gamepad.buttons read only an array of gamepadbutton objects representing the buttons present on the device. gamepad.connected read only a boolean indicating whether the gamepad is still connected to the system. gamepad.id read only a domstring containing identifying information about the controller. gamepad.index read only an...
...nected read only a boolean indicating whether the gamepad is still connected to the system. gamepad.id read only a domstring containing identifying information about the controller. gamepad.index read only an integer that is auto-incremented to be unique for each device currently connected to the system. gamepad.mapping read only a string indicating whether the browser has remapped the controls on the device to a known layout. gamepad.timestamp read only a domhighrestimestamp representing the last time the data for this gamepad was updated. experimental extensions to gamepad the following interfaces are defined in the gamepad extensions specification, and provide access to experimental features like haptic feedback and webvr controller pose information. gamepad.hand read only ...

Gamepad API - Web APIs
the gamepad api is a way for developers to access and respond to signals from gamepads and other game controllers in a simple, consistent way. 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. interfaces gamepad represents a gamepad/controller connected to the computer. gamepadbutton represents a button on one of the connected controllers. gamepadevent the event object representing events fired that are related to gamepads. experimental gamepad extensions gamepadhapticactuator represents hardware in the controller designed to provide haptic feedback to the user (if available), mos...
... one for each connected gamepad. window events window.ongamepadconnected represents an event handler that will run when a gamepad is connected (when the gamepadconnected event fires). window.ongamepaddisconnected represents an event handler that will run when a gamepad is disconnected (when the gamepaddisconnected event fires). 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. gamepadthe definition of 'the gamepad api specification' in that specification. working draft initial definition ...

msAudioCategory - Web APIs
r every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the msaudiocategory property of the html <audio> element, is a read/write proprietary attribute, specific to internet explorer and microsoft edge. msaudiocategory specifies the purpose of the audio or video media, such as background audio or alerts. 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. note that you must set the msaudiocategory before setting the src property in code. value include a description of the property's value, including data type and what it represents. value description bac...
...no if msaudiodevicetype is not explicitly set, msaudiodevicetype will be set to communications. for hardware audio offload to be automatically applied, the audio category must be set to foregroundonlymedia or backgroundcapablemedia. hardware audio offload optimizes audio rendering which can improve functionality and battery life. example <audio msaudiocategory="backgroundcapablemedia" controls="controls"> <source src="song.mp3"/> </audio> ...

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. this includes both elements that are descendents of the <form> element as well as elements that are made members of the form using their form property. ...
...ormelement.elements and htmlformelement.length are the following: <button> <fieldset> <input> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <output> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms. 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. example if (document.getelementbyid('form1').length > 1) { // more than one form control here } specifications specification status comment html living standardth...

HTMLImageElement.complete - Web APIs
want to check to ensure this is the case. so the fixredeyecommand() function, which is called by the button that triggers red-eye removal, checks the value of the lightbox image's complete property before attempting to do its work. this is demonstrated in the code below. ...
...et 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.disabled = false; } /* ... */ function fixredeyecommand() { if (lightboxelem.style.display === "block" && lightboximgelem.complete) { fixredeye(lightboximgelem); } else { /* can't start doing this until the image is fully loaded */ } } specifications specification status comment html living standardthe definition of 'htmlimageelement.complete' in...

Key Values - Web APIs
or antenna receiption). keycode_tv_terrestrial_digital (236) "tvtimer" timer programming button. keycode_tv_timer_programming (258) [1] firefox added proper support for the "tv" key in firefox 37; before that, this key generated the key code "live". [2] these keys were "unidentified" until firefox 37. 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-201...
...e 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. those keys' values will match what's documented in those tables. keyboardevent.key value description virtual keycode windows mac linux android "avrinput" [3] changes the input mode on an external audio/video receiver (avr) unit. ...

MediaRecorder: dataavailable event - Web APIs
ails of the all the possible reasons this event may raise, see the documentation for the event handler property: ondataavailable. examples using addeventlistener to listen for dataavailable events: ... 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); }); ... the same, but using the ondataavailable event handler property: ... var chunks = []; mediarecorder.onstop...
... = audiourl; console.log("recorder stopped"); }); mediarecorder.addeventlistener('dataavailable', (event) => { chunks.push(event.data); }); ... the same, but using the ondataavailable event handler property: ... 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); } ... specifications specification status mediastream recording working draft ...

MediaStreamAudioSourceNode - Web APIs
in this example, we grab a media (audio + video) stream from navigator.getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode. next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. 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! note: you can see this example running live, or view the source. var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - ...
... specification specification status comment web audio apithe definition of 'mediastreamaudiosourcenode' in that specification. working draft ...

MediaStreamConstraints.audio - Web APIs
mples on how to configure this. using a boolean value in this example, we provide a simple value of true for the audio property. this tells getusermedia() that we require an audio track, but we don't care about any specifics beyond that. ...
...ches the resulting stream to an <audio> element once the stream is returned. ...

MediaStreamTrackAudioSourceNode - Web APIs
in this example, we grab a media (audio + video) stream from navigator.getusermedia, feed the media into a <video> element to play then mute the audio, but then also feed the audio into a mediastreamaudiosourcenode. next, we feed this source audio into a low pass biquadfilternode (which effectively serves as a bass booster), then a audiodestinationnode. 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! note: you can see this example running live, or view the source. var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('input'); // getusermedia block - ...
... specification specification status comment web audio apithe definition of 'mediastreamtrackaudiosourcenode' in that specification. working draft ...

Media Session API - Web APIs
the aim of this is allowing users to know what's playing, and to control it, without opening the specific page that launched it. ...
...ile devices and require a user gesture to start media. the following example adds a pointerup event to an on-page play button, which is then used to kick off the media session code: playbutton.addeventlistener('pointerup', function(event) { var audio = document.queryselector('audio'); // user interacted with the page. let's play audio... audio.play() .then(_ => { /* set up media session controls, as shown above. */ }) .catch(error => { console.log(error) }); }); specifications specification status comment media session standard draft initial definition. ...

VTTCue - Web APIs
constructor vttcue(starttime, endtime, text) returns a newly created vttcue object that covers the given time range and has the given text. param starttime the time, in seconds and fractions of a second, that describes the beginning of the range of the media data to which the cue applies. endtime the time, in seconds and fractions of a second, that describes the end of the range of the media data to which the cue applies. ...
...chored to. the default is auto. vttcue.size returns a double representing the size of the cue, as a percentage of the video size. vttcue.textalign returns an enum representing the alignment of all the lines of text within the cue box. vttcue.text returns a domstring with the contents of the cue. methods getcueashtml() returns the cue text as a documentfragment. ...

WebXR Device API - Web APIs
nt reality by capturing the world with a camera and augment that scene with computer-generated imagery. 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. each of these two images is rendered into a single framebuffer, with the left eye's rende...
... process user inputs from those devices. targeting and hit detection how to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks. 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. performance and security webxr...

Window: error event - Web APIs
resource failed to load or couldn't be used — for example if a script has an execution error. bubbles no cancelable no interface event or uievent event handler property onerror the event object is a uievent instance if it was generated from a user interface element, or an event instance otherwise. ...
... event instance otherwise. ...

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...
...proin ac ante a felis ornare vehicula. fusce pellentesque l...

ARIA: article role - Accessibility
the article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a website. it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page. <div role="article"> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </div> <div role="article"> ... </div> this example shows two articles side by side on one page that could be structured similarly and are related. instead of a div with an article role, use the <article> element. always use native element if available. instead of using role="article", the <article> element can be used. <article> <h2>heading of the segment</h...
...iv> this example shows two articles side by side on one page that could be structured similarly and are related. instead of a div with an article role, use the <article> element. always use native element if available. instead of using role="article", the <article> element can be used. <article> <h2>heading of the segment</h2> <p>paragraph for the segment.</p> <p>another paragraph.</p> ... controls to interact with the article, share it, etc. ... </article> <article> ... </article> description the article role denotes a section of a document, page, or site that, if it were standing on its own, could be viewed as a complete document, page or site. the aim of a set of article sections is to indicate their relationship to one another. articles are not considered a navigational landmark, bu...

ARIA: document role - Accessibility
to switch context to a reading mode: the document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element. <div role="dialog"> ... <div id="infotext" role="document" tabindex="0"> <p>some informational text goes here.</p> </div> ... <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. description by default, web pages are treated as documents; assistive technologies (at) enter browse or read mode when entering a new web page. this mode can be altered through various roles, including the widget and application roles. the document role brings the at back into browse or re...
...widget or application that should be read as static rich text. adding role="document" and tabindex="0" to the element containing the text within a widget enables the screen reader user to press the tab key to place focus on the document element and read the text with the screen reader's reading cursor. 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. in contrast to the article role, the document role does not have any relation to other elements with a document role, it merely has a relationship to the containing composit widget. an article can have associated articles. associated wai-aria ...

ARIA: form role - Accessibility
the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form. <div role="form" id="contact-info" aria-label="contact information"> <!-- form content --> </div> this is a form that collects and saves a user's contact information. important: use an html <form> element to contain your form controls, rather than the aria form role, unless you have a very good reason. the html <form> element is sufficient to tell assistive technologies that there is a form. description a form landmark identifies a region of content that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search). using the <form> element will automatically co...
...pose of the form. this label should be visible to all users, not just assistive technology users. use the search landmark instead of the form landmark when the form is used for search functionality. use the role="form" to identify a region of the page; do not use it to identify every form field. 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. keyboard interactions no role specific keyboard interactions required javascript features onsubmit the onsubmit event handler handles the event raised when the form is submitted. anything that is not a <form> cannot be submitted, therefore you would have to us...

Accessibility documentation index - Accessibility
for example — that you want to put some accessible error checking into. examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname. 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. 11 multipart labels: using aria for labels with embedded fields inside them aria, accessibility, ben millard, firefox, guide, help, html, html 4, jaws, needscontent, aria-labelledby, label, solution, trouble shoot, troubleshoot the solution is in an aria attribute called aria-labelledby. its parameter is a string that consis...
...cell, table the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row. 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. 58 aria: contentinfo role aria, aria role, reference, role-contentinfo the contentinfo landmark role is used to identify information repeated at the end of every page of a website, including copyright information, navigation links, and priv...

Mobile accessibility checklist - Accessibility
exclusively to handle visibility. everything other than the currently visible screen must be truly invisible (especially relevant for single page apps with multiple cards): use the hidden attribute or visibility or display style properties. unless absolutely unavoidable, aria-hidden attribute should not be used. 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. focus should be handled in a logical order and consistent manner. text equivalents text equivalent must be provided for every non-strictly presentational non-text element within the app. use alt and tit...
...bute for a good guide.) if the above attributes are not applicable, use appropriate aria states and properties such as aria-label, aria-labelledby, or aria-describedby. images of text must be avoided. all user interface components with visible text (or image of text) as labels must have the same text available in the programmatic name of the component. wcag 2.1: label in name. all form controls must have labels (<label> elements) for the benefit of screen reader users. handling state standard controls such as radio buttons and checkboxes are handled by the operating system. however, for other custom controls state changes must be provided via aria states such as aria-checked, aria-disabled, aria-selected, aria-expanded, and aria-pressed. orientation content should not be restr...

Understandable - Accessibility
l style and positioning should be consistent between different pages or views of a web page, and the existing items should appear in the same order, even if for example new iteam are added. if the user has initiated a change, e.g. choosing a different color scheme or position for the navigation, their choice should be respected across all pages. again, sensible design — make the navigation controls the same across all pages or views. see page layouts for information on modern markup for layouts. see also styling links as buttons for a useful accessible navigation menu example. 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. a currency converter appearing...
...rmation in text content, or html form labels. see meaningful text labels for more information. 3.2.5 change on request (aaa) changes in context that could possibly confuse or disorient users should only occur only when requested by the user, or the user should be able to turn them off. if you need to have something that significantly changes the current view (e.g. content or controls), let the user control when they want that change to occur (e.g. what page to show, when to advance to the next photo in the gallery...) if you need to have something like a carousel on a page, provide an option to stop it automatically advancing. better to avoid such functionality if possible. note: also see the wcag description for guideline 3.2 predictable: make web pages ...

:focus-visible - CSS: Cascading Style Sheets
de a different focus indicator based on the user’s input modality (mouse vs. keyboard). note that firefox supports similar functionality through an older, prefixed pseudo-class — :-moz-focusring. syntax :focus-visible examples basic example in this example, the :focus-visible selector uses the ua's behavior to determine when to match. compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. note the difference in behavior from elements styled with :focus. <input value="default styles"><br> <button>default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visib...
...e only</button> input, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible-only:focus-visible { outline: 4px dashed darkorange; } selectively showing the focus indicator a custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus. this matches the native focus behavior for controls like <button>. <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for browsers ...

:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as input or textarea) that is not editable by the user. 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. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the othe...
...e editable <textarea>. 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. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { bac...

:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as input or textarea) that is editable by the user. 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. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the oth...
... editable <textarea>. 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. <p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-...

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

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
lly. we use justify-content to align the item on the main axis, which in this case the inline axis running horizontally. you can take a look at the code of this example below. change the size of the container or nested element and the nested element always remains centered. properties that control alignment the properties we will look at in this guide are as follows. 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. align-content — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis. we will also discover how auto margins can be used for alignment in flexbox. n...
...ome flex items arranged in a row. they will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. if your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item. the reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch. we can use other values to control how the items align: align-items: flex-start align-items: flex-end align-items: center align-items: stretch align-items: baseline in the live example below, the value of align-items is stretch. try the other values and see how all of the items align against each other in the flex container. aligning o...

Basic concepts of flexbox - CSS: Cascading Style Sheets
capabilities. this article gives an outline of the main features of flexbox, which we will be exploring in more detail in the rest of these guides. when we describe flexbox as being one dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together. the two axes of flexbox when working with flexbox you need to think in terms of two axes — the main axis and the cross axis. the main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset. the main axis the main...
...d to distribute space in proportion. if we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total). 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. if we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. as with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower va...

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
values: nowrap (default) | wrap | wrap-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-wrap-property @mixin flex-wrap($value: nowrap) { // no webkit/ff box fallback. -webkit-flex-wrap: $value; @if $value == nowra...
...the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. values: row (default) | nowrap spec: https://drafts.csswg.org/css-flexbox/#flex-flow-property @mixin flex-flow($values: (row nowrap)) { // no webkit/ff box fallback. -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. value: any integer (0 is the default) spec: https://drafts.csswg.org/css-flexbox/#order-property @mixin order($int: 0) { -webkit-box-ordinal-group: $int + 1; -moz-box-ordinal-group: $int + 1; -webkit-order: $int; -ms-flex-order: $int; order: $int; } flexbox grow the flex-grow...

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
e inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line. the block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. the css writing-mode property controls the block flow direction. if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well. while certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, such as running a h...
...isplay type would be flow, it will get a computed display type of flow-root. this is shown in the next example where the box which displays as horizontal-tb contains a float which is contained due to its parent establishing a new bfc. replaced elements replaced elements such as images will not change their orientation based on the writing-mode property. however, replaced elements such as form controls which include text, should match the writing mode in use. logical properties and values once you are working in writing modes other than horizontal-tb many of the properties and values that are mapped to the physical dimensions of the screen seem strange. for example, if you give a box a width of 100px, in horizontal-tb that would control the size in the inline direction. in vertical-lr it co...

Web Audio playbackRate explained - Developer guides
reateelement('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice. ...
...bute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice. ...

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. /* uncomment this css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute. depending on the operating system, mouse users can hold the ctrl, command, or shift key...
...ecifications specification status comment html living standardthe definition of 'multiple attribute' in that specification. living standard html5the definition of 'multiple attribute' in that specification. recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other relevant information. when using the multiple attribute, inform the user that multiple values are allowed and provide directions on how to provide multiple values, such as "separate email addresses with a comma." setting size="1" on a multiple select can make it appear as a single select in some browsers, but then it doesn't expa...

HTML attribute: readonly - HTML: Hypertext Markup Language
nt to <select> or input types that are already not mutable, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. 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. when an input has the readonly attribute, the :read-only pseudo-class also applies to it. conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write...
...stinction between being read-only and being disabled, so the readonly attribute does not apply. when an input has the readonly attribute, the :read-only pseudo-class also applies to it. conversely, inputs that support the readonly attribute but don't have the attribute set match the :read-write pseudo-class. 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. because a read-only field cannot have it's value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified. the only way to modify dynamically ...

<form> - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it is possible to use the :valid and :invalid css pseudo-classes to style a <form> element based on whether or not the elements inside the form are valid. content categories flow content, palpable content permitted content flow content, but not containing <form> elements tag omission none, both the starting and ending tag are mandatory. ...
...e the accept attribute on <input type=file> elements. accept-charset space-separated character encodings the server accepts. the browser uses them in the order in which they are listed. the default value means the same encoding as the page. (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. autocapitalize attributes on a form elements override it on <form>. possible values: none: no automatic capitalization. sentences (default): capitalize the first letter of each sentence. words: capitalize the first letter of each word. characters: capitalize all characters — that is, uppercase. autocomplete indicates...

<input type="checkbox"> - HTML: Hypertext Markup Language
ke to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: radio buttons are similar to checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas checkboxes allow you to turn single values on and off. where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected. value a domstring representing the value of the checkbox. events change and input supported common attributes checked idl attributes checked, indeterminate and value methods select() value a domstring represen...
...eckbox is currently toggled on checked a boolean attribute indicating whether or not this checkbox is checked by default (when the page loads). it does not indicate whether this checkbox is currently checked: if the checkbox’s state is changed, this content attribute does not reflect the change. (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. if it is, then the value of the checkbox's value attribute is reported as the input's value. unlike other browsers, firefox by default persists the dynamic checked state of an <input> across page loads. use the autocomplete attribute to control this feature. indeterminate if the indeterminate attr...

<input type="date"> - HTML: Hypertext Markup Language
ike with data that is badly-formatted, too large, of the wrong type, etc. handling browser support as mentioned, the major problem with date inputs at the time of writing is browser support. 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. the second problem is the more serious one; with date input supported, the value is normalized to the format yyyy-mm-dd. but with a text input, the browser has no recognition of what format the date should be in, and there are many different formats in which people write dates. for example: ddmmyyyy dd/mm/yyyy mm/dd/yyyy dd-mm-yyyy mm-dd-yyyy month dd, y...
...ng invalid dates, or incorrect formats. so we still have a problem. 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. examples in this example, we create 2 sets of ui elements for choosing dates: a native <input type="date"> picker and a set of 3 <select> elements for older browsers that don't support the native date input. html the html looks like so: <form> <div class="nativedatepicker"> <label for="bday">enter your birthday:</label> ...

<input type="radio"> - HTML: Hypertext Markup Language
pull request. they are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below. note: checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas checkboxes let you turn individual values on and off. where multiple controls exist, radio buttons allow one to be selected out of them all, whereas checkboxes allow multiple values to be selected. value a domstring representing the value of the radio button. events change and input supported common attributes checked and value idl attributes checked and value methods select() value the value attribute i...
...-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some browsers). by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. here we've used a border along with border-radius and a transition to create a nice animating radio selection. notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected. compatibility note: if you wish to use the appear...

<input type="time"> - HTML: Hypertext Markup Language
pull request. appearance chrome and opera in chrome/opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. in some versions, an "x" button is provided to clear the control's value. 12-hour 24-hour chrome 83 in chrome 83, the ui controls have been updated with a new look and feel. the new element is functionally identical to the old one, but has a similar ui to edge. 24-hour firefox firefox's time control is very similar to chrome's, except that it doesn't have the up and down arrows. it also uses a 12- or 24-hour format for inputting times, based on system locale. an "x" button is provided to clear the control's value. 12...
... examples in this example, we create two sets of interface elements for choosing times: a native picker created with <input type="time">, and a set of two <select> elements for choosing hours/minutes in older browsers that don't support the native input. the html looks ...

<input type="week"> - HTML: Hypertext Markup Language
ed data is submitted (or data which is too large, of the wrong type, and so forth). handling browser support as mentioned above, the major problem with using week inputs right now is browser support: safari and firefox don't support it on desktop, and old versions of ie don't support it. 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. for example, the week picker on chrome for android looks like this: non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling. the second problem is the more serious. as mentioned earlier...
...eneric text input, there's nothing to guide the user toward correctly formatting the input (and it's certainly not intuitive). there are multiple ways in which people could write week values; for example: week 1 2017 jan 2-8 2017 2017-w01 etc. 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. examples in this example we create two sets of ui elements for choosing weeks: a native picker created using <input type="week">, and a set of two <select> elements for choosing weeks/years in older browsers that don't support the week input type. the html looks like so: <for...

Standard metadata names - HTML: Hypertext Markup Language
t define an application-name. author: the name of the document's author. description: a short and accurate summary of the content of the page. several browsers, like firefox and opera, use this as the default description of bookmarked pages. generator: the identifier of the software that generated the page. keywords: words relevant to the page's content separated by commas. 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. origin send the origin of the document. no-referrer-when-downgrade send the full url when the destination is at least as secure as the current page (http(s)→https...
...metadata names defined in other specifications the css color adjustment specification defines the following metadata name: color-scheme: specifies one or more color schemes with which the document is compatible. 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. the primary use for <meta name="color-scheme"> is to indicate compatibility with—and order of preference for—light and dark color modes. the value of the content property for color-scheme may be one of the following: normal the document is unaware of color schemes and should simply be rendered using the default color palette. [light | dark]+ one or more colo...

<output>: The Output element - HTML: Hypertext Markup Language
n the form.elements api. the <output> value, name, and contents are not submitted during form submission. examples in the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. 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. <form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region. assistive technology will thereby announce the results of ui interactio...
...> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region. 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. specifications specification status comment html living standardthe definition of '<output>' in that specification. living standard html5the definition of '<output>' in that specification. recommendation ...

<source>: The Media or Image Source element - HTML: Hypertext Markup Language
is example demonstrates how to offer a video in ogg format for users whose browsers support ogg format, and a quicktime format video for users whose browsers support that. if the audio or video element is not supported by the browser, a notice is displayed instead. ...
... by the browser, a notice is displayed instead. 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. be sure to reference our guide to media types and formats on the web for details on what media file formats you can use and how well they're supported by browsers. <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. </video> for more examples, the learning area article video and audio content is a great resource. picture example in this example, two <source> elements are included within the <picture>, providing versio...

Feature Policy - HTTP
the feature-policy header has now been renamed to permissions-policy in the spec, and this article will eventually be updated to reflect that change. in a nutshell feature policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your website. ...
...rectives. a policy directive is a combination of a defined feature name, and an allowlist of origins that can use the feature. specifying your policy feature policy provides two ways to specify policies to control features: the feature-policy http header. the allow attribute on iframes. 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. for more details see using feature policy. inferring the policy scripts can programatically query information about the feature policy via the featurepolicy object located at either document.featurepolicy or htmliframeelement.featurepolicy. types of policy-controlled features tho...

MathML attribute reference - MathML
linebreak <mo>, <mspace> unimplemented linebreakmultchar <mo>, <mspace> unimplemented linebreakstyle <mo>, <mspace> unimplemented lineleading <mo>, <mspace> linethickness <mfrac> the thickness of the horizontal fraction line. unimplemented location <mscarries> unimplemented longdivstyle <mlongdiv> controls the style of the long division layout. lspace <mo>, <mpadded> the amount of space before the operator (see length for values and units). lquote <ms> the opening quote character (depends on dir) to enclose the content. the default value is "&quot;". mathbackground all the background color. you can use #rgb, #rrggbb and html color names. mathcol...
...spacing <mtable> specifies the space between table rows. rowspan <mtd> a non-negative integer value that indicates on how many rows does the cell extend. rspace <mo> the amount of space after the operator. rquote <ms> the closing quote mark (depends on dir) to enclose the content. the default value is "&quot;". scriptlevel <mstyle> controls mostly the font-size. the higher the scriptlevel, the smaller the font size. scriptminsize <mstyle> specifies a minimum font size allowed due to changes in scriptlevel. scriptsizemultiplier <mstyle> specifies the multiplier to be used to adjust font size due to changes in scriptlevel. selection <maction> the child element which is addressed by the acti...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
blique; animatable: yes font-variant it specifies whether a font should be used with some of their variation such as small caps or ligatures. value: see css font-variant; animatable: yes font-weight it specifies the weight (or boldness) of the font. 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|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how to make speed vs. quality tradeoffs as it perfor...
...ue: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. value: auto|optimizequality|optimizespeed; animatable: yes kerning deprecated since svg 2 it indicates whether the browser should adjust inter-glyph spacing. value: auto|<length>|inherit; animatable: yes letter-spacing it controls spacing between text characters. value: normal|<length>|inherit; animatable: yes lighting-color it defines the color of the light source for filter primitives elements <fediffuselighting> and <fespecularlighting>. value: <color>; animatable: yes marker-end it defines the arrowhead or polymarker that will be drawn at the final vertex of the given <path> element or basic shape. value: <funci...

textLength - SVG: Scalable Vector Graphics
e animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or percentage. <number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16px "open sans", "arial", sans-serif; } svg let's start with the svg. it's pretty basic, with a 1000-by-300 pixel space mapped into a 10 centimeter by 3 centimeter box. <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="...
...t id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world! </text> </svg> first, a <rect> element is used to create and stroke a rectangle to contain the text. then <text> is used to create the text element itself, with an id of "hello". html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text. a <span> element of id "widthdisplay" is provided to display the current width value. javascript finally, let's have a look at the javascript code. it starts by ...

Information Security Basics - Web security
articles can help you learn what you need to know. with this information, you can be aware of the role and importance of security throughout the web development cycle and beyond into deployment of your content. ...
...h this information, you can be aware of the role and importance of security throughout the web development cycle and beyond into deployment of your content. ...

page-mod - Archive of obsolete content
ore modifications, call its destroy() method. the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings. contentstylefile lists stylesheets to attach, supplied in separate files. contentscriptoptions defines read-only values accessible to content scripts. 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. exclude has the same syntax as include, but specifies the urls to which content scripts should not be attached,...

page-worker - Archive of obsolete content
ge() constructor. globals constructors page(options) creates an uninitialized page worker instance. parameters options : object optional options: name type contenturl string the url of the content to load in the panel. allow object an object with keys to configure the permissions on the page worker. the boolean key script controls if scripts from the page are allowed to run. script defaults to true. include string, regexp, array of (string or regexp) this is useful when your page worker loads a page which will redirect to other pages. a match pattern string or an array of match pattern strings. these define the documents to which the page-worker's content worker applies.

ui/toolbar - Archive of obsolete content
a fixed size, and appears in a fixed location usage creating and destroying toolbars you don't specify toolbar content directly: instead, you create other ui components and supply them to the toolbar constructor. ...

Extension Etiquette - Archive of obsolete content
for html elements created by the cool beans extension, for instance, might all be prefixed with cool-beans-. global variables might all be defined as properties of the coolbeans object. some namespaces have specific conflict prevention conventions, which should be followed as appropriate. 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. generic prefixes such as myextension-, or short prefixes such as ffx-, are likely to be used elsewhere, and therefore unsuitable to the purpose. call .noconflict(true) where applicable many common libraries which create...

Inline options - Archive of obsolete content
browse button and label string directory browse button and label string menulist menulist dependent on the menu item values radio radio buttons dependent on the radio values control button no pref stored the pref attribute should have the full name of the preference to be stored. the title attribute is used as a label for the controls. to set a description, either use the desc attribute, or a text node as a child of the <setting> tag. settings are tied to actual preferences, except the button setting, which is designed more for actions. some examples: <!-- boolean examples --> <setting pref="extensions.myaddon.bool1" type="bool" title="boolean 1"/> <setting pref="extensions.myaddon.bool2" type="bool" title="boolean 2"> de...

Chapter 1: Introduction to Extensions - Archive of obsolete content
3 hacks (o'reilly japan, 2008.) introduction if you're reading this guide, you’ve probably used firefox before. perhaps the first time you looked at firefox, you may have been surprised to see that it has a much simpler structure than other full-featured browsers, such as opera or safari. what features are considered standard for web browsers these days? 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. but we didn't set out to create an all-in-one browser that can satisfy everyone. instead, firefox can support these features through extensions. the core browser is limited to basic features, so it’s something that a beginner can be c...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
w our recommendations, then you shouldn't have many problems making your toolbar compatible with the customize toolbars dialog. the dialog can be opened from view > toolbars > customize..., or by right-clicking on the main toolbar (or any toolbar with the correct context attribute value) and clicking on the customize option. other than what we have stated before, you should take into account the controls at the bottom of the customize toolbars dialog. you should test your toolbar buttons and items under all combinations of icons / icons and text / text, use small icons, and having your icons in different toolbars. you should also test that the reset to defaults button works correctly. adding elements to your toolbar that are not toolbarbutton or toolbaritem will cause it to fail. make sure your i...

Adding sidebars - Archive of obsolete content
you're probably familiar with the bookmarks and history sidebars. if not, you can open either one from the view > sidebar menu. they also have shortcuts to open or close them using the keyboard. ...

Custom XUL Elements with XBL - Archive of obsolete content
ncept: with xbl you can create your own custom elements. xbl is heavily used in xul, but in theory it could be applied to any xml language. xbl was submitted to the w3c for standardization, but for now it's used in xul almost exclusively. with xbl you can define new elements and define their properties, attributes, methods and event handlers. many complex elements such as tabs, buttons and input controls are implemented using xbl and simpler xul elements. as explained earlier, xul is really just boxes, text and images. we'll look into xbl using a modified version of the hello world extension. download the hello world xbl project, build it and test it for a while. you should see a new item in the hello world menu, that opens a binding test window where you can add "persons" to a list. xbl basics...

JavaScript Object Management - Archive of obsolete content
s in a xul window as you need. to initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. the load event is fired after the dom on the window has loaded completely, but before it's displayed to the user. this allows you to manipulate and possibly change elements in the window without the user noticing the changes. /** * controls the browser overlay for the hello world extension. */ 〈namespace〉.browseroverlay = { /** * initializes this object. */ init : function(aevent) { this._stringbundle = document.getelementbyid("xulschoolhello-string-bundle"); // you can make changes to the window dom here. } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.browseroverlay.in...

Observer Notifications - Archive of obsolete content
t input parameter is a string "hello". in a chrome browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads. keep in mind that you have to remove observers that are not longer needed. not doing so will result in memory leaks. therefore, the registered observer is unregistered when the browser window is unloaded. /** * controls the browser overlay for the hello world extension. */ xulschoolchrome.browseroverlay = { /* observer service. */ _observerservice : null, /** * initializes this object. */ init : function() { this._observerservice = components.classes["@mozilla.org/observer-service;1"]. getservice(components.interfaces.nsiobserverservice); this._observerservice.addobserver(this, "xu...

MMgc - Archive of obsolete content
in the avmshell this is enable with the -memstats flag. output looks like this: [mem] ------- gross stats ----- [mem] private 5877 (23.0m) 100% [mem] mmgc 5792 (22.6m) 98% [mem] unmanaged 13 (52k) 0% [mem] managed 2596 (10.1m) 44% [mem] free 3081 (12.0m) 52% [mem] jit 0 (0k) 0% [mem] other 85 (340k) 1% [mem] bytes (interal fragmentation)...

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
straints in the new reflow state are computed when the state is created; for example, the available space in the new reflow state is computed by subtracting the container frame's border and padding from the parent reflow state's available space. reflow reason all reflows have a reason , which is maintained in the reflow state object (and may mutate, as described below). 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. in this case, a frame knows that there is no residual state that can be used to simplify geometry computation. incremental, when something in the frame tree changes; for example, when more content is read from the network, or some script manipulates the dom. a...

Source code directories overview - Archive of obsolete content
find out the scroll bar positions and tell its content where to draw according the scroll bar thumbs. webshell contains c interfaces, c code, linux shell scripts and other files for embedding mozilla in other programs on various different platforms in various different ways (e.g. as plug-in, as activex component, as xpcom classes). widget contains c interfaces and code for platform independent controls (widgets), such as scroll bars, radio buttons and list boxes. xpcom contains the low-level c interfaces, c code, c code, a bit of assembly code and command line tools for implementing the basic machinery of xpcom components (which stands for "cross platform component object model"). xpcom is the mechanism that allows mozilla to export interfaces and have them automatically available to javascrip...

Using content preferences - Archive of obsolete content
owser.download.lastdir path of a filesystem directory related about:config preferences: browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences. browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls. spellcheck.lang language code (e.g., "en-us") private browsing requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) prior to gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6), the content preference service always stores preferences on disk. because of this, in private browsing mode, use of the content preference service needed to be a...

Visualizing an audio spectrum - Archive of obsolete content
for the mozaudioavailable event does an fft of the samples and displays them in a canvas. note: you can use the audionode called analysernode to perform real-time fft analysis on an audio stream, rather than the code shown below. ...

Getting Started - Archive of obsolete content
xversion> </description> </em:targetapplication> establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of seamonkey your theme wasn't designed for -- or wasn't tested on. see install manifests for the reference information about the install.rdf file. 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. as an example, let's change the standard button. go into the global directory and open button.css in your favorite text editor. scroll down to button {. this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the background-color: ...

Getting Started - Archive of obsolete content
les for portions of mozilla that don't merit their own individual directory. you'll be able to change the bookmark manager and the profile migration window here. the three remaining directories are pretty self-explanatory. they contain the images/styles for the browser, email client, or html editor. 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. for this next part, let's modify the standard button. go into \mozilla\chrome\classic\skin\classic\global and open button.css in your favourite text editor. scroll down to button {. this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
ersion> </description> </em:targetapplication> establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of firefox your theme wasn't designed for -- or wasn't tested on. see install manifests for the reference information about the install.rdf file. 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. as an example, let's change the standard button. go into the global global directory and open button.css in your favorite text editor. scroll down to "button {". this section defines the normal button in its basic state (there is no mouse over it, it's not disabled, and it's not selected). change the backgr...

Dehydra Function Reference - Archive of obsolete content
({version:, strict:, werror:, gczeal:}) require is used to set runtime execution flags. it also returns the current values of these flags. require supports optional named arguments via javascript object where each parameter is a property. if a property is not specified then it will not be passed to the runtime. version integer: this sets js version similar to version() in js 1.7. 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. it is a mainly useful for debugging dehydra for rooting bugs. gczeal is only enabled when spidermonkey and dehydra are compiled with debug macro defined. require() example require({strict:true, gczeal:2}) if (require().werror) print("werror is set") ...

Priority Content - Archive of obsolete content
patibility handbook wiki location: gecko compatibility handbook migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated. they are dependant on some code that cannot be integrated in the page. 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. they are dependant on some style instructions that can only be placed in the header of the page. started: scripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need ...

Using XPInstall to Install Plugins - Archive of obsolete content
ns may involve more than one dll, or perhaps additional native code. it is, however, a safe assumption for most plugins, especially macromedia's flash plugin which consists of a single dll (on windows this is npswf32.dll) and a single xpt file for scriptability (called flashplayer.xpt). it further installs to a secondary location on the user's desktop. in particular, like many ocx files (activex controls) it installs to a special directory within c:\winnt\system32\, called c:\winnt\system32\myplugin. xpinstall is able to determine what directory this is by the getfolder api call. we have written our own javascript function to contain all the secondary installation code -- function createsecondaryinstall() and finally, it writes the required registry keys to windows. this is done via the created ...

chromemargin - Archive of obsolete content
the specified string should contain four numbers, separated by commas, indicating the margin in pixels for the top, right, bottom, and left edges of the window, respectively. this value may be -1 to use the default margin for that side on the current platform, 0 to have no system border (that is, to extend the client area to the edge of the window), or a value greater than zero to indicate how much less than the default default width you wish the margin on that side to be. ...

panel.consumeoutsideclicks - Archive of obsolete content
if it is not set, it defaults to the platform behavior. if it set to true the rollup event is consumed. if set to false, the rollup event is not consumed. ...

disabled - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. // disabling an element document.getel...

primary - Archive of obsolete content
...

Panels - Archive of obsolete content
this function would also include code to start the search operation. preventing panels from automatically closing a panel will be closed when a user clicks outside of the panel or when the escape key is pressed. this is the normal way in which a user would cancel the operation. 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. sometimes, however, you may wish to keep the panel open, even if the user clicks outside of it. this is useful when creating floating tool panels. to do this, set the noautohide attribute on the panel to true. <panel id="search-panel" noautohide="true"> <textbox id="search"/> <button label="search" oncommand="dosearch();"/> <button label="cancel" oncommand="this.parentnode.hide...

Popup Guide - Archive of obsolete content
u should only contain menu related elements. context menus a context menu is like a regular menu except that the commands it contains apply to what the user had clicked on to open the context menu. often, depending on what was clicked on, certain commands may be hidden if not applicable to that element. panels a panel can contain any type of content. it is useful when you wish to display some controls temporarily over the existing ui. for example, a popup search field could be used to allow searching and will disappear when a search term has been entered. a panel is created using the panel element. floating panels a floating popup is a type of panel with a titlebar and acts like an auxiliary window. usually it would contain tools related to the main window, or an inspector which displays pr...

textbox (Toolkit autocomplete) - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. disablekeynavigation type: bool...

Textbox (XPFE autocomplete) - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. disablehistory obsolete since ge...

Accesskey display rules - Archive of obsolete content
xul elements display their accesskeys in their label automatically if it's necessary. this document describes the rules of generating a label text. xul elements don't display any accesskeys on mac xul elements don't display any accesskeys on mac. because macos x doesn't have the conception of accesskey function on its native widgets/applications. basic accesskey display rules on non-mac platforms, a character which is same as its accesskey is underlined. e.g., when an accesskey of "file" is 'f', the generated label will be "file". ...

Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
s the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed. similarly, you may wish to change a property when the element is focused. you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. (see focus and selection) handling mouse events for mouse events, you can use the button attribute to have the handler only trap events that occur from a certain button. without this attribute, the handler traps all events regardless of the button that was pressed. the button attribute should be set to either 0 for the left mouse button, 1 for the middle mouse b...

Adding HTML Elements - Archive of obsolete content
ach tag. this is so that mozilla knows that this is an html tag and not a xul one. if you left out the html: part, the browser would think that the elements were xul elements and they would not display because img, input, table, and so on are not valid xul tags. in xul, you can add labels with the description or label element. you should use these elements when you can. 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. example 1 : source view <html:p> search for: <html:input id="find-text"/> <button id="okbutton" label="ok"/> </html:p> this code will cause the text 'search for:' to be displayed, followed by an input element and an ok button. notice that the ...

Focus and Selection - Archive of obsolete content
tbox. finally, the other label which displays the tag name has no control attribute, so clicking it has no effect on the focused element. only focusable elements can be focused. making a label focusable if you were creating custom elements, you might have a need to change whether an element can have the focus or not. for this, you can use a special style property -moz-user-focus. this property controls whether an element can be focused. for instance, you could make a label focusable, as in the example below. example 4 : source view <label id="focused" style="-moz-user-focus: normal;" onkeypress="alert('label focused');" value="focus me"/> the style property is set to normal. you can also set it to ignore to turn off the focus for an element. this shouldn't be used for disabling an el...

Introduction - Archive of obsolete content
xhtml or other xml languages such as mathml or svg can be inserted within it. also, text displayed with xul is easily localizable, which means that it can be translated into other languages with little effort. what kinds of user interfaces can be made with xul? xul provides the ability to create most elements found in modern graphical interfaces. 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. in mozilla, such datasources include a user's mailbox, their bookmarks and search results. the contents...

XUL Structure - Archive of obsolete content
y. there are three main types of document in mozilla: html, xml, and xul. naturally, the html document is used for html documents, the xul document is used for xul documents, and the xml document is used for other types of xml documents. since xul is also xml, the xul document is a subtype of the more generic xml document. there are subtle differences in functionality. 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. likewise, xul specific features such as overlays and templates are only available in xul documents. this distinction between documents is important. it is possible to use many xul features in html or xml documents since they aren't docum...

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
youts. underlined text may be read by the screen reader. element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. button <button label="<!--button text-->" /> <button id="butwrap1"> <label control="butwrap1"> <!--wrapped label--> </label> </button> <button id='butwrap2'> <label control="but...

The Implementation of the Application Object Model - Archive of obsolete content
over the earth in ghost busters. in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon. it became a markup language. xul stands for "extensible user interface language". it is an xml-based language for describing the contents of windows and dialogs. xul has language constructs for all of the typical dialog controls, as well as for widgets like toolbars, trees, progress bars, and menus. where html describes the contents of a single document, xul describes the contents of an entire window (which could itself contain multiple html documents). the html content tree structure for a single document is represented as a set of objects that can be accessed and manipulated. this is referred to as the dom (document ob...

XUL Coding Style Guidelines - Archive of obsolete content
to make xul files easy to read and maintain, localization friendly, and portable across user agents, we need to have a set of coding style guidelines to ensure our objectives are achievable. the author has collected a set of guidelines from various sources listed in the references section. ...

arrowscrollbox - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. smoothscroll type: ...

button - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. dlgtype type: one of the values...

checkbox - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. src type: uri set this to an u...

colorpicker - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. color type: color string the c...

command - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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 type: string the label th...

datepicker - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. firstdayofweek type: integer w...

description - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. tabindex type: integer the tab...

key - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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 type: character the charac...

keyset - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. properties inherited properties...

label - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. href type: string defines a ur...

listcell - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. image type: uri the uri of t...

listhead - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. inherited from xul element align,...

listheader - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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 type: string the label t...

listitem - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. image type: uri the uri of th...

menu - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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 type: string the label th...

menuitem - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. image type: uri the uri of th...

menulist - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. editable type: boolean indicate...

menuseparator - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. image type: uri the uri of t...

panel - Archive of obsolete content
ng the backdrag attribute on a xul panel lets the user move the panel by clicking and dragging anywhere on its background area. close type: boolean if the panel has a titlebar, set the panel's close attribute to true to have a close button appear on the titlebar. pressing the close button will close the panel. 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. if it is not set, it defaults to the platform behavior. if it set to true the rollup event is consumed. if set to false, the rollup event is not consumed. this attribute should be used instead of setconsumerollupevent. fadetype: one of the values ...

preference - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. instantapply type: boolean if ...

radio - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. focused type: boolean this att...

radiogroup - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. focused type: boolean this att...

richlistbox - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. disablekeynavigation type: bool...

richlistitem - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. searchlabel type: string text...

scale - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. increment type: inte...

tab - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. fadein type: boolean this attribu...

tabs - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. onclosetab type: script code t...

textbox - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. focused type: boolean this attr...

timepicker - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. hideseconds type: bo...

toolbarbutton - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. dlgtype type: one of the values ...

tree - Archive of obsolete content
re usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the attribute to true, as this will suggest you can set it to false to enable the element again, which is not the case. the disabled attribute is allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. 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. disablekeynavigation type: boole...

treecol - Archive of obsolete content
opied to the menulist.value property upon user selection of the menuitem. primary type: boolean if set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. if no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user. the attribute also controls whether the column picker allows the user to deselect this column. sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property. the property will usually be the same as that of the cell label. sortactive type: boolean this should be set to true for the column which should be sorted by default. sortd...

Windows and menus in XULRunner - Archive of obsolete content
« previousnext » our quest to build a basic desktop application using xulrunner continues. last time i installed xulrunner and built a very simple, bare-bones test application. 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. the xul file may also contain other top-level declarations for css and dtd, which i will discuss in a moment. <window> is the basic windowing element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. here is...

calICalendarView - Archive of obsolete content
endarview very early in an application/extension's loading process. controller the controller for a calicalendarview is an implementation of calicalendarviewcontroller and provides an integral link with the code in which a calicalendarview may be used. 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. in general, therefore, a calicalendarview will not provide its own controller, but rather rely on other code to set this attribute. implementations should therefore be wary to check whether a controller has been assigned to the view, before calling any of the methods it implements.note that in most cases, this attribute will be set by the consu...

Mozilla release FAQ - Archive of obsolete content
ts are there for programmers? this project is largely about coding. 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.. what subprojects are there for documentation people? mozilla currently has far more developers than documenters. as a result, the project is in dire need of documentation work. maintenance of old documentation would be helpful, new documentation is also welcome. post to ne...

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
<label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <input type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification. remarks this property is supported by windows 2000 and later. it enables users to hide navigation indicators for menu items and controls until the alt key is pressed. an access key is a single character used as a keyboard shortcut for selecting an object. the user presses the alt key and holds it while pressing the character to move input focus to the object, and to invoke the default event associated with the object. in internet explorer 8 (ie8) the -ms-accelerator attribute is an extension to css, and can be used as a synonym ...

::-ms-clear - Archive of obsolete content
this includes inputs that appear text-like or fall back to type="text". ...

ActiveXObject - Archive of obsolete content
ation excel.chart scripting.filesystemobject wscript.shell word.document important: activex objects may present security issues. to use the activexobject, you may need to adjust security settings in internet explorer for the relevant security zone. 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. to create an automation object, assign the new activexobject to an object variable: var excelapp = new activexobject("excel.application");...

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

Mozilla XForms Specials - Archive of obsolete content
go through the model element to get to the instance document. it seems a bit awkward if you have the instance element, so we have added a getinstancedocument() function directly on the instance element as a shortcut. this is documented in nsixformsnsinstanceelement. 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. and allowing the ui to be represented in xbl. more information can be found in xforms:custom controls. labelposition for xforms:input elements bound to a boolean node we support an attribute labelposition in the namespace http://www.mozilla.org/projects/xfor...009/extensions, which allows the form auth...

XForms Group Element - Archive of obsolete content
introduction the group element is used as a container for defining a hierarchy of form controls. groups can be nested to create complex hierarchies. attributes single-node binding type restrictions the group element can be bound to a node containing data of any type. actually, the group element doesn't interact with the data in the bound node. however, having a relevant model item property on the bound node has an effect on a group. all content elements (e.g. core form controls, groups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant. if a group is non-relevant, then the rendering approach used to signify non-relevance is applied to the entire content of the group. representations the group element doesn't have visual presentation. e...

XForms Input Element - Archive of obsolete content
ent, then the instance node will be updated when the user checks or un-checks the checkbox. if "false" then the instance node will be updated when the checkbox loses the focus. labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions. this attribute is optional, possible values are before and after. the default value if omitted is after. it controls the display of the label relative to the checkbox. before shows the label first, then the checkbox, after shows the checkbox, than the label. labelposition was introduced with mozilla xforms 0.8.8. before that, the default behavior was to display the label first, then the checkbox. since the introduction of labelposition, the behavior changed as described above to better match other implementatio...

XForms Label Element - Archive of obsolete content
d for a form control to have an empty label element. the label text can be specified in instance data, in a remote document, or as inline text. if more than one source of label text is specified for this element, the order of precedence is: single node binding attributes, linking attributes, inline text. 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. usually by underlining the accesskey character in the label text. focus behavior - when a label element is clicked or its accesskey is activated then the form control that contains the label will be given the focus. attributes ui common accesskey - use...

XForms Repeat Element - Archive of obsolete content
to which type of widget(s) to use to represent this control. node set binding special startindex - optional 1-based initial value of the repeat index. the default value is 1. number - isn't supported type restrictions the repeat element can be bound to a nodeset. representations the repeat element doesn't have a visual representation. however, it can influence the layout of generated controls depending on its appearance attribute. default layout each generated control set is placed vertically. compact layout each generated control set is placed horizontally. occurs when the repeat element's appearance attribute has a value of compact. behaviour focusing a generated control may change the current index of the containing repeat element. the index is equal to the index of the co...

XForms Switch Module - Archive of obsolete content
ing a relevant model item property on the bound node has an effect on a switch. binding a switch to a data node will also set a context that the expressions contained inside the case elements can build upon. representations the switch element doesn't have a visual representation. case element this element (see the spec) encloses markup to be conditionally rendered. the content elements (e.g. form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered. correspondingly, content elements in a case that becomes selected are visible. attributes special selected - determines the initial selected state of the case. if multiple cases within a switch are marked as selected="true", the first selected case will appear and all others will not ...

XForms - Archive of obsolete content
mozilla xforms extension building get started with building your own xforms extensions from source. troubleshooting tips for xforms a small collection of tips for troubleshooting common problems with xforms forms. mozilla xforms specials explains where, and how, mozilla xforms deviates or extends the xforms 1.0 specification. xforms custom controls custom controls lets the form author "skin" each xforms control through xbl, and create f.x. an svg input control. xforms user preferences a description of the about:config variables that xforms uses. xforms api reference xforms interfaces documentation. xforms ui elements reference xforms user interface elements documentation. ...

Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples. ...

Game distribution - Game development
such games are often designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need. saying this, desktop platforms can be used for distribution quite easily with the availability of wrappers that can help you prepare native builds of your game see packaging games. it's also nice to provide desktop controls for your games even if you're mostly targeting mobile. players are enjoying your games on any platform available, and desktop is one of them. plus, it is usually easier to build and test the game first on desktop, and then move on to debugging mobile. publishing the game there are three main options when it comes to publishing a game: self-hosting publishers stores remember that the name...

WebVR — Virtual Reality for the Web - Game development
ition.y * height * 2; if(-posstate.position.z > 0.01) { zpos = -posstate.position.z; } else { zpos = 0.01; } } ... } for a full explanation and more details of the demo this is taken from, see using the webvr api. tools and techniques the first webvr experiments and demos used three.js as it's probably the most popular 3d engine for the web. see the vreffect and vrcontrols functions available on the three.js github to help you implement and handle webvr with three.js. boris smus has written about the concept of responsive webvr, where a single web game can be played on various devices like laptops without vr hardware, pcs with oculus rift, or smartphones inside google cardboard and still deliver a unique and valuable experience across all of them. it's like resp...

Bounce off the walls - Game development
« previousnext » ...

Create the Canvas and draw on it - Game development
d: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="480" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header. 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. the <canvas> element has an id of mycanvas to allow us to easily grab a reference to it, and it is 480 pixels wide and 320 pixels high. all the javascript code we will write in this tutorial will go between the opening <script> and closing </script> tags. canvas basics to actually be able to render graphics on the <canvas> element, first we have to grab a reference to it i...

Track the score and win - Game development
again once the alert button is clicked. compare your code the latest code looks (and works) like this, in case you want to compare and contrast it with yours: exercise: add more points per brick hit, print out the number of collected points in the end game alert box. next steps the game looks pretty good at this point. in the next lesson you will broaden the game's appeal by adding mouse controls. « previousnext » ...

2D breakout game using pure JavaScript - Game development
s you should already have basic to intermediate javascript knowledge. after working through this tutorial you should be able to build your own simple web games. 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. after that, you can pick any framework you like and use it for your projects. frameworks are just tools built with the javascript language; so even if you plan on working with them, it's good...

Bounce off the walls - Game development
« previousnext » ...

2D breakout game using Phaser - Game development
ledge. after working through this tutorial, you should be able to build your own simple web games with phaser. 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. if you are not already familiar with pure javascript game development, we would suggest that you first work through this se...

2D maze game with device orientation - Game development
on the screen. updatecounter updates the time spent playing each level and records the total time spent playing the game.. managepause pauses and resumes the game. manageaudio turns the audio on and off. wallcollision is executed when the ball hits the walls or other objects. 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. finishlevel loads a new level when the current level is completed, or finished the game if the final level is completed. adding the ball and its motion mechanics first, let’s go to the create() function, initialize the ball object itself and assign a few properties to it: this.ball = this.add.sprite(this.ballstartpos.x,...

Visual typescript game engine - Game development
| ├── examples/ | | ├── platformer/ | ├── html-components/ | | ├── register.html | | ├── login.html | | ├── games-list.html | | ...

Gecko FAQ - Gecko Redirect 1
f reported bugs related to the standards mentioned above; be aware that these raw lists of open in-process bugs will inevitably include some duplicate, out of date, unreproducible, invalid, and incorrectly tagged reports: the links themselves are probably outdated too. ...

CSS - MDN Web Docs Glossary: Definitions of Web-related terms
the browser applies css style declarations to selected elements to display them properly. a style declaration contains the properties and their values, which determine how a webpage looks. css is one of the three core web technologies, along with html and javascript. css usually styles html elements, but can be also used with other markup languages like svg or xml. a css rule is a set of properties associated with a selector. ...

Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. these attacks succeed if the web app does not employ enough validation or encoding. ...

Domain - MDN Web Docs Glossary: Definitions of Web-related terms
its "domain name" is a way to address this authority as part of the hierarchy in a url - usually the most memorable part of it, for instance a brand name. a fully qualified domain name (fqdn) contains all necessary parts to look up this authority by name unambigously using the dns system of the internet. for example, in "developer.mozilla.org": "org" is called a top-level domain. they are registered as an internet standard by the iana . here, "org" means "organization" which is defined in a top-level domain registry. "mozilla" is the domain. ...

Fetch directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp fetch directives are used in a content-security-policy header and control locations from which certain resource types may be loaded. 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. all fetch directives fall back to default-src. that means, if a fetch directive is absent in the csp header, the user agent will look for the default-src directive. see fetch directives for a complete list. ...

RTSP: Real-time streaming protocol - MDN Web Docs Glossary: Definitions of Web-related terms
basically, rtsp is the protocol that describes what happens when you click "pause"/"play" when streaming a video. if your computer were a remote control and the streaming server a television, rtsp would describe how the instruction of the remote control affects the tv. ...

Accessibility - Learn web development
s and javascript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. this article outlines some css and javascript best practices that should be considered to ensure that even complex content is as accessible as possible. 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. wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. here we'll show how to use it at a basic level to improve accessibility. accessible multimedia another category of content ...

Debugging CSS - Learn web development
alculated. the layout view shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. this includes a description of properties that you may not have explicitly used on the element, but which do have initial values set. in this panel, one of the detailed properties is the box-sizing property, which controls what box model the element uses. compare the two boxes with classes box1 and box2. they both have the same width applied (400px), however box1 is visually wider. you can see in the layout panel that it is using content-box. this is the value that takes the size you give the element and then adds on the padding and border width. the element with a class of box2 is using border-box, so here the p...

Pseudo-classes and pseudo-elements - Learn web development
ith the document in some way. these user-action pseudo-classes, sometimes referred to as dynamic pseudo-classes, act as if a class had been added to the element when the user interacts with it. examples include: :hover — mentioned above; this only applies if the user moves their pointer over an element, typically a link. :focus — only applies if the user focuses the element using keyboard controls. what is a pseudo-element? pseudo-elements behave in a similar way, however they act as if you had added a whole new html element into the markup, rather than applying a class to existing elements. pseudo-elements start with a double colon ::. ::pseudo-element-name note: some early pseudo-elements used the single colon syntax, so you may sometimes see this in code or examples. modern brow...

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
runtime, as well as what css is applied to each element on the page. it also allows you to instantly modify the html and css and see the results of your changes reflected live in the browser viewport. if you don't see the inspector, tap/click the inspector tab. in internet explorer, tap/click dom explorer, or press ctrl + 1. in microsoft edge, or opera, tap/click elements. 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. press the style button to see the css. exploring the dom inspector for a start, right-click (ctrl-click) an html element in the dom inspector and look at the context menu. the available menu options vary among browsers, but the important ones are mostly the same: delet...

What will your website look like? - Learn web development
including in google images, are copyrighted. to reduce your likelihood of violating copyright, you can use google's license filter. click on the tools button, then on the resulting usage rights option that appears below. you should choose an option such as labeled for reuse. font to choose a font: go to google fonts and scroll down the list until you find one you like. you can also use the controls on the right to further filter the results. click the "plus" (add to) icon next to the font you want. click the "* family selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected). in the popup box, you can see and copy the lines of code google gives you into your text editor to save for later. previous overview: getting started with the we...

Use JavaScript within a webpage - Learn web development
content available as (structured) text. rely on html for your content as much as possible. for example, if you've implemented a nice javascript progress bar, make sure to supplement it with matching text percentages inside the html. likewise, your drop-down menus should be structured as unordered lists of links. make all functionality accessible from the keyboard. let users tab through all controls (e.g., links and form input) in a logical order. if you use pointer events (like mouse events or touch events), duplicate the functionality with keyboard events. test your site using a keyboard only. don't set nor even guess time limits. it takes extra time to navigate with the keyboard or hear content read out. you can hardly ever predict just how long it will take for users or brows...

Creating hyperlinks - Learn web development
s://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the mozilla homepage. 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. if a title's information is truly important to the usability of page, then you should present it in a manner that will be accessible to all users, for example by putting it in the regular text. active learning: creating your own example link create an html document using your local code editor and our getti...

Getting started with HTML - Learn web development
ck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
e. the method you use to throttle your animation will depend on your particular code. for instance, in the earlier spinner example, you could make it appear to move slower by only increasing rotatecount by one on each frame, instead of two. active learning: a reaction game for the final section of this article, you'll create a 2-player reaction game. the game will have two players, one of whom controls the game using the a key, and the other with the l key. when the start button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. after that time, a message will appear saying "players go!!" — once this happens, the first player to press their control button will win the game. let's work through this: first of all, downl...

Client-side storage - Learn web development
reateobjecturl() method. once that is done, we can set the object urls to be the values of our <source> element's src attributes, and it works fine. function displayvideo(mp4blob, webmblob, title) { // create object urls out of the blobs let mp4url = url.createobjecturl(mp4blob); let webmurl = url.createobjecturl(webmblob); ... 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'; ... } offline asset storage the above example already shows how to create an app that will store large assets in an indexeddb database, avoiding the need to download the...

Fetching data from the server - Learn web development
more complex example to round off the article, we'll look at a slightly more complex example that shows some more interesting uses of fetch. we have created a sample site called the can store — it's a fictional supermarket that only sells canned goods. you can find this example live on github, and see the source code. 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. there is quite a lot of complex code that deals with filtering the products by category and search terms, manipulating strings so the data displays correctly in the ui, etc. we won't discuss all of it in the article, but you can find extensive comments in the code (see can-script.js). we will however explain the fetch ...

Client-side web APIs - Learn web development
vas api and webgl). this article provides an introduction to the canvas api, and further resources to allow you to learn more. video and audio apis html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc. this article shows you how to do common tasks such as creating custom playback controls. client-side storage modern web browsers feature a number of different technologies that allow you to store data related to web sites and retrieve it when necessary allowing you to persist data long term, save sites offline, and more. this article explains the very basics of how these work. ...

Introduction to the server side - Learn web development
he information that a user is permitted to see. real world examples include: social networks like facebook allow users to fully control their own data but only allow their friends to view or comment on it. the user determines who can see their data, and by extension, whose data appears in their feed — authorization is a central part of the user experience! 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. to try this, click on the edit button at the top of this page — if you are logged in you will be shown the edit view; if you are not logged in you will be taken to the sign-up page. note: consider other real examples where access to content is controlled. for example, what can you see if y...

Componentizing our Svelte app - Learn web development
when onsave() in invoked, we run the update() function — passing it the modified name — and exit editing mode. we also disable the save button when the <input> is empty, using the disabled={!name} attribute, and allow the user to cancel the edit using the escape key, like this: on:keydown={e => e.key === 'escape' && oncancel()}. we also use todo.id to create unique ids for the new input controls and labels. the complete updated markup of our todo component looks like the following. update yours now: <div class="stack-small"> {#if editing} <!-- markup for editing todo: label, input text, cancel and save button --> <form on:submit|preventdefault={onsave} class="stack-small" on:keydown={e => e.key === 'escape' && oncancel()}> <div class="form-group"> <label for="todo-...

Introduction to automated testing - Learn web development
at device. clicking on one of those browser icons will load up your choice of platform/device/browser — choose one now, and give it a try. note: the blue device icon next to some of the mobile device choices signals that you will be testing on a real device; choices without that icon will be run on an emulator. 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. you can even do things like copy and paste from the device to your clipboard, scroll up and down by dragging with the mouse, or use appropriate gestures (e.g. pinch/zoom, two fingers to scroll) on the touchpads of supporting devices (e.g. macbook). note that not all features are available on all devices. you'll also see a menu that allows you to control the se...

Handling common HTML and CSS problems - Learn web development
more complex elements like html <video>, <audio>, and <canvas> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. you can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content. ...

Mozilla's Section 508 Compliance
rmation conveyed by the image must also be available in text. complete. we expose this information to assistive technology via microsoft active accessibility (msaa) (windows) and accessibility toolkit (atk) (linux/unix). incomplete. no development efforts have made made to utilize cocoa or carbon accessibility apis. (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. complete. requirement windows linux/unix mac os (f) textual information shall be provided through operating system functions for displaying text. the minimum information tha...

Android-specific test suites
e is currently owned by :mcomella and :nalexander. file tickets in the firefox for android product in bugzilla. android-findbugs ensures that the code avoids common java coding errors. using this suite will allow the code to be analyzed to spot any design flaws or potential bugs. 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. see http://findbugs.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details. running android-findbugs to run android-findbugs, first build firefox for android with your changes; then run ./mach android findbugs this will run the tests and report the results to stdout, as well a...

Obsolete Build Caveats and Tips
dows vista sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. this is the sdk that mozilla-1.9.1 (firefox 3.5) builds used to be built against. 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. you may choose not to install the sample code and documentation to save space and download time. ...

Developer guide
he mozilla platform. mozilla much more additional information about mozilla coding practices. adding apis to the navigator object how to augment the window.navigator object with additional apis. interface compatibility guidelines for modifying scriptable and binary apis in mozilla. customizing firefox information about creating customized versions of firefox. task-graph generation what controls the jobs that run on a push to version control? how can you change that? obsolete build caveats and tips a place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases. firefox source docs web-hosted documentation built from the mozilla-central source code. tools bugzilla the bugzilla database u...

Experimental features in Firefox
for more details. release channel version added enabled by default? 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. when tabbing between elements), and not when they are focused using a mouse or other pointing device. see bug 1617600 for more details. release channel version added enabled by default? nightly 75 no developer edition 75 no beta 75 no release 75 no preferen...

Index
cking protection. in private browsing windows (tabs, in firefox for android), firefox will block content loaded from domains that track users across sites. 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
ossible—not just on its own, but in terms of its impact on other parts of 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. firefox profiles if you find yourself using multiple firefox channels—or just multiple configurations—on a regular basis, you should read how to use multiple firefox profiles by t...

Embedding the editor
cation. (the current nseditorshell makes assumptions about the hosting xul document, which need to be broken.) composer embedded in a web page (<htmlarea>) ie 5 supports the <htmlarea> element; if mozilla is to support something similar, editor needs to be embeddable to the extent that this can be done. it is likely that we'd use xbl to implement this type of widget, as is the plan for other form controls. as is the case for composer embedded in a native application, there is a requirement here that the composer ui be configurable, such that it can be displayed either as a toolbar at the top of the <htmlarea>, a floating palette, or a top-level toolbar. current problems the current composer architecture was created while other parts of mozilla were still under development, and as a result it suffe...

Introduction to Layout in Mozilla
ency vs. responsiveness trade-off frame construction runs to completion css parsing runs to completion reflow runs to completion (mostly) painting runs to completion future (?) tech talks content model and dom - jst, jkeiser parser and content sink (esp. ...

Localization content best practices
't leave around unused strings in the .properties file. tooltips if a string is used as a tooltip, it should not end in a period (in english). tooltips are never written in imperative mood but infinitive mood instead. hence the proper absence of periods to indicate this isn't just a matter of consistency for en-us, as it is also vital info for localizers. menu and control labels the labels on controls and menu titles, menu option strings, and so forth should not end in periods (in english). these are generally not complete sentences, but instead, phrases that convey the idea of a concept or action. therefore, for both correctness and consistency within en-us, please leave out the trailing periods for these items. this also helps with localization. developer tools key shortcuts when translati...

Initial setup
mozilla applications. either one is necessary to enable you to see your work within a mozilla application. you can install either by searching for them in firefox's add-ons manager or following these links. 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. you can find version 3.79.1 or higher here. unfortunately, other varieties of make won't do. end of initial setup now that you've finished your initial setup, it's time for the best part: translating! « previousnext » ...

Mozilla Quirks Mode Behavior
ly if there is no other pseudo-class in the selector. to match other elements, the selector must include a tag name, id, class or attribute. prior to gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3), there was no class check, so the :hover pseudoclass was not applied to class selectors; for example, .someclass:hover did not work. 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). prior to gecko 36, the quirk was also applied if another pseudo-class was used in the same selector, if a pseudo-element was used in the selector, or if it was part of a pseudo-class argument (bug 783213). quirks mode has document.all support (undetected). images (img elements) without alt attributes sometimes...

DMD
le best value, but values in the range 2..10 are often good. the maximum is 24. -a / --ignore-alloc-frames. many allocation stack traces start with multiple frames that mention allocation wrapper functions, e.g. js_calloc() calls replace_calloc(). this option filters these out. it often helps improve the quality of the output when using a small --max-frames value. -s / --sort-by. this controls how records are sorted. acceptable values are usable (the default), req, slop and num-blocks. --clamp-contents. for a heap scan log, this performs a conservative pointer analysis on the contents of each block, changing any value that is a pointer into the middle of a live block into a pointer to the start of that block. all other values are changes to null. in addition, all trailing nulls are ...

Profiling with Xperf
les/microsoft sdks/windows/v7.1/redist/windows performance toolkit) to actually install the windows performance toolkit tools. it might already be installed by the windows sdk. check if c:\program files\microsoft windows performance toolkit already exists. 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. just make sure you set the symbol paths before enabling "load symbols" and before opening a summary view. you can also modify the _nt_symbol...

accessibility.tabfocus
note: on mac os x, if this preference is not set, the full keyboard access setting in system preferences > keyboard is honored. type:integer default value: 7 (windows and linux); 2 (mac os x) exists by default: no application support:gecko 1.7 status: active introduction: bugs: bug 140612 values 1 give focus only to text fields (default on mac osx) 2 give focus to all form elements except text fields. 4 give focus only to links and linked images. other you can add these values to combine their functionality. ...

browser.altClickSave
type:boolean default value: false exists by default: yes application support:firefox 13.0 status: active; last updated 2012-03-19 introduction: pushed to nightly on 2012-03-02 bugs: bug 713052 values true clicking a link while holding the alt key starts the download of that link. ...

browser.download.lastDir.savePerSite
if set to true, the data is stored as content preference. type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the website (host) serving the file for download will be preselected in the file picker. if no download directory for the current website has been stored, browser.download.lastdir will be used. ...

browser.pagethumbnails.capturing_disabled
type:boolean default value:true exists by default: no application support: firefox 14.0 status: active; last updated 2012-09-17 introduction: pushed to nightly on 2012-04-13 bugs: bug 726347 values false the application creates screenshots of visited web pages. ...

browser.search.context.loadInBackground
type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search results will be opened in the background, focus stays on the current tab. ...

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

browser.urlbar.trimURLs
type:boolean default value: true exists by default: yes application support:firefox 7.0 status: active; last updated 2012-04-03 introduction: pushed to nightly on 2011-06-23 bugs: bug 665580 values true (default) if the active url is exactly the domain name, the trailing slash (/) behind the top level domain will be hidden. if the address starts with http:// and neither starts with a ftp. subdomain nor contains @ (usually for ftp login information), the http:// prefix will be hidden. ...

javascript.options.showInConsole
type:boolean default value: false (true in debug builds) exists by default: yes application support:firefox 1.0 status: active introduction:2002-02-26 bugs: bug 125181 bug 337875 values false only errors and warnings from content code are shown. true (default) errors and warnings from both chrome and content are shown in the error console. ...

javascript.options.strict
example : <html> <head> <title>sample</title> </head> <body> <label id="name">enter you first name</label> <p id ="sample"></p> <script> "use strict" name1= "john" ; // this will cause and an error as variable not declared . ...

nglayout.debug.disable xul fastload
never set nglayout.debug.disable_xul_fastload to true in a production environment; it exists solely to aid in debugging. in particular, add-ons should never change this preference.. type:boolean default value: false (true in debug builds) exists by default: yes application support:? status: active introduction:? bugs: values false (default) xul fastload is used. ...

reader.parse-on-load.force-enabled
by default, the reader mode in firefox mobile is only enabled if the memory is greater than 384mb. type:boolean default value: false exists by default: yes application support:firefox mobile 23.0 status: active; last updated 2013-05-11 introduction: pushed to nightly on 2013-05-06 bugs: bug 867875 values true reader mode is enabled independent of memory available. ...

ui.alertNotificationOrigin
ui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in. type:integer default value:dependent on position of taskbar or equivalent exists by default: no application support: gecko 1.8.1.2 (firefox 2.0.0.2 / thunderbird 2.0.0.4 / seamonkey 1.1) status: active; last updated 2012-02-22 introduction: pushed to nightly on 2007-01-04 bugs: bug 133527 values 0 bottom right corner, vertical slide-in from the bottom 1 bottom right corner, horizontal slide-in from the right 2 bottom left corner, vertical slide-in from the bottom 3 bottom left corner, horizontal slide-in from the left 4 top right corner, vertical slide-in from the top 5 top right corner, horizontal slide-in from the right 6 to...

view_source.syntax_highlight
type:boolean default value: true exists by default: yes application support:firefox 1.0 status: active introduction: bugs: bug 52154 values true (default) syntax hightlighting is enabled. ...

A guide to searching crash reports
group searches. facets in the search form to do a search with non-signature grouping first click on the "more options..." text, which reveals the additional fields shown in the following screenshot. (the "show columns" and "sort by" fields are straightforward. 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. by default, it contains the value "signature", which explains why we saw a "signature facet" tab in the earlier search results. but we can change the values in this field and get different facet tabs in the search results. grouping by platform for example, if we start with a default search for all firefox crashes in the past week, but then replace the "signature" facet with "platform"...

Introduction to NSPR
g interrupted imply the demise of the thread. nspr thread synchronization thread synchronization has two aspects: locking and notification. locking prevents access to some resource, such as a piece of shared data: that is, it enforces mutual exclusion. notification involves passing synchronization information among cooperating threads. 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. when a programmer associates a mutex with an arbitrary collection of data, the mutex provides a protective monitor around the data. locks and monitors in general, a monitor is a conceptual entity composed of a mutex, one or more condition variables, and the monitored data. monitors in this ...

Locks
when a programmer associates a mutex with an arbitrary collection of data, the mutex provides a protective monitor around the data. in general, a monitor is a conceptual entity composed of a mutex, one or more condition variables, and the monitored data. monitors in this generic sense should not be confused with monitors used in java programming. ...

Logging
ine module and level criteria to get highly selective logging. nspr also provides "assert"-style macros and functions to aid in application debugging. conditional compilation and execution log types and variables logging functions and macros use example conditional compilation and execution nspr's logging facility is conditionally compiled in and enabled for applications using it. these controls are platform dependent. logging is not compiled in for the win16 platform. logging is compiled into the nspr debug builds; logging is not compiled into the nspr optimized builds. the compile time #define values debug or force_pr_log enable nspr logging for application programs. to enable nspr logging and/or the debugging aids in your application, compile using the nspr debug build headers and ru...

NSPR LOG MODULES
logged 2 = pr_log_error: errors 3 = pr_log_warning: warnings 4 = pr_log_debug: debug messages, notices 5: everything! description specify a modulename that is associated with the name argument in a call to pr_newlogmodule and a non-zero level value to enable logging for the named modulename. special log module names are provided for controlling nspr's log service at execution time. these controls should be set in the nspr_log_modules environment variable at execution time to affect nspr's log service for your application. all the name all enables all log modules. to enable all log module calls to pr_log, set the variable as follows: set nspr_log_modules=all:5 timestamp including timestamp results in a timestamp of the form "2015-01-15 21:24:26.049906 utc - " prefixing every log...

Named Shared Memory
an your requirements. these limits may be adjusted on some platforms either via boot-time options or by setting the size of the system paging space to accommodate more and/or larger shared memory segment(s). security considerations on unix platforms, depending on implementation, contents of the backing store for the shared memory can be exposed via the file system. set permissions and or access controls at create and attach time to ensure you get the desired security. on windows platforms, no special security measures are provided. named shared memory functions pr_opensharedmemory pr_attachsharedmemory pr_detachsharedmemory pr_closesharedmemory pr_deletesharedmemory ...

PRLogModuleInfo
to log your program's activity, create a prlogmoduleinfo structure using pr_newlogmodule . ...

PR_SetConcurrency
the m x n model is not available on all host systems. ...

Threads
es a new thread. pr_jointhread blocks the calling thread until a specified thread terminates. pr_getcurrentthread returns the current thread object for the currently running code. pr_attachthread associates a prthread object with an existing native thread. pr_detachthread disassociates a prthread object from a native thread. controlling thread priorities for an overview of the way nspr controls thread priorities, see setting thread priorities. you set a thread's nspr priority when you create it with pr_createthread. after a thread has been created, you can get and set its priority with these functions: pr_getthreadpriority pr_setthreadpriority controlling per-thread private data you can use these functions to associate private data with each of the threads in a process: pr_ne...

NSS FAQ
ry 2000) or to persons or entities prohibited from receiving u.s. exports (including those (a) on the bureau of industry and security denied parties list or entity list, (b) on the office of foreign assets control list of specially designated nationals and blocked persons, and (c) involved with missile technology or nuclear, chemical or biological weapons). for more information about u.s. export controls on encryption software, see the mozilla crypto faq. ...

NSS 3.12.6 release notes
y be used during the transition period when few servers have been upgraded. nss_ssl_require_safe_negotiation values: 1: requiresafenegotiation = true unset: requiresafenegotiation = false controls whether safe renegotiation indication is required for initial handshake. if true, a connection will be dropped at initial handshake if the peer server or client does not support safe renegotiation. the default setting for this option is false. these options can also be set with the following ssl options: ssloptions.enabler...

NSS 3.46 release notes
s to make two changes to the default tls configuration in nss 3.47, which will be released in october: tls 1.3 will be the default maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...

NSS_3.12.3_release_notes.html
nss_strict_nofork string ("1", "disabled", or any other non-empty value) it is an error to try to use a pkcs#11 crypto module in a process before it has been initialized in that process, even if the module was initialized in the parent process. beginning in nss 3.12.3, softoken will detect this error. this environment variable controls softoken's response to that error. if set to to "1" or unset, softoken will trigger an assertion failure in debug builds, and will report an error in non-debug builds. if set to "disabled", softoken will ignore forks, and behave as it did in older versions. if set to any other non-empty value, softoken will report an error in both debug and n...

JSObjectOps.newObjectMap
d at any time. try to avoid using it. warning! jsobjectops is not a supported api. details of the api may change from one release to the next. this documentation should be considered spidermonkey internals documentation, not api documentation. see bug 408416 for details. the jsobjectops.newobjectmap callback is called whenever a new object is created. it creates a jsobjectmap that completely controls the new object's behavior. syntax typedef jsobjectmap * (*jsnewobjectmapop)(jscontext *cx, jsrefcount nrefs, jsobjectops *ops, jsclass *clasp, jsobject *obj); name type description cx jscontext * pointer to the js context in which the new object is being created. nrefs jsrefcount the initial reference count for the new jsobjectmap. op...

JS_GetGCParameter
illiseconds to spend in an incremental gc slice. 0 for infinite. jsgc_mark_stack_limit / "markstacklimit" maximum size the gc mark stack can grow to (units: entries). jsgc_high_frequency_time_limit / "highfrequencytimelimit" gcs less than this far apart in time will be considered 'high-frequency gcs'. jsgc_high_frequency_low_limit / "highfrequencylowlimit" controls for dynamic heap growth. when the gc is in "high frequency" mode (see above) then, the heap will be allowed to grow between collections according to these four parameters. see zoneheapthreshold::computezoneheapgrowthfactorforheapsize in gc.cpp for the details. the first two parameters are in mb and the remaining two are in percentage of heap size. jsgc_high_frequency_high_limit ...

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

AT Development
sible2. references at apis implementation references shows how gecko handles atk, iaccessible2, msaa and universal access api accessible web specifications references provides the map of reflecting web specification to at apis. this page includes: aria references - w3c specification reflecting aria mapping into at apis. xforms references - gecko documentation showing how xforms controls are mapped to at apis. ...

Querying Places
untref = { }; let optionsref = { }; placesutils.history.querystringtoqueries(querystring, queriesref, querycountref, optionsref); // now use queriesref.value, optionsref.value see places query uris for more information about the terms available for "place:" uris. using the results the most common way to use results is to implement a view. there is a built-in view that will put results in tree controls, and you can also implement your own. see displaying places information using views for more on this. this section discusses how to access the result directly, for example, if you are creating your own view or are processing the results instead of displaying them. note: be careful when accessing nodes and do not keep references to them around. notifications sent to the result from the history an...

Creating the Component Code
omponent using generic macros, and this chapter is more about learning the basics. as in grade school when you learned long division, better tools like calculators come after you figure out what's actually happening. in this case, the long-hand implementation gives us an opportunity to talk about various features of xpcom. 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. once enabled, this "weblock" mode is password protected and persists until it is turned off by the password holder. it can be used to implement parental controlled browsing for children, or for targeted "kiosk browsing," where the content is restricted to a particular server. web lock user...

Preface
useful as well. xpcom stands for the cross platform component object model. as this name implies, xpcom is similar to microsoft com. if you have any experience with this technology, much of it can be applied to xpcom. however, this book does not assume any prior knowledge of com - all of the basic com ideas will be introduced. this book provides a tutorial about building an xpcom component that controls browsing behavior. although, xpcom can be used in many environments which are unrelated to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality. a full description of the component in this tutorial can be found in the what we'll be working on section of the tutorial. des...

Using XPCOM Components
in the c++ version above, and i've added |pr_false| as a fourth parameter there as well. beyond the methods that are being called on the cookiemanager itself (e.g., cookiemanager.remove, which maps to the remove() function in the nsicookiemanager interface), note the special xpconnect objects and methods that reflect the xpcom component into javascript. 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. to instantiate an xpcom component in javascript, you create a new component object and pass in the contract id for the component you want and ask for either a singleton or an instance of that component to be returned: var cmgr = components.classes["@mozilla.org/cookiemanager;1"] ...

XPCOM Stream Guide
the spout is a source of water. ...

IAccessible2
che the uniqueids in addition to other data being cached. when an event is fired the at could map the uniqueid to its internal model. thus, if there's a reorder/show/hide event the at knows which part of the internal structure has been invalidated and can refetch just that part. this value can also be used by an at to determine when the current control has changed. 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. another use of this value by an at is to identify when a grouping object has changed, for example when moving from a radio button in one group to a radio button in a different group. one means of implementing this would be to create a factory with a 32 bit number generator and a reuse pool. the number generator would ...

IAccessibleAction
bindings, if there are any, associated with the specified action. the returned strings are the localized human readable key sequences to be used to activate each action, e.g. "ctrl+shift+d". since these key sequences are to be used when the object has focus, they are like mnemonics (access keys), and not like shortcut (accelerator) keys. 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. an at such as an on screen keyboard might not expose these bindings but provide alternative means of activation. [propget] hresult keybinding( [in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings), length_is(, nbindings)] bstr keybindings, [...

IAccessibleTable
tents describing how a table changed. provided for use by the ia2_event_table_model_changed event handler. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. 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. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers...

IAccessibleTable2
tents describing how a table changed. provided for use by the ia2_event_table_model_changed event handler. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. 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. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers...

imgIEncoder
ues are semicolon-separated. png: ---- transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. apng: ----- the following options can be used with startimageencode(): transparency=[yes|no|none] -- default: "yes" overrides default from input format. "no" and "none" are equivalent. skipfirstframe=[yes|no] -- default: "no" controls display of the first frame in animations. png-only clients always display the first frame (and only that frame). frames=# -- default: "1" total number of frames in the image. the first frame, even if skipped, is always included in the count. plays=# -- default: "0" number of times to play the animation sequence. "0" will repeat forever. the following options can be used for each fram...

nsIAccessibleProvider
ants common use constants constant value description noaccessible 0 do not create an accessible for this object this is useful if an ancestor binding already implements nsiaccessibleprovider, but no accessible is desired for the inheriting binding. outerdoc 0x00000001 for elements that spawn a new document. for example now it is used by <xul:iframe>, <xul:browser> and <xul:editor>. ...

nsIAccessibleRelation
d long returns the number of targets for this relation. read only. constants constant value description relation_nul 0x00 relation_controlled_by 0x01 some attribute of this object is affected by a target object. relation_controller_for 0x02 this object is interactive and controls some attribute of a target object. relation_label_for 0x03 this object is label for a target object. relation_labelled_by 0x04 this object is labelled by a target object. if the accessible has an nsiaccessible.name() , you can get the nsiaccessible that it was labelled by in order to get more formatting information. ...

nsIAlertsService
only available on supported platforms. lang optional language of title and text of the alert. only available on supported platforms. data optional the value of the cookie parameter passed to showalertnotification. principal optional the principal of the page that created the alert. used for ipc security checks, and to determine whether the alert is actionable. inprivatebrowsing optional controls the image loading behavior. if true, the image url will be loaded in private browsing mode. exceptions thrown ns_error_not_available unable to display the notification; this may happen, for example, on mac os x if growl is not installed. example simple usage the following code was used to display the above notification. var alertsservice = components.classes["@mozilla.org/alerts-servic...

nsIAppShellService
nsiuri aurl, in boolean ashowwindow, in boolean aloaddefaultpage, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell ); parameters aparent the parent window. can be null. aurl the contents of the new window. ashowwindow obsolete since gecko 1.8 the window remains invisible if pr_false. aloaddefaultpage obsolete since gecko 1.8 controls whether the window should try to load a default content page on its own. achromemask chrome flags affecting the kind of os border given to the window. (see nsibrowserwindow for bit/flag definitions). ainitialwidth width, in pixels, of the window. width of window at creation. can be overridden by the "width" tag in the xul. set to ns_sizetocontent to force the window to wrap to its contents. ...

nsIAsyncStreamCopier
es the destination for the data. atarget specifies the thread on which the copy will occur. a null value is permitted and causes the copy to occur on an unspecified background thread. asourcebuffered true if asource implements nsiinputstream.readsegments(). asinkbuffered true if asink implements nsiinputstream.writesegments() . achunksize specifies how many bytes to read and write at a time. this controls the granularity of the copy operation. this value should match the segment size of any buffered streams involved in the operation. aclosesource true if asource should be closed after copying. aclosesink true if asink should be closed after copying. see also nsiinputstream nsioutputstream ...

nsICachingChannel
if the request would otherwise block waiting to access the cache. load_only_from_cache 1 << 30 this load flag inhibits fetching from the net if the data in the cache has been evicted. an error of ns_error_document_not_cached will be sent to the listener's onstoprequest in this case. this flag is set automatically when the application is offline. 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. if this attribute is set to true, then the document will not be loaded from the cache. a stream listener can check isfromcache() to determine if the asyncopen will actually result in data being streamed. if this flag has been set, and the request can be satisfied via the cache, then the ondataavailable eve...

nsIDOMHTMLSourceElement
d mime type. the codecs parameter may be specified and might be necessary to specify exactly how the resource is encoded. media unimplemented domstring the media attribute gives the intended media type of the media resource, to help the user agent determine if this media resource is useful to the user before fetching it. its value must be a valid media query. 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". the type is specified as "video/ogg", and the source element also specifies that the video file uses the dirac and speex codecs. ...

nsIDOMWindow
hierarchy does not cross chrome-content boundaries. read only. scrollx long the current horizontal (x) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrolly long the current vertical (y) scroll position, in pixels. this attribute is "replaceable" in javascript. read only. scrollbars nsidombarprop the object that controls whether or not scrollbars are shown in the window. this attribute is "replaceable" in javascript. read only. sessionstorage nsidomstorage session storage for the current browsing context. data stored in session storage may be accessed by any site in the browsing context. read only.note: prior to gecko 8.0 this attribute was part of nsidomstoragewindow. textzoom float ...

getFile
oft windows builds of gecko. ...

nsIDownloadManager
et file. download_failed 2 the download failed due to error. download_canceled 3 the user canceled the download. download_paused 4 the download is currently paused. download_queued 5 the download is in the queue but is not presently downloading. 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. download_scanning 7 the download is being scanned by a virus checking utility. download_dirty 8 a virus was detected in the download. the target will most likely no longer exist. download_blocked_policy 9 windows specific: request was blocked by zone policy settings. (se...

nsIMarkupDocumentViewer
ue, plugins are allowed within the doc shell. default = true. obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user. obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls. 1 - logical 2 - visual 3 - like the containing document. obsolete since gecko 2.0 bidinumeral octet the type of numerals to display. 1 - depending on context, default is arabic numerals 2 - depending on context, default is hindi numerals 3 - arabic numerals 4 - hindi numerals. bidioptions pruint32 ...

nsIMsgDBViewCommandUpdater
mailnews/base/public/nsimsgdbview.idl#349scriptable please add a summary to this article. ...

nsINavHistoryResultTreeViewer
nce to it, then reinitialize it when the tree changes. if you use this object and attach it to a result without attaching it to a tree, then forget about it, it will leak. 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. this prevents you from seeing multiple entries for things when you have selected to get visits. when you sort by date, the multiple entries will then appear because they will be separated (unless you clicked reload a bunch of times in a row). if you know you'll only ever want one entry per site, you should ask for u...

nsIParserUtils
nse. at present, sanitizing css syntax in svg presentational attributes is not supported, so this option flattens out svg. sanitizerdropnoncsspresentation (1 << 3) flag for sanitizer: drops non-css presentational html elements and attributes, such as <font>, <center>, and the bgcolor attribute. sanitizerdropforms (1 << 4) flag for sanitizer: drops forms and form controls (excluding <fieldset> and <legend>. sanitizerdropmedia (1 << 5) flag for sanitizer: drops <img>, <video>, <audio>, and <source>, and flattens out svg. sanitizerlogremovals (1 << 6) flag for sanitizer: log messages to the console for everything that gets sanitized. methods converttoplaintext() converts html to plain text. astring converttoplaintext( in a...

nsIPromptService
constant value description button_pos_0 1 this is usually the button used to confirm the prompt. it typically has the label "ok", "yes", or "save". button_pos_1 256 this is the button used to cancel the prompt. it typically has the label "cancel" or "no". it is equivalent to pressing the escape key (or cmd+. on the mac), or closing the window through the os controls. button_pos_2 65536 this button can be used to give the user a choice of options, but still allowing the user to cancel the prompt. for instance, it might have the label "don't save". button title flags these flags are used along with button position flags to set the labels of buttons in the prompt. constant value description button_title_ok 1 th...

nsISocketTransportService
obsolete since gecko 1.8 methods native code only! attachsocket adds a new socket to the list of controlled sockets. this will fail with the error code ns_error_not_available if the maximum number of sockets is already reached. in this case, the notifywhencanattachsocket() method should be us...

nsIWebBrowserFindInFrames
inherits from: nsisupports last changed in gecko 1.7 get an instance by doing a queryinterface from nsiwebbrowserfind. attributes attribute type description currentsearchframe nsidomwindow frame at which to start the search. once the search is done, this will be set to be the last frame searched, whether or not a result was found. has to be equal to or contained within the rootsearchframe. rootsearchframe nsidomwindow frame within which to confine the search (normally the content area frame). set this to only search a subtree of the frame hierarchy. ...

nsIXFormsModelElement
valent to performing the recalculate action handler. though the script is assumed to have modified instance data prior to invoking recalculate, the dom mutations are not cached. thus, a full recalculation is necessary to ensure the proper changes are effected throughout the xforms model. void recalculate(); parameters none. refresh() signals the xforms processor to perform a full refresh of form controls bound to instance nodes for the given xforms model. void refresh(); parameters none. revalidate() signals the xforms processor to perform a full revalidation of the given xforms model. void revalidate(); parameters none. see also xforms 1.1rec ...

nsIXULTemplateBuilder
a template builder, given an input source of data, a template, and a reference point, generates a list of results from the input, and copies part of the template for each result. templates may generate content recursively, using the same template, but with the previous iteration's results as the reference point. as an example, for an xml data source the initial reference point would be a specific node in the dom tree and a template might generate a list of all child nodes. for the next iteration, those children would be used to generate output for their child nodes and so forth. ...

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
elected messages. label4 25 attach a label to the selected messages. label5 26 attach a label to the selected messages. lastlabel 26 attach a label to the selected messages. junk 27 mark the selected messages as junk. unjunk 28 mark the selected messages as not junk. undeletemsg 29 undelete the selected messages. applyfilters 30 apply filters to the selected messages runjunkcontrols 31 run junk mail controls on the selected messages. deletejunk 32 delete all junk messages. ...

Performance
them back, and it also keeps recently used ones so it can run faster. in the past, it flushed the cache at the end of a transaction (by default). in order to keep the cache active between transactions, you needed to have a second connection with a 'dummy' (and schema changing) transaction. that is not needed now. you can control the size of the memory cache using the cache_size pragma. this value controls the number of pages of the file that can be kept in memory at once. the page size can be set using the page_size pragma before any operations have been done on the file. you can see an example of setting the maximum cache size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp. sharding the cache between connections by default, storage enables t...

Using COM from js-ctypes
ction between the operating system and an application. for communication between the different windows applications among themselves, microsoft has developed a series of technologies alongside the main windows api. 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. com is c++ and it cannot be written directly with js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com...

Streams - Plugins
am for each byte range it requests. instead, additional npp_writeready and npp_write calls occur on the same stream. an individual call to npn_requestread can request discontiguous ranges, and you can have many outstanding npn_requestread calls. 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). so, you'll need to pay attention to the offsets as data is being written. the stream processes all byte-range requests, and then is placed in seek mode (either explicitly in npp_newstream, or implicitly by a call to npn_requestread). it remains open until the plug-in closes it by calling npn_destroystream, or until the instance is destroyed. note: if you want to be sure that the npn...

3D view - Firefox Developer Tools
their html in the html panel or the style panel. conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3d view. if you do not see the 3d button in the page inspector, it is possible that your graphics driver needs to be updated. see the blocklisted drivers page for more information. controlling the 3d view there are keyboard shortcuts and mouse controls available for the 3d view. function keyboard mouse zoom in/out + / - scroll wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the d...

Accessibility Inspector - Firefox Developer Tools
ther useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). for a full list of possible attributes, see gecko object attributes. note: the exposed information is the same across all platforms — the inspector exposes gecko's accessibility tree, rather than information from the platform accessibility layer. keyboard controls the accessibility tab is fully keyboard-accessible: you can tab between the turn off accessibility features button and left and right panels. when one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree). p...

Debugging service workers - Firefox Developer Tools
to the service worker source file. the server worker’s status, which can be one of the following: stopped: the service worker is installed, but not currently running. when the service worker is stopped, a start button is provided to start it running, allowing you to trigger the service worker lifecycle. running: the service worker is running. there are a couple of other useful controls on this view, too. unregister on the right-hand side of the service workers view there is an unregister button, which when pressed unregisters the service worker. this is very useful because, once registered, the service worker will not necessarily update to the new version immediately, which can make debugging a pain. from updating your service worker: if your service worker has previously b...

DevTools API - Firefox Developer Tools
el document. label string, optional. the tool's name. if undefined the icon should be specified. tooltip string, optional. the tooltip for the tool's tab. panellabel string, optional. an accessibility label for the panel. ordinal integer, optional. the position of the tool's tab within the toolbox. default: 99 visibilityswitch string, optional. a preference name that controls the visiblity of the tool. default: devtools.{id}.enabled icon string, optional. an url for the icon to show in the toolbox tab. if undefined the label should be defined. highlightedicon string, optional. an url for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). default: {icon} icononly boolean, optional. if true, the label won't be...

Basic operations - Firefox Developer Tools
memory" box under "default firefox developer tools": from firefox 50 onwards, the memory tool is enabled by default. taking a heap snapshot to take a snapshot of the heap, click the "take snapshot" button, or the camera icon on the left: the snapshot will occupy the large pane on the right-hand side. 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. to save a snapshot click "save": you'll be prompted for a name and location, and the file will be saved with an .fxsnapshot extension. to load a snapshot from an existing .fxsnapshot file, clic...

Edit fonts - Firefox Developer Tools
o author-defined font has been supplied. they are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied. they are system fallback fonts used when nothing from the font-family css declaration has been applied. fonts editor firefox 63 adds the font editor — a new area below "fonts used" with additional controls for editing the fonts’ characteristics. for standard (static) fonts, you will be able to change the settings listed below size the font-size for the inspected element. this can be set using em, rem, %, px, vh, or vw units. you can select values using the slider or enter a numeric value directly into the text box. note: if you want to use a different unit such as pt for font-size or li...

Flame Chart - Firefox Developer Tools
the top-level at the top, and the leaf function at the bottom. functions are color-coded to make them easier to distinguish. this gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from. zooming and panning to work effectively with the flame chart, you'll need to be able to navigate it. 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. 2) trackpad 2 fingers up/down in the flame chart. pan: move the selected portion of the complete profile left and right 1) click and drag the selected portion in the ...

Animating CSS properties - Firefox Developer Tools
ting using transform. the intention of this scenario isn't to convince you that animating using margin is always a bad idea. it's to demonstrate how the tools can give you insight into the work the browser is doing to render your site, and how you can apply that insight to diagnose and fix performance problems. if you want to play along, the demo website is here. 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. there are a number of elements, and we've added a linear-gradient background and a box-shadow to each element, because they are both relatively expensive effects to paint. there's also a video version of this walkthrough: animating using margin leaving the "use margin" ...

Intensive JavaScript - Firefox Developer Tools
different approaches to fixing them. the first is to split long-running functions into pieces and use requestanimationframe to schedule each piece, and the second is to run the whole function in a separate thread using a web worker. if you want to play along you can find the demo website here. 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. a button to run the javascript, labeled "do pointless computations!". a button to start and stop some css animations. this just gives the browser some background ...

Settings - Firefox Developer Tools
ich attributes are truncated, you can edit the about:config preference "devtools.markup.collapseattributelength". default color unit a setting to control how colors are represented in the inspector: hex hsl(a) rgb(a) color name as authored. enable layout panel enable the experimental layout panel. this setting only exists in firefox nightly. web console enable timestamps controls whether the web console displays timestamps. the web console defaults to hiding timestamps. enable new console frontend switch to the experimental new console. this setting only exists in firefox nightly. debugger enable source maps enable source map support in the debugger. enable new debugger frontend enable the new debugger. this setting only exists in firefox nightly. style editor...

Animation - Web APIs
constructor animation() creates a new animation object instance. properties animation.currenttime the current time value of the animation in milliseconds, whether running or paused. if the animation lacks a timeline, is inactive or hasn't been played yet, its value is null. animation.effect gets and sets the animationeffectreadonly associated with this animation. this will usually be a keyframeeffect object. animation.finished read only returns the current finished promise for this animation. ...

AudioBufferSourceNode.loopEnd - Web APIs
beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart). this property is only used if the loop property is true. the default value is 0. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. 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. when the audio is played to the end, it loops, but you can control how long the loops last by altering loopstart and loopend. for example, if you set their values to 20 and 25, respectively, then begin playback, the sound will play normally until it reaches the 25 second mark. then the current play position will lo...

AudioBufferSourceNode.loopStart - Web APIs
floating-point number indicating the offset, in seconds, into the audio buffer at which each loop should begin during playback. this value is only used when the loop parameter is true. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. 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. when the audio is played to the end, it loops, but you can control how long the loops last by altering loopstart and loopend. for example, if you set their values to 20 and 25, respectively, the audio will start to loop between 20 and 25 seconds in to the track. for a full working example, see this code running ...

AudioContext.createJavaScriptNode() - Web APIs
dio data with javascript. important: this method is obsolete, and has been renamed to audiocontext.createscriptprocessor(). see also scriptprocessornode. syntax var jsnode = audioctx.createjavascriptnode(buffersize, numinputchannels, numoutputchannels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384. it controls the frequency of callbacks asking for a buffer refill. smaller sizes allow for lower latency and higher for better overall quality. numinputchannels the number of input channels in the audio stream. numoutputchannels the number of output channels in the audio stream. example the following script illustrates the use of createjavascriptnode(): var sinewave = function(context) { var that =...

AudioContext.createMediaElementSource() - Web APIs
specifications specification status comment web audio apithe definition of 'createmediaelementsource()' in that specification. working draft ...

AudioContext.createMediaStreamDestination() - Web APIs
nks array, and a new window (tab) is then opened that points to a url created from the blob. from here, you can play and save the opus file. ...

AudioContext - Web APIs
you need to create an audiocontext before you do anything else, as everything happens inside a context. it's recommended to create one audiocontext and reuse it instead of initializing a new one each time, and it's ok to use a single audiocontext for several different audio source and pipeline concurrently. ...

AudioNode.connect() - Web APIs
another node for further processing. for example, you might send the audio from a mediaelementaudiosourcenode—that is, the audio from an html5 media element such as <audio>—through a band pass filter implemented using a biquadfilternode to reduce noise before then sending the audio along to the speakers. this example creates an oscillator, then links it to a gain node, so that the gain node controls the volume of the oscillator node. var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); audioparam example in this example, we will be altering the gain value of a gainnode using an oscil...

AudioTrack - Web APIs
setting this value to false mutes the track's audio. id read only a domstring which uniquely identifies the track within the media. ...

BaseAudioContext.createScriptProcessor() - Web APIs
annels); parameters buffersize the buffer size in units of sample-frames. if specified, the buffersize must be one of the following values: 256, 512, 1024, 2048, 4096, 8192, 16384. if it's not passed in, or if the value is 0, then the implementation will choose the best buffer size for the given environment, which will be a constant power of 2 throughout the lifetime of the node. this value controls how frequently the audioprocess event is dispatched and how many sample-frames need to be processed each call. lower values for buffersize will result in a lower (better) latency. higher values will be necessary to avoid audio breakup and glitches. it is recommended for authors to not specify this buffer size and allow the implementation to pick a good buffer size to balance between latency and a...

BaseAudioContext.createStereoPanner() - Web APIs
working draft ...

Manipulating video using canvas - Web APIs
canvas c1 is used to dis...

Basic animations - Web APIs
advanced animations we will have a look at some advanced animation techniques and physics in the next chapter. « previousnext » ...

Canvas API - Web APIs
or canvas and webgl powered browser games. processing.js is a port of the processing visualization language. pts.js is a library for creative coding and visualization in canvas and svg. rekapi is an animation key-framing api for canvas. scrawl-canvas is an open-source javascript library for creating and manipulating 2d canvas elements. the zim framework provides conveniences, components, and controls for coding creativity on the canvas — includes accessibility and hundreds of colorful tutorials. note: see the webgl api for 2d and 3d libaries that use webgl. specifications specification status comment html living standardthe definition of 'the 2d rendering context' in that specification. living standard ...

Channel Messaging API - Web APIs
could then respond by sending a message back to the original document using messageport.postmessage. when you want to stop sending messages down the channel, you can invoke messageport.close to close the ports. find out more about how to use this api in using channel messaging. channel messaging interfaces messagechannel creates a new message channel to send messages across. messageport controls the ports on the message channel, allowing sending of messages from one port and listening out for them arriving at the other. portcollection an array of messageports; an experimental solution to allow broadcasting of a message to multiple ports simultaneously. examples we have published a channel messaging basic demo on github (run it live too), which shows a really simple single message ...

console - Web APIs
rguments with this method. examples outputting text to the console the most frequently-used feature of the console is logging of text and other data. there are four categories of output you can generate, using the console.log(), console.info(), console.warn(), and console.error() methods respectively. 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. there are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of objects to replace them. outputting a s...

Constraint validation API - Web APIs
however, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. this can be done using the constraint validation api. note: client-side constraint validation doesn't remove the need for validation on the server side. ...

ConvolverNode.normalize - Web APIs
its default value is true in order to achieve a more uniform output level from the convolver, when loaded with diverse impulse responses. if normalize is set to false, then the convolution will be rendered with no pre-processing/scaling of the impulse response. changes to this value do not take effect until the next time the buffer attribute is set. syntax var audioctx = new audiocontext(); var convolver = audioctx.createconvolver(); convolver.normalize = false; value a boolean. ...

ConvolverNode - Web APIs
hannel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance. properties inherits properties from its parent, audionode. convolvernode.buffer a mono, stereo, or 4-channel audiobuffer containing the (possibly multichannel) impulse response used by the convolvernode to create the reverb effect. 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. methods no specific method; inherits methods from its parent, audionode. convolvernode example the following example shows basic usage of an audiocontext to create a convolver node. note: you will need to find an impulse response to complete the example belo...

CustomElementRegistry.define() - Web APIs
don't inherit from built-in html elements. customized built-in element: these elements inherit from — and extend — built-in html elements. syntax customelements.define(name, constructor, options); parameters name name for the new custom element. note that custom element names must contain a hyphen. constructor constructor for the new custom element. options optional object that controls how the element is defined. one option is currently supported: extends: string specifying the name of a built-in element to extend. used to create a customized built-in element. return value void. exceptions exception description notsupportederror the customelementregistry already contains an entry with the same name or the same constructor (or is otherwis...

DataTransfer.dropEffect - Web APIs
it will affect which cursor is displayed while dragging. for example, when the user hovers over a target drop element, the browser's cursor may indicate which type of operation will occur. when the datatransfer object is created, dropeffect is set to a string value. on getting, it returns its current value. on setting, if the new value is one of the values listed below, then the property's current value will be set to the new value and other values will be ignored. for the dragenter and dragover events, dropeffect will be initialized based on what action the user is requesting. ...

Document.designMode - Web APIs
valid values are "on" and "off". according to the specification, this property is meant to default to "off". firefox follows this standard. the earlier versions of chrome and ie default to "inherit". starting in chrome 43, the default is "off" and "inherit" is no longer supported. in ie6-10, the value is capitalized. syntax var mode = document.designmode; document.designmode = value; value a string indicating whether designmode is (or should be) set to on or off. valid values are on and off. ...

Document.importNode() - Web APIs
with a node that is currently in the document tree. unlike document.adoptnode(), the original node is not removed from its original document. the imported node is a clone of the original. syntax const importednode = document.importnode(externalnode [, deep]); parameters externalnode the external node or documentfragment to import into the current document. deep optional a boolean which controls whether to include the entire dom subtree of the externalnode in the import. if deep is set to true, then externalnode and all of its descendants are copied. if deep is set to false, then only externalnode is imported — the new node has no children. note: in the dom4 specification, deep was an optional argument with a default value of true. this default has changed in the latest s...

Document.requestStorageAccess() - Web APIs
access. to make testing easier, we have added two preferences in about:config that control prompting upon requeststorageaccess() calls: dom.storage_access.auto_grants can be set to false to disable the automatic granting of ephemeral storage access grants. all calls to requeststorageaccess() by origins classified as trackers will trigger a prompt. dom.storage_access.max_concurrent_auto_grants controls the threshold number of storage access grants at which users will begin to receive prompts. for example, if you want to configure firefox to automatically grant access on the first site where requeststorageaccess() is called and then prompt afterwards, you should adjust the value of the dom.storage_access.max_concurrent_auto_grants preference to 1. syntax var promise = document.requeststoragea...

Element.requestFullscreen() - Web APIs
e this change. note: this method must be called while responding to a user interaction or a device orientation change; otherwise it will fail. syntax var promise = element.requestfullscreen(options); parameters options optional a fullscreenoptions object providing options that control the behavior of the transition to full-screen mode. currently, the only option is navigationui, which controls whether or not to show navigation ui while the element is in full-screen mode. the default value is "auto", which indicates that the browser should decide what to do. return value a promise which is resolved with a value of undefined when the transition to full screen is complete. exceptions rather than throw a traditional exception, the requestfullscreen() procedure announces error conditio...

FormData() - Web APIs
those with a name, not disabled and checked (radio buttons and checkboxes) or selected (one or more options within a select). let myform = document.getelementbyid('myform'); let formdata = new formdata(myform); specifications specification status comment xmlhttprequestthe definition of 'formdata()' in that specification. livin...

FullscreenOptions.navigationUI - Web APIs
presented in full-screen mode. syntax let fullscreenoptions = { navigationui: value }; value the value of the navigationui property must be one of the following strings. the default is "auto". "hide" the browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element. "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. "auto" the browser will choose which of the above settings to apply. this is the default value. example in this example, the entire document is placed into full-screen mode by calling requestfullscreen() on the document's document.docu...

Guide to the Fullscreen API - Web APIs
llscreen api to place a given element into full-screen mode, as well as how to detect when the browser enters or exits full-screen mode. activating full-screen mode given an element that you'd like to present in full-screen mode (such as a <video>, for example), you can present it in full-screen mode by simply calling its requestfullscreen() method. 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. presentation differences it's worth no...

Gamepad.axes - Web APIs
analog thumb sticks).- each entry in the array is a floating point value in the range -1.0 – 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0). ...

Gamepad.id - Web APIs
act syntax is not strictly specified, but in firefox it will contain three pieces of information separated by dashes (-): two 4-digit hexadecimal strings containing the usb vendor and product id of the controller the name of the controller as provided by the driver. for example, a ps2 controller returned 810-3-usb gamepad. 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. syntax readonly attribute domstring id; example window.addeventlistener("gamepadconnected", function() { var gp = navigator.getgamepads()[0]; gamepadinfo.innerhtml = "gamepad connected at index " + gp.index + ": " + gp.id + "."; }); value a string. specifications specification status comment ...

GlobalEventHandlers.onplay - Web APIs
the onplay property of the globaleventhandlers mixin is the eventhandler for processing play events. syntax element.onplay = handlerfunction; var handlerfunction = element.onplay; handlerfunction should be either null or a javascript function specifying the handler for the event. 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. </video> <p>video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">big buck bunny</a>.</p> <script> function alertplay() { alert("the video has started to play."); } </script> specification specification status ...

HTMLCanvasElement.height - Web APIs
the htmlcanvaselement.height property is a positive integer reflecting the height html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used. this is one of the two properties, the other being htmlcanvaselement.width, that controls the size of the canvas. syntax var pxl = canvas.height; canvas.height = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the height of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.height); // 300 specifications specification status comment html living standardthe definition ...

HTMLCanvasElement.width - Web APIs
the htmlcanvaselement.width property is a positive integer reflecting the width html attribute of the <canvas> element interpreted in css pixels. when the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used. this is one of the two properties, the other being htmlcanvaselement.height, that controls the size of the canvas. syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); // 300 specifications specification status comment html living standardthe definition of 'h...

HTMLElement - Web APIs
lculations are currently computed. htmlelement.offsettop read only returns a double, the distance from this element's top border to its offsetparent's top border. htmlelement.offsetwidth read only returns a double containing the width of an element, relative to the layout. htmlelement.properties read only returns a htmlpropertiescollection… htmlelement.spellcheck is a boolean that controls spell-checking. it is present on all html elements, though it doesn't have an effect on all of them. htmlelement.style is a cssstyledeclaration, an object representing the declarations of an element's style attributes. htmlorforeignelement.tabindex is a long representing the position of the element in the tabbing order. htmlelement.title is a domstring containing the text that appears in a ...

HTMLFieldSetElement - Web APIs
from its parent, htmlelement. htmlfieldsetelement.disabled a boolean reflecting the disabled html attribute, indicating whether the user can interact with the control. htmlfieldsetelement.elementsread only the elements belonging to this field set. the type of this property depends on the version of the spec that is implemented by the browser. htmlfieldsetelement.formread only an htmlformcontrolscollection or htmlcollection referencing the containing form element, if this element is in a form. if the field set is not a descendant of a form element, then the attribute can be the id of any form element in the same document it is related to, or the null value if none matches. htmlfieldsetelement.name a domstring reflecting the name html attribute, containing the name of the field set. thi...

HTMLFormElement.reportValidity() - Web APIs
when false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user. syntax htmlformelement.reportvalidity() return value boolean example document.forms['myform'].addeventlistener('submit', function() { document.forms['myform'].reportvalidity(); }, false); specifications specification status comment html living standardthe definition of 'htmlformelement.reportvalidity()' in that specification. ...

HTMLInputElement.stepDown() - Web APIs
he value to go below the min value set or defy the constraints set by the step attribute. a negative value for n will increment the value, but will not increment beyond the max value. 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. if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown. htmlinputelement.stepdown() decrements the value by (step * n), where n defaults to 1 if not specified. throws an invalid_state_...

HTMLInputElement.stepUp() - Web APIs
ol. the default value for the parameter, if no value is passed, is 1. the method will not cause the value to exceed the set max value, or defy the constraints set by the step attribute. 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. if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown. syntax element.stepup( [ stepincrement ] ); parameters stepincrement the optional stepincrement paremeter is a n...

HTMLMediaElement.autoplay - Web APIs
the media element will begin playback as soon as enough content has loaded to allow it to do so without interruption. note: some browsers offer users the ability to override autoplay in order to prevent disruptive audio or video from playing without permission or in the background. do not rely on autoplay actually starting playback and instead use play event. examples ... ...

HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource. ...

HTMLMediaElement.loop - Web APIs
syntax var loop = video.loop; audio.loop = true; value a boolean. example var obj = document.createelement('video'); obj.loop = true; // true specifications specification status comment html living standardthe definition of 'htmlmediaelement.loop' in that specification. ...

HTMLMediaElement.playbackRate - Web APIs
the normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed. if playbackrate is negative, the media is not played backwards. the audio is muted when the fast forward or slow motion is outside a useful range (for example, gecko mutes the sound outside the range 0.25 to 5.0). the pitch of the audio is corrected by default and is the same for every speed. ...

HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource. ...

HTMLMedia​Element​.textTracks - Web APIs
= mediaelement.texttracks; value a texttracklist object representing the list of text tracks included in the media element. the list of tracks can be accessed using array notation, or using the object's gettrackbyid() method. each track is represented by a texttrack object which provides information about the track. ...

HTMLMediaElement - Web APIs
ependent on autoplay working. htmlmediaelement.buffered read only returns a timeranges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. htmlmediaelement.controller is a mediacontroller object that represents the media controller assigned to the element, or null if none is assigned. 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. the domtokenlist takes one or more of three possible va...

HTMLScriptElement - Web APIs
throughout the specification. these algorithms describe the core ideas, but they rely on the parsing rules for <script> start and end tags in html, in foreign content, and in xml; the rules for the document.write() method; the handling of scripting; and so on. htmlscriptelement.crossorigin is a domstring reflecting the cors setting for the script element. for scripts from other origins, this controls if error information will be exposed. htmlscriptelement.text is a domstring that joins and returns the contents of all text nodes inside the <script> element (ignoring other nodes like comments) in tree order. on setting, it acts the same way as the textcontent idl attribute. note: when inserted using the document.write() method, <script> elements execute (typically synchronously), but w...

HTMLVideoElement - Web APIs
ct() inserts the specified video effect into the media pipeline. htmlvideoelement.msislayoutoptimalforplayback read only indicates whether the video can be rendered more efficiently. htmlvideoelement.msisstereo3d read only determines whether the system considers the loaded video source to be stereo 3-d or not. value set to true indicates source is stereo 3d. htmlvideoelement.mszoom controls whether the video frame is trimmed to fit the video display. methods inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement. htmlvideoelement.getvideoplaybackquality() returns a videoplaybackquality object that contains the current playback metrics. this information includes things like the number of dropped or corrupted frames, as well as the total number ...

The HTML DOM API - Web APIs
vigator window deprecated web app and browser integration interfaces external obsolete web app and browser integration interfaces applicationcache plugin pluginarray form support interfaces these interfaces provide structure and functionality required by the elements used to create and manage forms, including the <form> and <input> elements. 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. canvasgradient canvaspattern canvasrenderingcontext2d imagebitmap imagebitmaprenderingcontext imagedata offscreencanvas offscreencanvasrenderingcontext2d path2d textmetrics medi...

Intersection Observer API - Web APIs
5 4 0.2 14 0.7 5 0.25 15 0.75 6 0.3 16 0.8 7 0.35 17 0.85 8 0.4 18 0.9 9 0.45 19 0.95 10 0.5 20 1.0 we could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. but this example leaves room for adding configuration controls to adjust the granularity, for example. handling intersection changes when the browser detects that the target element (in our case, the one with the id "box") has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, handleintersect(): function handleintersect(entries, observer) { entries.foreach((entry) => { i...

KeyboardEvent.code - Web APIs
e first section of the javascript code establishes some variables we'll be using. shipsize contains the size of the ship the player is moving around, for convenience. position is used to track the position of the ship within the play field. 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. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). finally, spaceship is set to refer to the element with the id "spaceship", which is the svg polygon representing the ship the player controls. let shipsize = { width: 30, height: 30 }; let position = { x: 200, y: 200 }; let moverate = 9; let turnrate = ...

MediaDevices.getUserMedia() - Web APIs
underway. the device's physical light is used to indicate whether or not recording is currently active. if you've muted your camera (so-called "facemuting"), your camera's activity light goes out to indicate that the camera is not actively recording you, without discarding the permission to resume using the camera once muting is over. security there are a number of ways security management and controls in a user agent can cause getusermedia() to return a security-related error. note: the security model for getusermedia() is still somewhat in flux. the originally-designed security mechanism is in the process of being replaced with feature policy, so various browsers have different levels of security support, using different mechanisms. you should test your code carefully on a variety of device...

MediaElementAudioSourceNode - Web APIs
specification specification status comment web audio apithe definition of 'mediaelementaudiosourcenode' in that specification. working draft ...

MediaPositionState.duration - Web APIs
agent to provide a user interface which displays media playback information to the viewer. 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. syntax let positionstate = { duration: durationinseconds }; let durationinseconds = positionstate.duration; value a floating-point value indicating the overall duration, in seconds, of the media being performed. this value should always be positive. to indicate media of unknown or indeterminate length, such as an ongoing live stream, specify a value of positive infinity (infinity). exampl...

MediaPositionState.playbackRate - Web APIs
agent to provide a user interface which displays media playback information to the viewer. 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. syntax let positionstate = { playbackrate: rate }; let playbackrate = positionstate.playbackrate; value a floating-point value specifying a multiplier corresponding to the current relative rate at which the media being performed is playing. a value of 1.0 indicates the media is playing forward at normal speed, while higher values indicate that the media is being played faster than normal. ...

MediaPositionState.position - Web APIs
agent to provide a user interface which displays media playback information to the viewer. 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. syntax let positionstate = { position: timeinseconds }; let duration = positionstate.duration; value a floating-point value indicating the current playback position within the media currently being performed, in seconds. this value should always be zero or more. example in this example, a player for a non-standard media file format, written in javascript, uses setinterval() to establish ...

MediaRecorder.ondataavailable - Web APIs
is available in the dataavailable event's data property. syntax mediarecorder.ondataavailable = function(event) { ... } mediarecorder.addeventlistener('dataavailable', function(event) { ... }) example ... 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); } ... specifications specification status comment mediastream recordingthe definition of 'media...

MediaRecorder.onstop - Web APIs
event, making the blob captured up to that point available for you to use in your application. syntax mediarecorder.onstop = function(event) { ... } mediarecorder.addeventlistener('stop', function(event) { ... }) example ... 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); } ... specifications specification status comment mediastream recordingthe definition of 'mediar...

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
syntax navigator.mediasession.setactionhandler(type, callback) parameters type a domstring representing an action type to listen for. it will be one of play, pause, seekbackward, seekforward, seekto, skipad,previoustrack, or nexttrack. ...

MediaSession - Web APIs
the mediasession interface of the media session api allows a web page to provide custom behaviors for standard media playback interactions, and to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements. for example, a smartphone might have a standard panel in its lock screen that provides controls for media. a browser on that device might deliver the metadata provided by calling mediasession to the device in order to be controllable using the global user interface. properties metadata returns an instance of mediametadata which contains rich media metadata, for display in a platform ui. playbackstate indicates whether the current media session is playing. valid values are none, paused, or playing. me...

msPlayToSource - Web APIs
ndler -- get the playtosource object from an audio, video, or img element using the msplaytosource property and pass it to e.setsource, then set the playtosource.next property to the msplaytosource of another element for continual playing. the property value for msplaytosource is the source associated with the media element. 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. var ptm = windows.media.playto.playtomanager.getforcurrentview(); // step 2: register for the sourcerequested event (user swipes devices charm). ptm.addeventlistener("sourcerequested", function(e) { // step 3: specify the media to be streamed (to filter devices). e...

Navigator.mediaSession - Web APIs
the current playback state of media being handled by a document. this information may, in turn, be shared with the device and/or operating system in order to a device's standard media control user experience to describe and control the playback of the media. 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. syntax let mediasession = navigator.mediasession; value a mediasession object the current document can use to share information ab...

Navigator - Web APIs
properties are supported for media on the user's computer and user agent (mediadevices.getsupportedconstraints()), and to request access to media using mediadevices.getusermedia(). 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. navigator.moznotification deprecated since gecko 22 ... navigator.wakelock read only returns a wakelock interface you can use to request screen wake locks and prevent screen from dimming, turning off, or showing a screen saver. navigator.webkitnotification returns a notification object you can use to deliver notifications to the user from your web application. navigator.oscpu ...

NavigatorPlugins.javaEnabled() - Web APIs
this method indicates whether the current browser is java-enabled or not. 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. specifications specification status comment html living standardthe definition of 'navigatorplugins.javaenabled' in that specification. living standard initial definition. ...

PannerNode.setVelocity() - Web APIs
) method of the pannernode interface defines the velocity vector of the audio source — how fast it is moving and in what direction. this method was removed from the specification because of gaps in its design and implementation problems. the velocity relative to the listener is used to control the pitch change needed to conform with the doppler effect due to the relative speed. 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. the default value of the velocity vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns void. example in the following example, you can see an example of how the createpanner() method, audioliste...

PaymentRequest.show() - Web APIs
called. securityerror the promise rejects with a securityerror if the call to show() was not in response to a user action, such as a click or keyup event. 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. usage notes the most common patterns for using show() involve either the async/await syntax or the use of show().then().catch() to handle the response and any possible rejection. those look like this: async/await syntax using await to wait for a promise to be resolved makes it possible to write the code to handle payments particularly cleanly: async function processpayment() { try { ...

Payment Request API - Web APIs
d are then ready to pay for goods and services on the web. they no longer have to fill out the same details repeatedly across different sites. consistent experience on every site (that supports the api): as the payment sheet is controlled by the browser, it can tailor the experience to the user. this can include localizing the ui into the user's preferred language. 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. a browser could also adjust the font size or color contrast of the payment sheet, making it more comfortable for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directl...

RTCIceCandidate.type - Web APIs
is null, that information was missing from the candidate's a-line, which will cause rtcpeerconnection.addicecandidate() to throw an operationerror exception. example in this example, the candidate's type is used to present a modified user interface for host candidates (those where the ip refers directly to the remote peer, rather than an intermediary). 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. candidate recommendation initial definition. ...

ReadableStream.ReadableStream() - Web APIs
ill be called if the app signals that the stream is to be cancelled (e.g. if readablestream.cancel() is called). the contents should do whatever is necessary to release access to the stream source. if this process is asynchronous, it can return a promise to signal success or failure. the reason parameter contains a domstring describing why the stream was cancelled. type optional this property controls what type of readable stream is being dealt with. if it is included with a value set to "bytes", the passed controller object will be a readablebytestreamcontroller capable of handling a byob (bring your own buffer)/byte stream. if it is not included, the passed controller will be a readablestreamdefaultcontroller. autoallocatechunksize optional for byte streams, the developer can set the aut...

Request.cache - Web APIs
syntax var currentcachemode = request.cache; value a requestcache value. the available values are: default — the browser looks for a matching request in its http cache. if there is a match and it is fresh, it will be returned from the cache. if there is a match but it is stale, the browser will make a conditional request to the remote server. if the server indicates that the resource has not changed, it will be returned from the cache. ...

Screen.mozEnabled - Web APIs
setting it to false will turn off the screen. ...

Screen - Web APIs
t screen. screen.orientation returns the screenorientation instance associated with this screen. screen.pixeldepth gets the bit depth of the screen. screen.top returns the distance in pixels from the top side of the current screen. screen.width returns the width of the screen. screen.mozenabled boolean. setting to false will turn off the device's screen. screen.mozbrightness controls the brightness of a device's screen. a double between 0 and 1.0 is expected. events handler screen.onorientationchange a handler for the orientationchange event. methods screen.lockorientation lock the screen orientation (only works in fullscreen or for installed apps) screen.unlockorientation unlock the screen orientation (only works in fullscreen or for installed apps) methods...

ServiceWorkerRegistration.active - Web APIs
syntax var serviceworker = serviceworkerregistration.active; value a serviceworker object's property, if it is currently in an activated state. ...

SourceBuffer.appendWindowEnd - Web APIs
coded media frames with timestamps wthin this range will be appended, whereas those outside the range will be filtered out. the default value of appendwindowend is positive infinity. syntax var myappendwindowend = sourcebuffer.appendwindowend; sourcebuffer.appendwindowend = 120.0; value a double, indicating the end time of the append window, in seconds. exceptions the following exceptions may be thrown when setting a new value for this property. ...

SourceBuffer.appendWindowStart - Web APIs
coded media frames with timestamps wthin this range will be appended, whereas those outside the range will be filtered out. the default value of appendwindowstart is the presentation start time, which is the beginning time of the playable media. syntax var myappendwindowstart = sourcebuffer.appendwindowstart; sourcebuffer.appendwindowstart = 2.0; value a double, indicating the start time of the append window, in seconds. ...

SourceBuffer.mode - Web APIs
the two available values are: segments: the media segment timestamps determine the order in which the segments are played. the segments can be appended to the sourcebuffer in any order. sequence: the order in which the segments are appended to the sourcebuffer determines the order in which they are played. segment timestamps are generated automatically for the segments that observe this order. the mode value is initially set when the sourcebuffer is created using mediasource.addsourcebuffer(). ...

SourceBuffer.timestampOffset - Web APIs
the initial value of timestampoffset is 0. syntax var myoffset = sourcebuffer.timestampoffset; sourcebuffer.timestampoffset = 2.5; value a double, with the offset amount expressed in seconds. exceptions the following exceptions may be thrown when setting a new value for this property. exception explanation invalidstateerror one or more of the sourcebuffer objects in mediasource.sourcebuffers are being updated (i.e. ...

SpeechRecognition.continuous - Web APIs
it defaults to single results (false.) syntax var mycontinuous = myspeechrecognition.continuous; myspeechrecognition.continuous = true; value a boolean representing the current speechrecognition's continuous status. true means continuous, and false means not continuous (single result each time.) examples this code is excerpted from our speech color changer example. ...

SpeechRecognition.interimResults - Web APIs
the speechrecognitionresult.isfinal property is false.) the default value for interimresults is false. syntax var myinterimresult = myspeechrecognition.interimresults; myspeechrecognition.interimresults = false; value a boolean representing the state of the current speechrecognition's interim results. true means interim results are returned, and false means they aren't. examples this code is excerpted from our speech color changer example. ...

SpeechRecognition - Web APIs
grammars returns and sets a collection of speechgrammar objects that represent the grammars that will be understood by the current speechrecognition. speechrecognition.lang returns and sets the language of the current speechrecognition. if not specified, this defaults to the html lang attribute value, or the user agent's language setting if that isn't set either. 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. the speechrecognitionresult.isfinal property is false.) speechrecognition.maxalternatives sets the maximum number o...

StereoPannerNode.pan - Web APIs
working draft ...

StereoPannerNode - Web APIs
working draft initial definition ...

TextTrack.mode - Web APIs
the texttrack interface's mode property is a string specifying and controlling the text track's mode: disabled, hidden, or showing. you can read this value to determine the current mode, and you can change this value to switch modes. 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. syntax var mode = texttrack.mode; texttrack.mode = "disabled" | "hidden" | "showing"; value a domstring which indicates the track's current mode. the text track mode is one of the values listed below, under text track mode constants. text track mode constants the text track mode—sometimes identified using the idl enum texttrackmode—must be one of the following values: disabled the te...

TextTrack - Web APIs
properties this interface also inherits properties from eventtarget. texttrack.activecues read only a texttrackcuelist object listing the currently active set of text track cues. track cues are active if the current playback position of the media is between the cues' start and end times. thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed. texttrack.cues read only a texttrackcuelist which contains all of the track's cues. ...

VideoTrack.selected - Web APIs
syntax isvideoselected = videotrack.selected; videotrack.selected = true | false; value the selected property is a boolean whose value is true if the track is active. only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive. ...

VideoTrack - Web APIs
only a single video track can be active at any given time, so setting this property to true for one track while another track is active will make that other track inactive. ...

Visual Viewport API - Web APIs
n. when the user pinch-zooms into the page, the visual viewport shrinks but the layout viewport is unchanged. user-interface features like the on-screen keyboard (osk) can shrink the visual viewport without affecting the layout viewport. what happens when a web page element needs to be visible on screen regardless of the visible portion of a web page? for example, what if you need a set of image controls to remain on screen regardless of the pinch zoom level of the device? current browsers vary in how they handle this. the visual viewport lets web developers solve this by positioning elements relative to what's shown on screen. to access a window's visual viewport, you can obtain a visualviewport object from the window.visualviewport property. the object includes a set of properties describing ...

WebGLRenderingContext.stencilMask() - Web APIs
the webglrenderingcontext.stencilmaskseparate() method can set front and back stencil writemasks to different values. syntax void gl.stencilmask(mask); parameters mask a gluint specifying a bit mask to enable or disable writing of individual bits in the stencil planes. by default, the mask is all 1. return value none. examples gl.stencilmask(110101); to get the current stencil masks, query the stencil_writemask, stencil_back_writemask, or stencil_bits constants. ...

WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the webglrenderingcontext.stencilmask() method can set both, the front and back stencil writemasks to one value at the same time. syntax void gl.stencilmaskseparate(face, mask); parameters face a glenum specifying whether the front and/or back stencil writemask is updated. the possible values are: gl.front gl.back gl.front_and_back mask a gluint specifying a bit mask to enable or disable writing of individual bits in the stencil planes. by default, the mask is all 1. return value none. ...

WebGLRenderingContext - Web APIs
th values. webglrenderingcontext.samplecoverage() specifies multi-sample coverage parameters for anti-aliasing effects. webglrenderingcontext.stencilfunc() sets the both front and back function and reference value for stencil testing. webglrenderingcontext.stencilfuncseparate() sets the front and/or back function and reference value for stencil testing. 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. webglrenderingcontext.stencilop() sets both the front and back-facing stencil test actions. webglrenderingcontext.stencilopseparate() sets the fro...

Using textures in WebGL - Web APIs
e drawscene() function, both where it is defined and where it is called. drawscene(gl, programinfo, buffers, texture, deltatime); ... function drawscene(gl, programinfo, buffers, texture, deltatime) { at this point, the rotating cube should be good to go. 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. in order for your content to load a texture from another domain, cors approval needs to be be obtained. see http access control for details on cors. because webgl now requires textures to be loaded from secure contexts, you can't use textures loaded from file:/// urls in webgl. that means that you'll need a secure web server to test and deploy your code. for local testing, see our guide how do ...

Using DTMF with WebRTC - Web APIs
gger creating and connecting the two rtcpeerconnection objects, then sending the dtmf tones. a <div> to receive and display log text to show status information. <p>this example demonstrates the use of dtmf in webrtc. 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. keep in mind that the process of establishing the connection is somewhat contrived here; you normally don't build both ends of the connection in the same document. global variables first, we establish global variables. let dialstring = "12024561111"...

Web Video Text Tracks Format (WebVTT) - Web APIs
mage: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } video::cue(b) { color: peachpuff; } here, all video elements are styled to use a gray linear gradient as their backgrounds, with a foreground color of "papayawhip". in addition, text boldfaced using the <b> element are colored "peachpuff". the html snippet below actually handles displaying the media itself. <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. in this case, you insert your css rules into the file with each rule preceded by the string "style" all by itelf on a line of text, as shown below: webvtt style ::cue { background-image: linear-gradient(to bottom, dimgray, lightgray);...

Fundamentals of WebXR - Web APIs
augmented reality, which blends virtual objects with the user's true physical environment. another key difference is that webxr has integrated support for the advanced input controllers that are used with most mixed reality headsets, while webvr relied on the gamepad api to support the controllers. 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. basic concepts before getting into too much detail, let's consider some basic concepts that you need to know before you learn how to develop xr code. field of view the term field of view (fov) is one which applies to any visual technology, from old film cameras to modern digital video cameras, including the c...

Lighting a WebXR setting - Web APIs
ht shining upon a stucco wall at night. spot light sources a spot light source (or spotlight) is a light source which is located at a specific position, emitting a cone of light in the direction of its orientation vector. 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. at the edge of the light cone, the light ceases to affect the surface at all. computational costs of lighting to be visible, a scene must include lighting of some sort, so all or nearly all scenes will have at least one light source and may have a great many of them. each light source substantially increases the amount of calculation needed to determine the f...

WebXR permissions and security - Web APIs
and/or camera, get permission to use immersive vr mode (if applicable), and so forth. the variety of hardware and software involved in xr brings multiple apis and technologies into play. in this guide, we'll cover how to ensure your app has the permissions it needs to provide a secure and private xr experience. introduction the webxr device api is subject to a number of permission and security controls. while not onerous, they are worth being aware of. these mostly revolve around the fully-immersive immersive-vr session mode, but there are things to be aware of when setting up an ar session, as well. immersive presentation of vr first, any requests to activate the immersive-vr mode are rejected if the domain issuing the request does not have permission to enable an immersive session. this per...

Rendering and the WebXR frame animation callback - Web APIs
ng to be simulated. in racing games there may be cars or other vehicles, with moving parts to animate including the wheels. if there's water in the scene, it needs ripples or waves to look realistic. parts of structures may be moving, such as doors, walls and floors (for some types of games), and so forth. another common source of motion is the player themself. 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. see the article movement, orientation, and motion for details and a thorough example of how this works. next steps once you've got your renderer written—or at least got something that works, even if it's not finished—you can begin to deal with the camera and its movement...

Starting up and shutting down a WebXR session - Web APIs
common cause for reset events is when a bounded reference space (a reference space whose xrreferencespacetype is bounded-floor) has its geometry as specified by the xrboundedreferencespace's property boundsgeometry change. for more common causes of reference space resets and more details and sample code, see the documentation for the reset event. detecting when the available set of webxr input controls changes webxr maintains a list of input controls which is specific to the webxr system. these devices include things such as the handheld controllers, motion-sensing cameras, motion-sensitive gloves and other feedback devices. when the user connects or disconnects a webxr controller device, the inputsourceschange event is dispatched to the xrsession. this is an opportunity to notify the user of ...

Using the Web Animations API - Web APIs
aks down nicely for demonstration purposes. the css version here’s a tumbling animation written in css showing alice falling down the rabbit hole that leads to wonderland (see the full code on codepen): notice that the background moves, alice spins, and her color changes at an offset from her spinning. we’re going to focus on just alice for this tutorial. ...

Web Animations API - Web APIs
dom elements. it does so by combining two models: the timing model and the animation model. concepts and usage the web animations api provides a common language for browsers and developers to describe animations on dom elements. to get more information on the concepts behind the api and how to use it, read using the web animations api. web animations interfaces animation provides playback controls and a timeline for an animation node or source. can take an object created with the keyframeeffect() constructor. keyframeeffect describes sets of animatable properties and values, called keyframes and their timing options. these can then be played using the animation() constructor. animationtimeline represents the timeline of animation. this interface exists to define timeline features (inhe...

Web Audio API best practices - Web APIs
ded') { audioctx.resume(); } }, false); you might instead be working with an offlineaudiocontext, in which case you can resume the suspended audio context with the startrendering() method. user control if your website or application contains sound, you should allow the user control over it, otherwise again, it will become annoying. this can be achieved by play/stop and volume/mute controls. the using the web audio api tutorial goes over how to do this. if you have buttons that switch audio on and off, using the aria role="switch" attribute on them is a good option for signalling to assistive technology what the button's exact purpose is, and therefore making the app more accessible. there's a demo of how to use it here. as you work with a lot of changing values within the web aud...

Migrating from webkitAudioContext - Web APIs
instead of setting a gain property directly on an audio source, you connect the source to a gain node and then control the gain using that node's gain parameter. audiobuffersourcenode the gain attribute of audiobuffersourcenode has been removed. the same functionality can be achieved by connecting the audiobuffersourcenode to a gain node. see the following example...

Example and tutorial: Simple synth keyboard - Web APIs
from a table, but it could be calculated algorithmically as well. <div class="container"> <div class="keyboard"></div> </div> the <div> named "container" is the scrollable box that lets the keyboard be scrolled horiontally if it's too wide for the available space. the keys themselves will be inserted into the block of class "keyboard". 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. the volume control first we create the <div> to contain the settings bar, so it can be styled as needed. then we establish a box that will be presented on the left side of the bar and place a label and an <input> element of type "...

Background audio processing using AudioWorklet - Web APIs
throughout the remainder of this article, we'll look at these steps in more detail, with examples (including working examples you can try out on your own). the example code found on this page is derived from this working example which is available on glitch. the example creates an oscillator node and adds white noise to it using an audioworkletnode before playing the resulting sound out. slider controls are available to allow controlling the gain of both the oscillator and the audio worklet's output. glitch project page see the code try it live creating an audio worklet processor fundamentally, an audio worklet processor (which we'll refer to usually as either an "audio processor" or simply as a "processor" because otherwise this article will be about twice as long) is implemented using a...

Web Audio API - Web APIs
s a number of interfaces and associated events, which we have split up into nine categories of functionality. general audio graph definition general containers and definitions that shape audio graphs in web audio api usage. audiocontext the audiocontext interface represents an audio-processing graph built from audio modules linked together, each represented by an audionode. an audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. you need to create an audiocontext before you do anything else, as everything happens inside a context. audiocontextoptions the audiocontextoptions dictionary is used to provide options when instantiating a new audiocontext. audionode the audionode interface represents an audio-processing module like...

Using the Web Storage API - Web APIs
// yippee! we can use localstorage awesomeness } else { // too bad, no localstorage for us } you can test for sessionstorage instead by calling storageavailable('sessionstorage'). see here for a brief history of feature-detecting localstorage. example to illustrate some typical web storage usage, we have created an example, imaginatively called web storage demo. 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. we have also provided an event output page — if you load this page in another tab, then make changes to your choices...

Web Storage API - Web APIs
local storage objects respectively, and a window.onstorage event handler that fires when a storage area changes (e.g. a new item is stored.) storageevent the storage event is fired on a document's window object when a storage area changes. examples to illustrate some typical web storage usage, we have created a simple example, imaginatively called web storage demo. the landing page provides controls that can be used to customize the colour, 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 then load it again later on your choices are remembered. in addition, we have provided an event output page — if you load this page in another tab, then make changes to your ch...

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
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort(). ...

XMLHttpRequest: error event - Web APIs
the error event is fired when the request encountered an error. ...

XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully. ...

XMLHttpRequest: loadend event - Web APIs
the loadend event is fired when a request has completed, whether successfully (after load) or unsuccessfully (after abort or error). ...

XMLHttpRequest: loadstart event - Web APIs
the loadstart event is fired when a request has started to load data. ...

XMLHttpRequest: progress event - Web APIs
the progress event is fired periodically when a request receives more data. ...

XRBoundedReferenceSpace.boundsGeometry - Web APIs
the read-only xrboundedreferencespace property boundsgeometry is an array of dompointreadonly objects which specifies the points making up a polygon inside which the viewer is allowed to move. each point is treated as a two-dimensional point, and must be located at ground level (that is, its y coordinate must be 0). this boundary is typically configured by the user, using the software that controls their xr hardware. this may be done by walking the border of the space they wish to use, or by drawing the shape of their room using their xr input device. theoretically, a more advanced system might use sensors or other detection methods to determine the bounds of a dedicated xr room (notice how we carefully don't call it a holodeck?). syntax bounds = xrreferencespace.boundsgeometry; value the...

XRInputSource.handedness - Web APIs
being held in, worn on, or is attached to the user's left hand. right the input controller is being held in, worn on, or is attached to the user's right hand. usage notes if the input source is not a device associated with a user's hand (whether by being held, attached, or worn), the value of handedness is none. 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. examples one important usage scentario for handedness is to determine which hand a controller is in so you can draw a representation of that hand (or the device that hand is controlling) in virtual space. function updateinputsources(session, frame, refspace) { for (let source of session.inputsources) { if (source.grips...

XRPose - Web APIs
value which is false if the position and orientation given by transform is obtained directly from a full six degree of freedom (6dof) xr device (that is, a device which tracks not only the pitch, yaw, and roll of the head but also the forward, backward, and side-to-side motion of the viewer). 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. example <<<--- todo: needs example --->>> specifications specification status comment webxr device apithe definition of 'xrpose' in that specification. working draft initial definition. ...

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
ationframe(drawframe); }); in this code, we obtain a local reference space, then use getoffsetreferencespace() to create a new space whose origin is adjusted to a position given by startposition and whose orientation is looking directly along the z azis. then the first animation frame is requested using xrsession's requestanimationframe(). implementing rotation based on non-xr inputs the input controls supported directly by webxr are all dedicated vr or ar input devices. in order to use mouse, keyboard, or other input devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the inputs and move perform the movements. this is another good use case for getoffsetreferencespace(). in this example, we'll ...

XRReferenceSpace - Web APIs
on.requestreferencespace("local").then((refspace) => { xrreferencespace = refspace; /* ... */ }); 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. since the origin will typically be the user's location in the space, you need to change the origin to reflect their movement and any orientation changes they make. to move or rotate the user's view of the world, you need to change the xrreferencespace used to represent that viewpoint. however, xrreferencespace is immutable, so you need to instead cre...

XRSystem: requestSession() - Web APIs
rsive-vr' isn't supported, or an error occurred activating vr!"); }); verifying webxr support and using a button to start vr mode the following example shows how to use both issessionsupported() and requestsession(). first, it checks to see if webxr is available by verifying the existence of navigator.xr. 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. finally, the onbuttonclicked() method calls requestsession() using the same session option passed to issessionsupported(). if (navigator.xr) { navigator.xr.issessionsupported('immersive-vr') .then((issupported) => { if (issupported) { immersivebutton.addeventlistener('click', onbuttoncl...

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
g box notes using the alert role on an element implies that element has aria-live="assertive". the alert role should only be used for static text content. the element that the alert role is used on does not have to be able to receive focus, as screen readers will automatically announce the alert regardless of where keyboard focus is currently located. 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. aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources aria best ...

Using the status role - Accessibility
ant enough to justify an alert, and is often presented as a status bar. when the role is added to an element, the browser will send out an accessible status event to assistive technology products which can then notify the user about it. status information content must be provided within a status object, and it should be ensured that this object does not receive focus. if another part of the page controls what appears in the status, the relationship should be made explicit via the aria-controls attribute. assistive technologies may reserve some cells of a braille display to render the status. possible effects on user agents and assistive technology when the status role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as h...

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
ehavior you require already built in, instead of re-purposing an element and adding an aria role, state or property to make it accessible, then do so. then post full details in best practices section below. examples fill in a simple example that nicely shows a typical usage of the property, then perhaps some more complex examples. <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. remove this section if there are none to list. best practices optionally, here list any best practices that exist for this role. remove the section if none exist. added benefits any additiona...

ARIA: application role - Accessibility
se for a blind user to consume the content. this is often referred to as virtual document, browse mode, or similar terms. the document is streamlined to a single-column view. a keyboard interaction model is generated that is very similar to a word processor where users can read line by line, sentence by sentence, or paragraph by paragraph. the at will read any semantics like links, headings, form controls, tables, lists, or images. in addition, a set of so-called quick navigation keys has been established over the years that allows blind users to skim through a page via a certain element type. such elements usually include headings, form fields, lists, tables, links, graphics, or landmark regions. for all of this to work, ats intercept almost all keyboard input and consume it themselves, letting...

ARIA: row role - Accessibility
s aria-expanded state the aria-expanded attribute, which defines the state of the row, can take one of three values, or be omitted: aria-expanded="true: row is currently expanded. aria-expanded="false": row is currently collapsed. aria-expended="undefined" or the attribute is missing: the row is neither expandable nor collapsible. 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-selected state only relevant if the row is in an interactive container, such as a grid or treegrid, but not relevant if the row is in a table. the aria-selected attribute can take one of three values, or be omitted: aria-selec...

ARIA: checkbox role - Accessibility
elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology. <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. ...

ARIA: dialog role - Accessibility
onally, the following needs to be done: the dialog must be properly labeled keyboard focus must be managed correctly the sections below describe how these two requirements can be met. labeling even though it is not required for the dialog itself to be able to receive focus, it still needs to be labeled. 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). if a dialog already has a visible title bar, the text inside that bar can be used to label the dialog itself. the best way to achieve this is by using the aria-labelledby attribute t...

ARIA: textbox role - Accessibility
ction of the intended value. it supports the following values: inline: predicted text is inserted after the caret. list: predicted text is presented as a collection of values. both: predicted text is presented as a collection of values, with the text needed to complete one value inserted after the caret. none (default): predicted text is not offered. 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. additionally, either the textbox or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the list of suggested values. aria-multiline attribute if aria-multiline="true" is set, ...

WAI-ARIA Roles - Accessibility
e used in combination with the aria-pressed attribute to create toggle buttons.aria: cell rolethe cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row.aria: checkbox rolethe checkbox role is used for checkable interactive controls. elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main c...

Web applications and ARIA FAQ - Accessibility
ible rich internet applications specification from the web accessibility initiative at the w3c. aria provides a means to make web applications and widgets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers. aria provides additional semantics to describe the role, state, and functionality of many familiar user interface controls, such as menus, sliders, trees, and dialogs. it also provides additional structural information, helping authors identify landmarks, regions, and grids on their pages. aria enables dynamic, javascript-driven applications and widgets to interoperate with a variety of desktop-based assistive technologies. for more information about how to create accessible widgets with aria, see the overview of ac...

Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
labels, causing it to always override the accessiblename the textbox of an html document gets. with jaws 8, i have not found a way to make it to accept the label from the example above. but nvda and window-eyes do it just fine, and orca on linux also has no problems. tbd: add more compatibility info can this be done without aria? 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. thanks for that info, ben! it is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. this technique works in firefox; however, it doesn't currently work in many other browsers, including ie. for labels with embedded form con...

An overview of accessible web applications and widgets - Accessibility
anel">quiz content goes here</div> </div> example 2: how the tabs widget might be styled visually. users might recognize it visually, but there are no machine-readable semantics for an assistive technology. aria aria enables developers to describe their widgets in more detail by adding special attributes to the markup. 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. many of these were later added in html5, and developers should always prefer using the correct semantic html element over using aria. the aria specification is split up into three different types of attributes: roles, states, and properties. roles describe widgets that are...

Web accessibility for seizures and physical reactions - Accessibility
w3c, blinking is a distraction problem, whereas flashing refers to content that occurs more than 3 times per second, is large enough, and bright enough. section 508 prohibits flickering effects with a frequency greater than 3 hz (flickers per second) and lower than 55 hz. 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. prefers-reduced-motion support for prefers-reduced-motion in modern browsers is growing. @media screen and (prefers-reduced-motion: reduce) { } @media screen and (prefers-reduced-motio...

Color contrast - Accessibility
see the solution section below for further information. having good color contrast on your site benefits all your users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors. this is because they don't see bright an...

Robust - Accessibility
4.1.2 name, role, value (a) the name and role of user interface components (e.g. form inputs, buttons, links, etc.) should be programmatically determinable. when using semantic elements correctly for their intended purpose, this criterion should be passed automatically. 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. not only by sighted mouse users, but also by screenreader users, keyboard-only users, etc. see html: a good basis for accessibility and wai-aria basics. 4.1.3 status messages (aa) added in 2.1 assistive technology users are made aware of new status messages added to the page. understanding status message...

Text labels and names - Accessibility
e a legend to label a fieldset when grouping a set of form elements together with a <fieldset> element, you should include a nested <legend> element inside it, containing a clear description of the group. users of assistive technology find this description helpful when trying to work out the overall purpose of the group. 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. examples <form> <fieldset> <legend>choose your favorite monster</legend> <input type="radio" id="kraken" name="monster"> <label for="kraken">kraken</label><br/> <input type="radio" id="sasquatch" name="monster"> <label for="sasquatch">sasquatch</label><br/> <input type="radio" id=...

Accessibility
css and javascript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. this article outlines some css and javascript best practices that should be considered to ensure even complex content is as accessible as possible. 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. wai-aria is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. here we'll show how to use it at a basic level to improve accessibility. accessible multimedia another category of content ...

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen. touch use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. the speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. also creates a new stacking context. ...

-webkit-touch-callout - CSS: Cascading Style Sheets
when a target is touched and held on ios, safari displays a callout information about the link. this property allows disabling that behavior. /* keyword values */ -webkit-touch-callout: default; -webkit-touch-callout: none; /* global values */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; -webkit-touch-callout: unset; syntax values default the default callout is displayed. none the callout is disabled. ...

::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-webkit-inner-spin-button css pseudo-element is used to style the inner part of the spinner button of number picker input elements. syntax ::-webkit-inner-spin-button examples these examples work only in browsers based on webkit and blink. 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. html <input type="number"> css input[type=number]::-webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard. ...

:blank - CSS: Cascading Style Sheets
note: the :blank selector is considered at risk, as the csswg keeps changing it. see csswg issue #1967. the :blank css pseudo-class selects empty user input elements (eg. <input> or <textarea>). 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. html <textarea></textarea> css textarea:blank { border: 3px solid red; } result specifications specification status comment selectors level 4the definition of ':blank' in that specification. working draft initial definition. ...

@font-face - CSS: Cascading Style Sheets
also inside any css conditional-group at-rule. 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. @font-face cannot be declared within a css selector. for example, the following will not work: .classname { @font-face { font-family: myhelvetica; src: local("helvetica neue bold"), local("helveticaneue-bold"), url(mgopenmodernabold.ttf); font-weight: bold; } } formal syntax @font-face { [ font-family: <family-name>; ...

@keyframes - CSS: Cascading Style Sheets
this gives more control over the intermediate steps of the animation sequence than transitions. syntax @keyframes slidein { from { transform: translatex(0%); } to { transform: translatex(100%); } } values <custom-ident> a name identifying the keyframe list. this must match the identifier production in css syntax. from a starting offset of 0%. to an ending offset of 100%. <percentage> a percentage of the time through the animation sequence at which the specified keyframe should occur. ...

-ms-high-contrast - CSS: Cascading Style Sheets
es */ } @media screen and (-ms-high-contrast: black-on-white) { div { background-image: url('image-bw.png'); } } @media screen and (-ms-high-contrast: white-on-black) { div { background-image: url('image-wb.png'); } } accessibility concerns theming high contrast mode's theme colors come from a limited subset of deprecated css2 system colors. 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. buttonface: controls the color of a <button> element's text. window: controls the color of the background. the <a> element controls the color of links. because high contrast mode themes are dynamic, use these color keywords in place of other css color va...

orientation - CSS: Cascading Style Sheets
/* keyword values */ orientation: auto; orientation: portrait; orientation: landscape; for a ua/device where the orientation is changed upon tilting the device, an author can use this descriptor to inhibit the orientation change. syntax values auto the user agent will set the document's orientation automatically, typically based on the device's orientation as determined by an accelerometer (if the device has such a hardware sensor), although there is often a user-controlled, os-level "lock orientation" setting that will trump the accelerometer reading. portrait the document should be locked into portrait orientation. ...

user-zoom - CSS: Cascading Style Sheets
/* keyword values */ user-zoom: zoom; user-zoom: fixed; syntax values zoom the user can zoom in or out. fixed the user cannot zoom in or out. accessibility concerns disabling zooming capabilities prevents people experiencing low vision conditions from being able to read and understand page content. ...

viewport-fit - CSS: Cascading Style Sheets
syntax /* keyword values */ viewport-fit: auto; viewport-fit: contain; viewport-fit: cover; values auto this value doesn’t affect the initial layout viewport, and the whole web page is viewable. contain the viewport is scaled to fit the largest rectangle inscribed within the display. cover the viewport is scaled to fill the device display. it is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. this descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet. ...

@viewport - CSS: Cascading Style Sheets
the determination of the height of the viewport when the document is first displayed. max-height used in the determination of the height of the viewport when the document is first displayed. height a shorthand descriptor for setting both min-height and max-height. zoom sets the initial zoom factor. min-zoom sets the minimum zoom factor. max-zoom sets the maximum zoom factor. 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. formal syntax @viewport { <group-rule-body> } examples setting viewport size, zoom, and orientation @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: ...

Box alignment in Flexbox - CSS: Cascading Style Sheets
ia align-content, align-self/align-items main axis alignment justify-content cross axis alignment align-self align-items align-content there is no justify-self in flexbox on the main axis, flexbox deals with our content as a group. the amount of space required to lay out the items is calculated, and the leftover space is then available for distribution. the justify-content property controls how that leftover space is used. set justify-content: flex-end and the extra space is placed before the items, justify-content: space-around and it is placed either side of the item in that dimension, etc. this means that a justify-self property does not make sense in flexbox as we are always dealing with moving the entire group of items around. on the cross axis align-self makes sense as we po...

Handling content breaks in multicol - CSS: Cascading Style Sheets
breaks before and after boxes the break-before and break-after properties are used to control breaks before and after elements. they take the following values when in a multicol context: auto avoid avoid-column column in this next example, we are forcing a column break before an h2 element. breaks between lines the orphans and widows properties are also useful. 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. the orphans and widows properties take an integer as a value, which represents the number of lines to keep together at the end and start of a fragment, respectively. note that these properties only work inside a block container, such as a paragraph...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
s value of the display property is a new value that is described in the spec as follows: “the element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. 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. this is much easier to see with an example. in the following live example i have a flex container with thr...

Typical use cases of Flexbox - CSS: Cascading Style Sheets
lay of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. the media object now displays the other way around. i have achieved this in the live example by adding a class of flipped alongside the existing .media class. this means you can see how the display changes by removing that class from the html. form controls flexbox is particularly useful when it comes to styling form controls. forms have lots of markup and lots of small elements that we typically want to align with each other. a common pattern is to have an <input> element paired with a <button>, perhaps for a search form or where you simply want your visitor to enter an email address. flexbox makes this type of layout easy to achieve. i have cont...

Flow Layout and Overflow - CSS: Cascading Style Sheets
ains how overflow works when working with normal flow. what is overflow? giving an element a fixed height and width, then adding significant content to the box, creates a basic overflow example: the content goes into the box. once it fills the box, it continues to overflow in a visible way, displaying content outside the box, potentially displaying under subsequent content. the property that controls how overflow behaves is the overflow property which has an initial value of visible. this is why we can see the overflow content. controlling overflow there are other values that control how overflow content behaves. to hide overflowing content use a value of hidden. this may cause some of your content to not be visible. using a value of scroll contains the content in its box and add scrollb...

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
grid-placement properties only for visual, not logical, reordering of content. style sheets that use these features to perform logical reordering are non-conforming. what does this mean for designing with grid layout in practice? visual not logical re-ordering any time you reorder things with grid layout – or with flexbox – you only perform visual reordering. the underlying source is what controls things like text to speech, and the tab order of the document. you can see how this works with a very simple example. in this example i have used grid to lay out a set of boxes that contain links. i have used the line-based placement properties to position box 1 on the second row of the grid. visually it now appears as the fourth item in the list. however, if i tab from link to link the tab orde...

CSS Ruby Layout - CSS: Cascading Style Sheets
ruby annotation is a form of interlinear annotation, consisting of short runs of text alongside the base text. they are typically used in east asian documents to indicate pronunciation or to provide a short annotation. ...

Replaced elements - CSS: Cascading Style Sheets
urther information. replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <input> element can be replaced, because <input> elements of the "image" type are replaced elements similar to <img>. 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"). objects inserted using the css content property are anonymous replaced elements. they are "anonymous" because they don't exist in the html markup. using css with replaced elements css handles replaced elements specifi...

Viewport concepts - CSS: Cascading Style Sheets
ual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. 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. it should preferably be set to device-width, which is the width of the screen in css pixels at a scale of 100%. there are other properties, including maximum-scale, minimum-scale, and user-scalable, which control whether users can zoom the page in or out, but the default values are the best for accessibility and user experience, so these can be omitted. see also @vie...

align-items - CSS: Cascading Style Sheets
the interactive example below demonstrates some of the values for align-items using grid layout. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

<color> - CSS: Cascading Style Sheets
ollbar arrow box. should be used with the activecaption background color. inactiveborder inactive window border. inactivecaption inactive window caption. should be used with the inactivecaptiontext foreground color. inactivecaptiontext color of text in an inactive caption. should be used with the inactivecaption background color. infobackground background color for tooltip controls. should be used with the infotext foreground color. infotext text color for tooltip controls. should be used with the infobackground background color. menu menu background. should be used with the menutext or -moz-menubartext foreground color. menutext text in menus. should be used with the menu background color. scrollbar background color of scroll bars. threeddarkshad...

column-fill - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* global values */ column-fill: inherit; column-fill: initial; column-fill: unset; the column-fill property is specified as one of the keyword values listed below. the initial value is balance so the content will be balanced across the columns. values auto columns are filled sequentially. ...

<filter-function> - CSS: Cascading Style Sheets
() makes the image transparent. saturate() super-saturates or desaturates the input image. sepia() converts the image to sepia. examples filter function comparison this example provides a simple graphic, along with a select menu to allow you to choose between the different types of filter function, and a slider to allow you to vary the values used inside the filter function. updating the controls updates the filter effect in real time, allowing you to investigate the effects of different filters. html <div></div> <ul> <li> <label for="filter-select">choose a filter function:</label> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option...

font-feature-settings - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

font-language-override - CSS: Cascading Style Sheets
/* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells browsers to display glyphs designed specifically for that language. ...

font-smooth - CSS: Cascading Style Sheets
syntax /* keyword values */ font-smooth: auto; font-smooth: never; font-smooth: always; /* <length> value */ font-smooth: 2em; webkit implements a similar property, but with different values: -webkit-font-smoothing. it only works on mac os x/macos. auto - let the browser decide (uses subpixel anti-aliasing when available; this is the default) none - turn font smoothing off; display text with jagged sharp edges. antialiased - smooth the font on the level of the pixel, as opposed to the subpixel. switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter. ...

font-synthesis - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax this property can take any one of the following forms: the keyword value none. either of the keyword values weight and style. both the keyword values weight and style. values none indicates that neither bold nor italic typeface may be synthesized. weight indicates that a bold typeface may be synthesized if needed. style indicates that an italic typeface may be synthesized if needed. ...

font-variant-alternates - CSS: Cascading Style Sheets
these alternate glyphs may be referenced by alternative names defined in @font-feature-values. ...

font-variant-caps - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. when a given font includes capital letter glyphs of multiple different sizes, this property selects the most appropriate ones. if petite capital glyphs are not available, they are rendered using small capital glyphs. if these are not present, the browser synthesizes them from the uppercase glyphs. ...

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-east-asian: normal; font-variant-east-asian: ruby; font-variant-east-asian: jis78; /* <east-asian-variant-values> */ font-variant-east-asian: jis83; /* <east-asian-variant-values> */ font-variant-east-asian: jis90; /* <east-asian-variant-values> */ font-variant-east-asian: jis04; /* <east-asian-variant-values> */ font-variant-east-asian: simplified; /* <east-asian-variant-values> */ font-variant-east-asian: traditional; /* <east-asian-variant-values> */ font-variant-east-asian: full-width; /* <east-asian-width-values> */ font-variant-east-asian: proportional-width; /* <east-asian-wi...

font-variant-ligatures - CSS: Cascading Style Sheets
this leads to more harmonized forms in the resulting text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

font-variant-position - CSS: Cascading Style Sheets
the glyphs are positioned relative to the baseline of the font, which remains unchanged. these glyphs are typically used in <sub> and <sup> elements. /* keyword values */ font-variant-position: normal; font-variant-position: sub; font-variant-position: super; /* global values */ font-variant-position: inherit; font-variant-position: initial; font-variant-position: unset; when the usage of these alternate glyphs is activated, if one character in the run doesn't have such a typographically-enhanced glyph, the whole set of characters of the run is rendered using a fallback method, synthesizing these glyphs. ...

font - CSS: Cascading Style Sheets
style css property. <'font-variant'> see the font-variant css property. <'font-weight'> see the font-weight css property. <'font-stretch'> see the font-stretch css property. <'font-size'> see the font-size css property. <'line-height'> see the line-height css property. <'font-family'> see the font-family css property. system font values caption the system font used for captioned controls (e.g., buttons, drop-downs, etc.). icon the system font used to label icons. menu the system font used in menus (e.g., dropdown menus and menu lists). message-box the system font used in dialog boxes. small-caption the system font used for labeling small controls. status-bar the system font used in window status bars. prefixed system font keywords browsers often implement several more...

grid-auto-flow - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column dense; /* global values */ grid-auto-flow: inherit; grid-auto-flow: initial; grid-auto-flow: unset; this property may take one of two forms: a single keyword: one of row, column, or dense. two keywords: row dense or column dense. ...

ime-mode - CSS: Cascading Style Sheets
this property is obsolete. /* keyword values */ ime-mode: auto; ime-mode: normal; ime-mode: active; ime-mode: inactive; ime-mode: disabled; /* global values */ ime-mode: inherit; ime-mode: initial; ime-mode: unset; the ime-mode property is only partially and inconsistently implemented in browsers. it was introduced by microsoft with internet explorer 5 as a proprietary extension: -ms-ime-mode attribute | imemode property. note: in general, it's not appropriate for a public web site to change the ime mode. this property should only be used for private web applications or to undo the property if it was previously set by legacy code. ...

Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, which by default are set to the computed value of the parent element non-inherited properties, which by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no"). inherited properties when no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. only the root element of the document gets the initial value given in the property's summary. ...

min() - CSS: Cascading Style Sheets
ximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function). 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. let's look at some css: input, label { padding: 2px; box-sizing: border-box; display: inline-block; width: min(40%, 400px); background-color: pink; } form { margin: 4px; border: 1px solid black; padding: 4px; } here, the form itself, along with the margin, border, and padding, will be 100% of...

text-decoration-skip - CSS: Cascading Style Sheets
note: most other browsers are converging on supporting the simpler text-decoration-skip-ink property. ...

text-size-adjust - CSS: Cascading Style Sheets
other browsers will ignore this property. /* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...

user-select - CSS: Cascading Style Sheets
this doesn't have any effect on content loaded as chrome, except in textboxes. ...

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
most commonly supported protocol used to transfer media on demand or live. rtmp real time messaging protocol (rtmp) is a proprietary protocol developed by macromedia (now adobe) and supported by the adobe flash plugin. rtmp comes in various flavours including rtmpe (encrypted), rtmps (secure over ssl/tls) and rtmpt (encapsulated within http requests). 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. using rtp with rtcp allows for adaptive streaming. this is not yet supported natively in most browsers, but be aware that firefox os 1.3 supports rtsp. note: some vendors implement propriety transport protocols, such as realnetw...

Content categories - Developer guides
rame>, <img>, <math>, <object>, <picture>, <svg>, <video>. interactive content interactive content includes elements that are specifically designed for user interaction. elements that belong to this category include: <a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select>, and <textarea>. 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. el...

HTML5 Parser - Developer guides
the new parser is faster, complies with the html5 standard, and enables a lot of new functionality as well. the new parser introduces these major improvements: you can now use svg and mathml inline in html5 pages, without xml namespace syntax. parsing is now done in a separate thread from firefox’s main ui thread, improving overall browser responsiveness. calls to innerhtml are a lot faster. ...

HTML5 - Developer guides
r use by extensions and mozilla-based applications. focus management in html the new html5 activeelement and hasfocus attributes are supported. web-based protocol handlers you can now register web applications as protocol handlers using the navigator.registerprotocolhandler() method. requestanimationframe allows control of animations rendering to obtain optimal performance. fullscreen api controls the usage of the whole screen for a web page or application, without the browser ui displayed. pointer lock api allows locking the pointer to the content, so games and similar applications don't lose focus when the pointer reaches the window limit. online and offline events in order to build a good offline-capable web application, you need to know when your application is actually offline. in...

Developer guides
formdata objects the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest. it's primarily intended for sending form data, but can be used independently from forms to transmit keyed data. the transmission is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data". 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. glossary defines numerous technical terms rela...

The HTML autocomplete attribute - HTML: Hypertext Markup Language
endpoint, such as "xmpp:username@example.net". "url" a url, such as a home page or company web site address as appropriate given the context of the other fields in the form. "photo" the url of an image representing the person, company, or contact information given in the other fields in the form. see the whatwg standard for more detailed information. 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. the persistence feature is enabled by default. setting the value of the autocomplete attribute to off disables this feature. this works even when the autocomplete attribute would normally not ap...

HTML attribute: required - HTML: Hypertext Markup Language
ing on the optionality of the element. attribute interactions because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified. usability when including the required attribute, provide a visible indication near the control informing the user that the input, select or textarea is required. in addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. this improves usability for sited user. assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet. constraint validation if the eleme...

HTML attribute: step - HTML: Hypertext Markup Language
ion. specifications specification status comment html living standardthe definition of 'step attribute' in that specification. living standard html5the definition of 'step attribute' in that specification. recommendation accessibility concerns provide instructions to help users understand how to complete the form and use individual form controls. indicate any required and optional input, data formats, and other relevant information. when using the min attribute, ensure this minimum requirement is understood by the user. providing instructions within the <label> may be sufficient. if providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby. ...

<button>: The Button element - HTML: Hypertext Markup Language
e the name of the button, submitted as a pair with the button’s value as part of the form data. type the default behavior of the button. possible values are: submit: the button submits the form data to the server. this is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value. reset: the button resets all the controls to their initial values, like <input type="reset">. (this behavior tends to annoy users.) button: the button has no default behavior, and does nothing when pressed by default. it can have client-side scripts listen to the element's events, which are triggered when the events occur. value defines the value associated with the button’s name when it’s submitted with the form data. this v...

<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. content categories flow content, phrasing content. permitted content either phrasing content or zero or more <option> elements. tag omission none, both the starting and ending tag are mandatory. ...

<input type="button"> - HTML: Hypertext Markup Language
the dynamic disabled state of a <button> across page loads. use the autocomplete attribute to control this feature. validation buttons don't participate in constraint validation; they have no real value to be constrained. examples the below example shows a very simple drawing app created using a <canvas> element and some simple css and javascript (we'll hide the css for brevity). the top two controls allow you to choose the color and size of the drawing pen. the button, when clicked, invokes a function that clears the canvas. <div class="toolbar"> <input type="color" aria-label="select pen color"> <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> <input type="button" value="clear canvas"> </div> <canvas class="mycanvas"> <p>a...

<input type="month"> - HTML: Hypertext Markup Language
examples in this example, we create two sets of ui elements, each designed to let the user select a month and year. the first is a native month input, and the other is a pair of <select> elements that allow choosing a month and year independently, for compatibil...

<input type="number"> - HTML: Hypertext Markup Language
e's a simple example: <input type="number" placeholder="1.0" step="0.01" min="0" max="10"> see that this example allows any value between 0.0 and 10.0, with decimals to two places. for example, "9.52" is valid, but "9.521" is not. controlling input size <input> elements of type number don't support form sizing attributes such as size. you'll have to resort to css to change the size of these controls. for example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far: <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> then we add some css to narrow the width of the element with...

<input type="password"> - HTML: Hypertext Markup Language
. this example expands on the previous one by specifying that the user's pin must be at least four and no more than eight digits. the size attribute is used to ensure that the password entry control is eight characters wide. <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. html <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript document.getelementbyid("selectall").onclick = function() { document.getelementbyid("userpassword").select(); } result you can also use selectionstart an...

<input type="search"> - HTML: Hypertext Markup Language
the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not includ...

<input type="text"> - HTML: Hypertext Markup Language
the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not includ...

<input type="url"> - HTML: Hypertext Markup Language
the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not includ...

<section>: The Generic Section element - HTML: Hypertext Markup Language
ly, but not always, sections have a heading. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as an example, a navigation menu should be wrapped in a <nav> element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a <section>. note: if the contents of the element would make sense syndicated as a standalone piece, the <article> element may be a better choice. content categories flow content, sectioning content, palpable content. permitted content flow content. tag omission none, both the starting and ending tag are...

<textarea> - HTML: Hypertext Markup Language
bute. the <textarea> element also accepts several attributes common to form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required. attributes this element includes the global attributes. autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. the non-deprecated values are available in ios 5 and later. possible values are: none: completely disables automatic capitalization. sentences: automatically capitalize the first letter of sentences. words: automatically capitalize the first letter of words. characters: automatically ...

<track>: The Embed Text Track element - HTML: Hypertext Markup Language
kelement. ...

autocapitalize - HTML: Hypertext Markup Language
the attribute must take one of the following values: off or none: no autocapitalization is applied (all letters default to lowercase) on or sentences: the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words: the first letter of each word defaults to a capital letter; all other letters default to lowercase characters: all letters should default to uppercase the autocapitalize attribute doesn’t affect behavior when typing on a physical keyboard. ...

title - HTML: Hypertext Markup Language
r this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements. multiline titles the title attribute may contain several lines. each u+000a line feed (lf) character represents a line break. some caution must be taken, as this means the following renders across two lines: html <p>newlines in <code>title</code> should be taken ...

Global attributes - HTML: Hypertext Markup Language
seeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting. list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer keyboard layout. autocapitalize controls whether and how text input is automatically capitalized as it is entered/edited by the user. it can have the following values: off or none, no autocapitalization is applied (all letters default to lowercase) on or sentences, the first letter of each sentence defaults to a capital letter; all other letters default to lowercase words, the first letter of each word defaults to a capital lett...

Inline elements - HTML: Hypertext Markup Language
a new line to begin in the document flow. block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using css). ...

Preloading content with rel="preload" - HTML: Hypertext Markup Language
nly download it if so, ignoring it if not. you can see an example of this in our video example (see the full source code, and also the live version): <head> <meta charset="utf-8"> <title>video preload example</title> <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> <link rel="preload" href="sintel-short.webm" as="video" type="video/webm"> </head> <body> <video controls> <source src="sintel-short.mp4" type="video/mp4"> <source src="sintel-short.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> </video> </body> so in this case, browsers that support mp4s will preload and use the mp4, making the video player hopefully smoother/more responsive for users. brows...

Configuring servers for Ogg media - HTTP
ally begin downloading the media as soon as the page is loaded, under the assumption that the user will play it. configuration for older firefox versions serve x-content-duration headers note: as of firefox 41, the x-content-duration header is no longer supported. see bug 1160695 for more details. the ogg format doesn't encapsulate the duration of media, so for the progress bar on the video controls to display the duration of the video, gecko needs to determine the length of the media using other means. there are two ways gecko can do this. the best way is to offer an x-content-duration header when serving ogg media files. this header provides the duration of the video in seconds (not in hh:mm:ss format) as a floating-point value. for example, if the video is 1 minute and 32.6 seconds long...

Using Feature Policy - HTTP
s-origin documents in nested browsing contexts. 'none': the feature is disabled in top-level and nested browsing contexts. specifying your policy feature policy provides two ways to specify policies to control features: the feature-policy http header. the allow attribute on <iframe>s. 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. the feature-policy http header you can send the feature-policy http header with the response of a page. the value of this header is a policy to be enforced by the browser for the given page. it has the following structure. feature-policy: <feature name> <allowlist of origin(s)> fo...

Connection - HTTP
if the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done. connection-specific header fields such as connection and keep-alive are prohibited in http/2. chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them. ...

CSP: script-src - HTTP
our inline scripts. csp supports sha256, sha384 and sha512. content-security-policy: script-src 'sha256-b2yphkaxnvfwtrchibabymubfzdvfkkxhbwtwiddvf8=' when generating the hash, don't include the <script> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. <script>var inline = 1;</script> unsafe eval expressions the 'unsafe-eval' source expression controls several script execution methods that create code from strings. if 'unsafe-eval' isn't specified with the script-src directive, the following methods are blocked and won't have any effect: eval() function() when passing a string literal like to methods like: window.settimeout("alert(\"hello world!\");", 500); window.settimeout window.setinterval window.setimmediate window.e...

CSP: style-src - HTTP
256, sha384 and sha512. content-security-policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f' when generating the hash, don't include the <style> tags and note that capitalization and whitespace matter, including leading or trailing whitespace. <style>#inline-style { background: red; }</style> unsafe style expressions the 'unsafe-eval' source expression controls several style methods that create style declarations from strings. if 'unsafe-eval' isn't specified with the style-src directive, the following methods are blocked and won't have any effect: cssstylesheet.insertrule() cssgroupingrule.insertrule() cssstyledeclaration.csstext specifications specification status comment content security policy level 3the definitio...

Feature-Policy: accelerometer - HTTP
syntax feature-policy: accelerometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: ambient-light-sensor - HTTP
syntax feature-policy: ambient-light-sensor <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: autoplay - HTTP
when this policy is enabled and there were no user gestures, the promise returned by htmlmediaelement.play() will reject with a domexception. the autoplay attribute on <audio> and <video> elements will be ignored. for more details on autoplay and autoplay blocking, see the article autoplay guide for media and web audio apis. ...

Feature-Policy: battery - HTTP
syntax feature-policy: battery <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: camera - HTTP
when this policy is enabled, the promise returned by mediadevices.getusermedia() will reject with a notallowederror. syntax feature-policy: camera <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: display-capture - HTTP
if display-capture is disabled in a document, the document will not be able to initiate screen capture via getdisplaymedia(). syntax feature-policy: display-capture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: document-domain - HTTP
when this policy is enabled, attempting to set document.domain will fail and cause a securityerror domexception to be be thrown. syntax feature-policy: document-domain <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: encrypted-media - HTTP
when this policy is enabled, the promise returned by navigator.requestmediakeysystemaccess() will reject with a domexception. syntax feature-policy: encrypted-media <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: fullscreen - HTTP
when this policy is enabled, the returned promise rejects with a typeerror. by default, top-level documents and their same-origin child frames can request and enter fullscreen mode. this directive allows or prevents cross-origin frames from using fullscreen mode. this includes same-origin frames. if both this directive (i.e. via the allow attribute) and the allowfullscreen attribute are present on an <iframe> element, this directive takes precedence. ...

Feature-Policy: geolocation - HTTP
when this policy is enabled, calls to getcurrentposition() and watchposition() will cause those functions' callbacks to be invoked with a positionerror code of permission_denied. by default, the geolocation api can be used within top-level documents and their same-origin child frames. this directive allows or prevents cross-origin frames from accessing geolocation. this includes same-origin frames. ...

Feature-Policy: gyroscope - HTTP
syntax feature-policy: gyroscope <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: layout-animations - HTTP
syntax feature-policy: layout-animations <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: legacy-image-formats - HTTP
syntax feature-policy: legacy-image-formats <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: magnetometer - HTTP
syntax feature-policy: magnetometer <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: microphone - HTTP
when this policy is enabled, the promise returned by mediadevices.getusermedia() will reject with a notallowederror. syntax feature-policy: microphone <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: midi - HTTP
when this policy is enabled, the promise returned by navigator.requestmidiaccess() will reject with a domexception. syntax feature-policy: midi <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: oversized-images - HTTP
syntax feature-policy: oversized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: payment - HTTP
when this policy is disabled, the paymentrequest() constructor will throw a syntaxerror. syntax feature-policy: payment <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: picture-in-picture - HTTP
syntax feature-policy: picture-in-picture <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...

Feature-Policy: publickey-credentials-get - HTTP
when this policy is enabled, any attempt to query public key credentials will result in an error. syntax feature-policy: publickey-credentials-get <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. ...

Feature-Policy: screen-wake-lock - HTTP
note: in earlier specification drafts this directive was called wake-lock. ...

Feature-Policy: sync-xhr - HTTP
syntax feature-policy: sync-xhr <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. 'src': (in an iframe allow attribute only) the feature will be allowed in this iframe, as long as the document loaded into it comes from the same origin as the url in the iframe's src attribute. ...

Feature-Policy: unoptimized-images - HTTP
syntax feature-policy: unoptimized-images <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin. 'self': the feature will be allowed in this document, and in all nested browsing contexts (iframes) in the same origin. ...